From 5892acfde36ac1c12e98f7ea95a2a02bb95eeedd Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 30 Jul 2024 18:42:36 +0200 Subject: [PATCH] fix(material/slide-toggle): don't trigger active state for entire container (#29514) Fixes that the slide toggle was triggering the `:active` styles for the entire container, even though only parts of it are interactive. Fixes #29483. --- src/material/slide-toggle/slide-toggle.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 2ee4027d2520..6dc448cf6781 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -3,6 +3,7 @@ @use '../core/tokens/m2/mat/switch' as tokens-mat-switch; @use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch; @use '../core/tokens/token-utils'; +@use '../core/style/vendor-prefixes'; $_mdc-slots: (tokens-mdc-switch.$prefix, tokens-mdc-switch.get-token-slots()); $_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots()); @@ -261,16 +262,16 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc @include token-utils.create-token-slot(height, with-icon-handle-size); } - .mat-mdc-slide-toggle:active .mdc-switch:not(.mdc-switch--disabled) & { + .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); } - .mat-mdc-slide-toggle:active .mdc-switch--selected:not(.mdc-switch--disabled) & { + .mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) & { @include token-utils.create-token-slot(margin, selected-pressed-handle-horizontal-margin); } - .mat-mdc-slide-toggle:active .mdc-switch--unselected:not(.mdc-switch--disabled) & { + .mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) & { @include token-utils.create-token-slot(margin, unselected-pressed-handle-horizontal-margin); } @@ -503,6 +504,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc } .mat-mdc-slide-toggle { + @include vendor-prefixes.user-select(none); display: inline-block; -webkit-tap-highlight-color: transparent;