Skip to content

Commit b167da2

Browse files
committed
fix(material-experimental/mdc-slider): code review changes
* use @use instead of @import for @material/slider styles * make tooltip color change when in dark theme * add underscore to custom-slider-color to ensure it doesn't get exported
1 parent dfc76e4 commit b167da2

File tree

2 files changed

+14
-10
lines changed

2 files changed

+14
-10
lines changed

src/material-experimental/mdc-slider/_slider-theme.scss

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1-
@import '@material/slider/slider';
1+
@use '@material/slider/slider' as mdc-slider;
22
@import '@material/slider/slider-theme';
33
@import '../mdc-helpers/mdc-helpers';
44
@import '../../material/core/ripple/ripple';
55

66
@mixin mat-mdc-slider-color($config-or-theme) {
77
$config: mat-get-color-config($config-or-theme);
88
@include mat-using-mdc-theme($config) {
9-
@include without-ripple($query: $mat-theme-styles-query);
9+
@include mdc-slider.without-ripple($query: $mat-theme-styles-query);
1010

1111
.mat-mdc-slider {
1212
&.mat-primary, &.mat-accent, &.mat-warn {
13+
$is-dark: map-get($config, is-dark);
14+
$indicator-color: if($is-dark, white, black);
15+
$indicator-text-color: if($is-dark, black, white);
16+
1317
@include value-indicator-color(
14-
$color: #000,
18+
$color: $indicator-color,
1519
$opacity: 0.6,
1620
$query: $mat-theme-styles-query
1721
);
1822
@include value-indicator-text-color(
19-
$color: on-primary,
23+
$color: $indicator-text-color,
2024
$query: $mat-theme-styles-query
2125
);
2226
@include tick-mark-active-color(
@@ -29,15 +33,15 @@
2933
}
3034

3135
&.mat-primary {
32-
@include custom-slider-color(primary);
36+
@include _custom-slider-color(primary);
3337
}
3438

3539
&.mat-accent {
36-
@include custom-slider-color(secondary);
40+
@include _custom-slider-color(secondary);
3741
}
3842

3943
&.mat-warn {
40-
@include custom-slider-color(error);
44+
@include _custom-slider-color(error);
4145
}
4246
}
4347
}
@@ -71,7 +75,7 @@
7175
}
7276
}
7377

74-
@mixin custom-slider-color($color) {
78+
@mixin _custom-slider-color($color) {
7579
@include thumb-color(
7680
$color-or-map: (
7781
default: $color,

src/material-experimental/mdc-slider/slider.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@import '@material/slider/slider';
1+
@use '@material/slider/slider' as mdc-slider;
22
@import '../mdc-helpers/mdc-helpers';
33

4-
@include without-ripple($query: $mat-base-styles-query);
4+
@include mdc-slider.without-ripple($query: $mat-base-styles-query);
55

66
.mdc-slider {
77
display: block;

0 commit comments

Comments
 (0)