Skip to content

Commit

Permalink
perf(material/slide-toggle): Optimize :state descendant selectors
Browse files Browse the repository at this point in the history
  • Loading branch information
@kseamon
kseamon committed Feb 19, 2025
1 parent 29e67e6 commit 7ecdb13
Showing 1 changed file with 51 additions and 43 deletions.
94 changes: 51 additions & 43 deletions src/material/slide-toggle/slide-toggle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,22 +113,22 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
}

@include token-utils.use-tokens($_mdc-slots...) {
.mdc-switch:enabled:hover:not(:focus):not(:active) & {
.mdc-switch:enabled:hover:not(:focus):not(:active) > & {
@include token-utils.create-token-slot(background, unselected-hover-track-color);
}

.mdc-switch:enabled:focus:not(:active) & {
.mdc-switch:enabled:focus:not(:active) > & {
@include token-utils.create-token-slot(background, unselected-focus-track-color);
}

.mdc-switch:enabled:active & {
.mdc-switch:enabled:active > & {
@include token-utils.create-token-slot(background, unselected-pressed-track-color);
}

#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &,
#{$_interactive-disabled-selector}:focus:not(:active) &,
#{$_interactive-disabled-selector}:active &,
.mdc-switch.mdc-switch--disabled & {
#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) > &,
#{$_interactive-disabled-selector}:focus:not(:active) > &,
#{$_interactive-disabled-selector}:active > &,
.mdc-switch.mdc-switch--disabled > & {
@include token-utils.create-token-slot(background, disabled-unselected-track-color);
}
}
Expand Down Expand Up @@ -162,22 +162,22 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
}

@include token-utils.use-tokens($_mdc-slots...) {
.mdc-switch:enabled:hover:not(:focus):not(:active) & {
.mdc-switch:enabled:hover:not(:focus):not(:active) > & {
@include token-utils.create-token-slot(background, selected-hover-track-color);
}

.mdc-switch:enabled:focus:not(:active) & {
.mdc-switch:enabled:focus:not(:active) > & {
@include token-utils.create-token-slot(background, selected-focus-track-color);
}

.mdc-switch:enabled:active & {
.mdc-switch:enabled:active > & {
@include token-utils.create-token-slot(background, selected-pressed-track-color);
}

#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &,
#{$_interactive-disabled-selector}:focus:not(:active) &,
#{$_interactive-disabled-selector}:active &,
.mdc-switch.mdc-switch--disabled & {
#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) > &,
#{$_interactive-disabled-selector}:focus:not(:active) > &,
#{$_interactive-disabled-selector}:active > &,
.mdc-switch.mdc-switch--disabled > & {
@include token-utils.create-token-slot(background, disabled-selected-track-color);
}
}
Expand Down Expand Up @@ -314,42 +314,45 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
@include token-utils.create-token-slot(background, selected-handle-color);
}

.mdc-switch--selected:enabled:hover:not(:focus):not(:active) & {
.mdc-switch--selected:enabled:hover:not(:focus):not(:active) > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, selected-hover-handle-color);
}

.mdc-switch--selected:enabled:focus:not(:active) & {
.mdc-switch--selected:enabled:focus:not(:active) > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, selected-focus-handle-color);
}

.mdc-switch--selected:enabled:active & {
.mdc-switch--selected:enabled:active > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, selected-pressed-handle-color);
}

#{$_interactive-disabled-selector}.mdc-switch--selected:hover:not(:focus):not(:active) &,
#{$_interactive-disabled-selector}.mdc-switch--selected:focus:not(:active) &,
#{$_interactive-disabled-selector}.mdc-switch--selected:active &,
.mdc-switch--selected.mdc-switch--disabled & {
@include token-utils.create-token-slot(background, disabled-selected-handle-color);
#{$_interactive-disabled-selector}.mdc-switch--selected:hover:not(:focus):not(:active),
#{$_interactive-disabled-selector}.mdc-switch--selected:focus:not(:active),
#{$_interactive-disabled-selector}.mdc-switch--selected:active,
.mdc-switch--selected.mdc-switch--disabled {
> .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, disabled-selected-handle-color);
}
}

.mdc-switch--unselected:enabled & {
.mdc-switch--unselected:enabled > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, unselected-handle-color);
}

.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) & {
// stylelint-disable-next-line max-line-length
.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, unselected-hover-handle-color);
}

