Skip to content

Commit b0014da

Browse files
crisbetojelbourn
authored andcommitted
fix(slider): focus ring not matching theme color (#19519)
Fixes the slider's focus ring always using the accent color, instead of matching the current theme palette. Fixes #19507.
1 parent 315c3a0 commit b0014da

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/material/slider/_slider-theme.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,18 @@
1212
.mat-slider-thumb-label-text {
1313
color: mat-color($palette, default-contrast);
1414
}
15+
16+
.mat-slider-focus-ring {
17+
$opacity: 0.2;
18+
$color: mat-color($palette, default, $opacity);
19+
background-color: $color;
20+
21+
// `mat-color` uses `rgba` for the opacity which won't work with
22+
// CSS variables so we need to use `opacity` as a fallback.
23+
@if (type-of($color) != color) {
24+
opacity: $opacity;
25+
}
26+
}
1527
}
1628

1729
@mixin mat-slider-theme($theme) {
@@ -46,18 +58,6 @@
4658
@include _mat-slider-inner-content-theme($warn);
4759
}
4860

49-
.mat-slider-focus-ring {
50-
$opacity: 0.2;
51-
$color: mat-color($accent, default, $opacity);
52-
background-color: $color;
53-
54-
// `mat-color` uses `rgba` for the opacity which won't work with
55-
// CSS variables so we need to use `opacity` as a fallback.
56-
@if (type-of($color) != color) {
57-
opacity: $opacity;
58-
}
59-
}
60-
6161
.mat-slider:hover,
6262
.cdk-focused {
6363
.mat-slider-track-background {

0 commit comments

Comments
 (0)