Skip to content

Commit 2a6a63c

Browse files
authored
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 6544de8 commit 2a6a63c

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
@@ -13,6 +13,18 @@
1313
.mat-slider-thumb-label-text {
1414
color: mat-color($palette, default-contrast);
1515
}
16+
17+
.mat-slider-focus-ring {
18+
$opacity: 0.2;
19+
$color: mat-color($palette, default, $opacity);
20+
background-color: $color;
21+
22+
// `mat-color` uses `rgba` for the opacity which won't work with
23+
// CSS variables so we need to use `opacity` as a fallback.
24+
@if (type-of($color) != color) {
25+
opacity: $opacity;
26+
}
27+
}
1628
}
1729

1830
@mixin mat-slider-color($config-or-theme) {
@@ -48,18 +60,6 @@
4860
@include _mat-slider-inner-content-theme($warn);
4961
}
5062

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

0 commit comments

Comments
 (0)