.mdc-switch--unselected:enabled:focus:not(:active) & {
.mdc-switch--unselected:enabled:focus:not(:active) > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, unselected-focus-handle-color);
}

.mdc-switch--unselected:enabled:active & {
.mdc-switch--unselected:enabled:active > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, unselected-pressed-handle-color);
}

.mdc-switch--unselected.mdc-switch--disabled & {
.mdc-switch--unselected.mdc-switch--disabled > .mdc-switch__handle-track > & {
@include token-utils.create-token-slot(background, disabled-unselected-handle-color);
}
}
Expand All @@ -373,11 +376,13 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
@include token-utils.create-token-slot(box-shadow, handle-elevation-shadow);
}

#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &,
#{$_interactive-disabled-selector}:focus:not(:active) &,
#{$_interactive-disabled-selector}:active &,
.mdc-switch.mdc-switch--disabled & {
@include token-utils.create-token-slot(box-shadow, disabled-handle-elevation-shadow);
#{$_interactive-disabled-selector}:hover:not(:focus):not(:active),
#{$_interactive-disabled-selector}:focus:not(:active),
#{$_interactive-disabled-selector}:active,
.mdc-switch.mdc-switch--disabled {
> .mdc-switch__handle-track > .mdc-switch__handle > & {
@include token-utils.create-token-slot(box-shadow, disabled-handle-elevation-shadow);
}
}
}
}
Expand Down Expand Up @@ -406,7 +411,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
display: block;
}

.mdc-switch:hover & {
.mdc-switch:hover > .mdc-switch__handle-track > .mdc-switch__handle > & {
opacity: 0.04;
transition: 75ms opacity cubic-bezier(0, 0, 0.2, 1);
}
Expand All @@ -417,32 +422,35 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
}

@include token-utils.use-tokens($_mdc-slots...) {
#{$_interactive-disabled-selector}:enabled:focus &,
#{$_interactive-disabled-selector}:enabled:active &,
#{$_interactive-disabled-selector}:enabled:hover:not(:focus) &,
.mdc-switch--unselected:enabled:hover:not(:focus) & {
@include token-utils.create-token-slot(background, unselected-hover-state-layer-color);
#{$_interactive-disabled-selector}:enabled:focus,
#{$_interactive-disabled-selector}:enabled:active,
#{$_interactive-disabled-selector}:enabled:hover:not(:focus),
.mdc-switch--unselected:enabled:hover:not(:focus) {
> .mdc-switch__handle-track > .mdc-switch__handle > & {
@include token-utils.create-token-slot(background, unselected-hover-state-layer-color);
}
}

.mdc-switch--unselected:enabled:focus & {
.mdc-switch--unselected:enabled:focus > .mdc-switch__handle-track > .mdc-switch__handle > & {
@include token-utils.create-token-slot(background, unselected-focus-state-layer-color);
}

.mdc-switch--unselected:enabled:active & {
.mdc-switch--unselected:enabled:active > .mdc-switch__handle-track > .mdc-switch__handle > & {
@include token-utils.create-token-slot(background, unselected-pressed-state-layer-color);
@include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
transition: opacity 75ms linear;
}

.mdc-switch--selected:enabled:hover:not(:focus) & {
// stylelint-disable-next-line max-line-length
.mdc-switch--selected:enabled:hover:not(:focus) > .mdc-switch__handle-track > .mdc-switch__handle > & {
@include token-utils.create-token-slot(background, selected-hover-state-layer-color);
}

.mdc-switch--selected:enabled:focus & {
.mdc-switch--selected:enabled:focus > .mdc-switch__handle-track > .mdc-switch__handle > & {
@include token-utils.create-token-slot(background, selected-focus-state-layer-color);
}

.mdc-switch--selected:enabled:active & {
.mdc-switch--selected:enabled:active > .mdc-switch__handle-track > .mdc-switch__handle > & {
@include token-utils.create-token-slot(background, selected-pressed-state-layer-color);
@include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
transition: opacity 75ms linear;
Expand Down

0 comments on commit 7ecdb13

Please # to comment.