Skip to content

Commit 5892acf

Browse files
authored
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.
1 parent 67f9a29 commit 5892acf

File tree

1 file changed

+5
-3
lines changed

1 file changed

+5
-3
lines changed

src/material/slide-toggle/slide-toggle.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '../core/tokens/m2/mat/switch' as tokens-mat-switch;
44
@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
55
@use '../core/tokens/token-utils';
6+
@use '../core/style/vendor-prefixes';
67

78
$_mdc-slots: (tokens-mdc-switch.$prefix, tokens-mdc-switch.get-token-slots());
89
$_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
261262
@include token-utils.create-token-slot(height, with-icon-handle-size);
262263
}
263264

264-
.mat-mdc-slide-toggle:active .mdc-switch:not(.mdc-switch--disabled) & {
265+
.mat-mdc-slide-toggle .mdc-switch:active:not(.mdc-switch--disabled) & {
265266
@include token-utils.create-token-slot(width, pressed-handle-size);
266267
@include token-utils.create-token-slot(height, pressed-handle-size);
267268
}
268269

269-
.mat-mdc-slide-toggle:active .mdc-switch--selected:not(.mdc-switch--disabled) & {
270+
.mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) & {
270271
@include token-utils.create-token-slot(margin, selected-pressed-handle-horizontal-margin);
271272
}
272273

273-
.mat-mdc-slide-toggle:active .mdc-switch--unselected:not(.mdc-switch--disabled) & {
274+
.mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) & {
274275
@include token-utils.create-token-slot(margin, unselected-pressed-handle-horizontal-margin);
275276
}
276277

@@ -503,6 +504,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
503504
}
504505

505506
.mat-mdc-slide-toggle {
507+
@include vendor-prefixes.user-select(none);
506508
display: inline-block;
507509
-webkit-tap-highlight-color: transparent;
508510

0 commit comments

Comments
 (0)