-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
_checkbox-theme.scss
78 lines (64 loc) · 3.24 KB
/
_checkbox-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
@import '@material/checkbox/mixins.import';
@import '@material/checkbox/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-checkbox-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-checkbox-mark-color: $mdc-checkbox-mark-color;
$orig-mdc-checkbox-baseline-theme-color: $mdc-checkbox-baseline-theme-color;
$orig-mdc-checkbox-border-color: $mdc-checkbox-border-color;
$orig-mdc-checkbox-disabled-color: $mdc-checkbox-disabled-color;
@include mat-using-mdc-theme($theme) {
$mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary) !global;
$mdc-checkbox-baseline-theme-color: primary !global;
$mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), 0.54) !global;
$mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), 0.26) !global;
@include mdc-checkbox-without-ripple($query: $mat-theme-styles-query);
@include mdc-form-field-core-styles($query: $mat-theme-styles-query);
// MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
// class for accent and warn style, and applying the appropriate overrides below. Since we don't
// use MDC's ripple, we also need to set the color for our replacement ripple.
.mat-mdc-checkbox {
.mat-ripple-element,
.mdc-checkbox__background::before {
background: mdc-theme-prop-value(on-surface);
}
.mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
background: $primary;
}
&.mat-accent {
$mdc-checkbox-mark-color: mdc-theme-prop-value(on-secondary) !global;
$mdc-checkbox-baseline-theme-color: secondary !global;
@include mdc-checkbox-without-ripple($query: $mat-theme-styles-query);
.mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
background: $accent;
}
}
&.mat-warn {
$mdc-checkbox-mark-color: mdc-theme-prop-value(on-error) !global;
$mdc-checkbox-baseline-theme-color: error !global;
@include mdc-checkbox-without-ripple($query: $mat-theme-styles-query);
.mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
background: $warn;
}
}
}
}
// Restore original values of MDC global variables.
$mdc-checkbox-mark-color: $orig-mdc-checkbox-mark-color !global;
$mdc-checkbox-baseline-theme-color: $orig-mdc-checkbox-baseline-theme-color !global;
$mdc-checkbox-border-color: $orig-mdc-checkbox-border-color !global;
$mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
}
@mixin mat-mdc-checkbox-typography($config) {
@include mat-using-mdc-typography($config) {
@include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);
}
}