/
_slide-toggle-theme.scss
85 lines (72 loc) · 3.41 KB
/
_slide-toggle-theme.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@import '@material/switch/mixins.import';
@import '@material/switch/variables.import';
@import '@material/form-field/mixins.import';
@import '@material/ripple/variables.import';
@import '@material/theme/functions.import';
@import '../mdc-helpers/mdc-helpers';
@mixin mat-mdc-slide-toggle-theme($theme) {
$primary: mat-color(map-get($theme, primary));
$accent: mat-color(map-get($theme, accent));
$warn: mat-color(map-get($theme, warn));
// Save original values of MDC global variables. We need to save these so we can restore the
// variables to their original values and prevent unintended side effects from using this mixin.
$orig-mdc-switch-baseline-theme-color: $mdc-switch-baseline-theme-color;
$orig-mdc-switch-toggled-off-thumb-color: $mdc-switch-toggled-off-thumb-color;
$orig-mdc-switch-toggled-off-track-color: $mdc-switch-toggled-off-track-color;
$orig-mdc-switch-disabled-thumb-color: $mdc-switch-disabled-thumb-color;
$orig-mdc-switch-disabled-track-color: $mdc-switch-disabled-track-color;
@include mat-using-mdc-theme($theme) {
$mdc-switch-baseline-theme-color: primary !global;
$mdc-switch-toggled-off-thumb-color: mdc-theme-prop-value(surface) !global;
$mdc-switch-toggled-off-track-color: mdc-theme-prop-value(on-surface) !global;
$mdc-switch-disabled-thumb-color: mdc-theme-prop-value(surface) !global;
$mdc-switch-disabled-track-color: mdc-theme-prop-value(on-surface) !global;
@include mdc-form-field-core-styles($query: $mat-theme-styles-query);
// MDC's switch doesn't support a `color` property. We add support
// for it by adding a CSS class for accent and warn style.
.mat-mdc-slide-toggle {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $mdc-switch-toggled-off-ripple-color;
}
&.mat-primary {
@include mdc-switch-without-ripple($query: $mat-theme-styles-query);
}
&.mat-accent {
$mdc-switch-baseline-theme-color: secondary !global;
@include mdc-switch-without-ripple($query: $mat-theme-styles-query);
}
&.mat-warn {
$mdc-switch-baseline-theme-color: error !global;
@include mdc-switch-without-ripple($query: $mat-theme-styles-query);
}
}
// The ripple color matches the palette only when it's checked.
.mat-mdc-slide-toggle-checked {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $primary;
}
&.mat-accent {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $accent;
}
}
&.mat-warn {
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
background: $warn;
}
}
}
}
// Restore original values of MDC global variables.
$mdc-switch-baseline-theme-color: $orig-mdc-switch-baseline-theme-color !global;
$mdc-switch-toggled-off-thumb-color: $orig-mdc-switch-toggled-off-thumb-color !global;
$mdc-switch-toggled-off-track-color: $orig-mdc-switch-toggled-off-track-color !global;
$mdc-switch-disabled-thumb-color: $orig-mdc-switch-disabled-thumb-color !global;
$mdc-switch-disabled-track-color: $orig-mdc-switch-disabled-track-color !global;
}
@mixin mat-mdc-slide-toggle-typography($config) {
@include mat-using-mdc-typography($config) {
@include mdc-switch-without-ripple($query: $mat-typography-styles-query);
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);
}
}