Skip to content

Commit 8243b16

Browse files
crisbetojelbourn
authored andcommitted
fix(slider): thumb disappearing on disabled element with thumb label (#6641)
Fixes the slider thumb becoming hidden when a disabled slider with a thumb label is focused. Fixes #6631.
1 parent 11e2239 commit 8243b16

File tree

1 file changed

+18
-16
lines changed

1 file changed

+18
-16
lines changed

src/lib/slider/slider.scss

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -214,26 +214,28 @@ $mat-slider-focus-ring-size: 30px !default;
214214

215215

216216
// Active slider.
217-
.cdk-focused {
218-
&.mat-slider-thumb-label-showing .mat-slider-thumb {
219-
transform: scale(0);
220-
}
217+
.mat-slider:not(.mat-slider-disabled) {
218+
&.cdk-focused {
219+
&.mat-slider-thumb-label-showing .mat-slider-thumb {
220+
transform: scale(0);
221+
}
221222

222-
.mat-slider-thumb-label {
223-
border-radius: 50% 50% 0;
224-
}
223+
.mat-slider-thumb-label {
224+
border-radius: 50% 50% 0;
225+
}
225226

226-
.mat-slider-thumb-label-text {
227-
opacity: 1;
227+
.mat-slider-thumb-label-text {
228+
opacity: 1;
229+
}
228230
}
229-
}
230231

231-
.cdk-mouse-focused,
232-
.cdk-touch-focused,
233-
.cdk-program-focused {
234-
.mat-slider-thumb {
235-
border-width: $mat-slider-thumb-border-width-active;
236-
transform: scale($mat-slider-thumb-focus-scale);
232+
&.cdk-mouse-focused,
233+
&.cdk-touch-focused,
234+
&.cdk-program-focused {
235+
.mat-slider-thumb {
236+
border-width: $mat-slider-thumb-border-width-active;
237+
transform: scale($mat-slider-thumb-focus-scale);
238+
}
237239
}
238240
}
239241

0 commit comments

Comments
 (0)