diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 640aad6ce4b9..161a2f7c4d98 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -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); } } @@ -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); } } @@ -266,19 +266,16 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc @include token-utils.create-token-slot(height, with-icon-handle-size); } - // stylelint-disable-next-line max-line-length - .mat-mdc-slide-toggle .mdc-switch:active:not(.mdc-switch--disabled) > .mdc-switch__handle-track > & { + .mat-mdc-slide-toggle .mdc-switch:active:not(.mdc-switch--disabled) & { @include token-utils.create-token-slot(width, pressed-handle-size); @include token-utils.create-token-slot(height, pressed-handle-size); } - // stylelint-disable-next-line max-line-length - .mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) > .mdc-switch__handle-track > & { + .mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) & { @include token-utils.create-token-slot(margin, selected-pressed-handle-horizontal-margin); } - // stylelint-disable-next-line max-line-length - .mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) > .mdc-switch__handle-track > & { + .mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) & { @include token-utils.create-token-slot(margin, unselected-pressed-handle-horizontal-margin); } @@ -313,49 +310,46 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc @include token-utils.use-tokens($_mdc-slots...) { &::after { - .mdc-switch--selected:enabled > .mdc-switch__handle-track > & { + .mdc-switch--selected:enabled & { @include token-utils.create-token-slot(background, selected-handle-color); } - .mdc-switch--selected:enabled:hover:not(:focus):not(:active) > .mdc-switch__handle-track > & { + .mdc-switch--selected:enabled:hover:not(:focus):not(:active) & { @include token-utils.create-token-slot(background, selected-hover-handle-color); } - .mdc-switch--selected:enabled:focus:not(:active) > .mdc-switch__handle-track > & { + .mdc-switch--selected:enabled:focus:not(:active) & { @include token-utils.create-token-slot(background, selected-focus-handle-color); } - .mdc-switch--selected:enabled:active > .mdc-switch__handle-track > & { + .mdc-switch--selected:enabled:active & { @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 { - > .mdc-switch__handle-track > & { - @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 & { + @include token-utils.create-token-slot(background, disabled-selected-handle-color); } - .mdc-switch--unselected:enabled > .mdc-switch__handle-track > & { + .mdc-switch--unselected:enabled & { @include token-utils.create-token-slot(background, unselected-handle-color); } - // stylelint-disable-next-line max-line-length - .mdc-switch--unselected:enabled:hover:not(:focus):not(:active) > .mdc-switch__handle-track > & { + .mdc-switch--unselected:enabled:hover:not(:focus):not(:active) & { @include token-utils.create-token-slot(background, unselected-hover-handle-color); } - .mdc-switch--unselected:enabled:focus:not(:active) > .mdc-switch__handle-track > & { + .mdc-switch--unselected:enabled:focus:not(:active) & { @include token-utils.create-token-slot(background, unselected-focus-handle-color); } - .mdc-switch--unselected:enabled:active > .mdc-switch__handle-track > & { + .mdc-switch--unselected:enabled:active & { @include token-utils.create-token-slot(background, unselected-pressed-handle-color); } - .mdc-switch--unselected.mdc-switch--disabled > .mdc-switch__handle-track > & { + .mdc-switch--unselected.mdc-switch--disabled & { @include token-utils.create-token-slot(background, disabled-unselected-handle-color); } } @@ -375,17 +369,15 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc top: 0; @include token-utils.use-tokens($_mdc-slots...) { - .mdc-switch:enabled > .mdc-switch__handle-track > .mdc-switch__handle > & { + .mdc-switch:enabled & { @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 { - > .mdc-switch__handle-track > .mdc-switch__handle > & { - @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 & { + @include token-utils.create-token-slot(box-shadow, disabled-handle-elevation-shadow); } } } @@ -414,7 +406,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc display: block; } - .mdc-switch:hover > .mdc-switch__handle-track > .mdc-switch__handle > & { + .mdc-switch:hover & { opacity: 0.04; transition: 75ms opacity cubic-bezier(0, 0, 0.2, 1); } @@ -425,35 +417,32 @@ $_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) { - > .mdc-switch__handle-track > .mdc-switch__handle > & { - @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) & { + @include token-utils.create-token-slot(background, unselected-hover-state-layer-color); } - .mdc-switch--unselected:enabled:focus > .mdc-switch__handle-track > .mdc-switch__handle > & { + .mdc-switch--unselected:enabled:focus & { @include token-utils.create-token-slot(background, unselected-focus-state-layer-color); } - .mdc-switch--unselected:enabled:active > .mdc-switch__handle-track > .mdc-switch__handle > & { + .mdc-switch--unselected:enabled:active & { @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; } - // stylelint-disable-next-line max-line-length - .mdc-switch--selected:enabled:hover:not(:focus) > .mdc-switch__handle-track > .mdc-switch__handle > & { + .mdc-switch--selected:enabled:hover:not(:focus) & { @include token-utils.create-token-slot(background, selected-hover-state-layer-color); } - .mdc-switch--selected:enabled:focus > .mdc-switch__handle-track > .mdc-switch__handle > & { + .mdc-switch--selected:enabled:focus & { @include token-utils.create-token-slot(background, selected-focus-state-layer-color); } - .mdc-switch--selected:enabled:active > .mdc-switch__handle-track > .mdc-switch__handle > & { + .mdc-switch--selected:enabled:active & { @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;