|
1 | 1 | @import '../core/theming/palette';
|
2 | 2 | @import '../core/theming/theming';
|
3 | 3 |
|
4 |
| - |
5 | 4 | @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
|
6 | 5 | // Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
|
7 | 6 | // the disabled styles.
|
|
16 | 15 | }
|
17 | 16 | }
|
18 | 17 |
|
19 |
| -// TODO(jelbourn): remove this when the real ripple has been applied to slide-toggle. |
20 |
| -@mixin _mat-slide-toggle-ripple($palette, $foreground, $thumb-checked-hue) { |
21 |
| - |
22 |
| - &.mat-slide-toggle-focused { |
23 |
| - &:not(.mat-checked) .mat-ink-ripple { |
24 |
| - // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity |
25 |
| - // of black in light themes and 12% of white in dark themes. |
26 |
| - background-color: mat-color($foreground, divider); |
27 |
| - } |
28 |
| - |
29 |
| - .mat-ink-ripple { |
30 |
| - background-color: mat-color($palette, $thumb-checked-hue, 0.26); |
31 |
| - } |
| 18 | +// Applies the specified colors to the slide-toggle ripple elements. |
| 19 | +@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) { |
| 20 | + &:not(.mat-checked) .mat-ripple-element { |
| 21 | + background-color: $ripple-unchecked-color; |
| 22 | + } |
| 23 | + .mat-ripple-element { |
| 24 | + background-color: $ripple-checked-color; |
32 | 25 | }
|
33 |
| - |
34 | 26 | }
|
35 | 27 |
|
36 | 28 | @mixin mat-slide-toggle-theme($theme) {
|
|
50 | 42 | $bar-normal-color: mat-color($foreground, disabled);
|
51 | 43 | $bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));
|
52 | 44 |
|
| 45 | + // Ripple colors are based on the current palette and the state of the slide-toggle. |
| 46 | + // See https://material.google.com/components/selection-controls.html#selection-controls-switch |
| 47 | + $ripple-checked-opacity: 0.12; |
| 48 | + $ripple-unchecked-color: mat-color($foreground, base, if($is-dark, 0.12, 0.06)); |
| 49 | + $ripple-primary-color: mat-color($primary, $thumb-checked-hue, $ripple-checked-opacity); |
| 50 | + $ripple-accent-color: mat-color($accent, $thumb-checked-hue, $ripple-checked-opacity); |
| 51 | + $ripple-warn-color: mat-color($warn, $thumb-checked-hue, $ripple-checked-opacity); |
| 52 | + |
53 | 53 | .mat-slide-toggle {
|
54 | 54 | @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
|
55 |
| - @include _mat-slide-toggle-ripple($accent, $foreground, $thumb-checked-hue); |
56 |
| - |
| 55 | + @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color); |
57 | 56 |
|
58 | 57 | &.mat-primary {
|
59 | 58 | @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
|
60 |
| - @include _mat-slide-toggle-ripple($primary, $foreground, $thumb-checked-hue); |
| 59 | + @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color); |
61 | 60 | }
|
62 | 61 |
|
63 | 62 | &.mat-warn {
|
64 | 63 | @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
|
65 |
| - @include _mat-slide-toggle-ripple($warn, $foreground, $thumb-checked-hue); |
| 64 | + @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color); |
66 | 65 | }
|
67 | 66 |
|
68 | 67 | }
|
|
0 commit comments