1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | @use '@material/feature-targeting/feature-targeting';
|
24 | @use '@material/theme/mixins' as theme-mixins;
|
25 | @use '@material/theme/state';
|
26 | @use '@material/theme/variables' as theme-variables;
|
27 |
|
28 | $helper-text-color: rgba(theme-variables.prop-value(on-surface), 0.6) !default;
|
29 | $disabled-helper-text-color: rgba(
|
30 | theme-variables.prop-value(on-surface),
|
31 | 0.38
|
32 | ) !default;
|
33 |
|
34 | @mixin helper-text-color($color-or-map, $query: feature-targeting.all()) {
|
35 | &:not(.mdc-select--disabled) {
|
36 | @include _helper-text-color(
|
37 | state.get-default-state($color-or-map),
|
38 | $query: $query
|
39 | );
|
40 | }
|
41 |
|
42 | &.mdc-select--disabled {
|
43 | @include _helper-text-color(
|
44 | state.get-disabled-state($color-or-map),
|
45 | $query: $query
|
46 | );
|
47 | }
|
48 | }
|
49 |
|
50 | @mixin helper-text-validation-color(
|
51 | $color-or-map,
|
52 | $query: feature-targeting.all()
|
53 | ) {
|
54 | &:not(.mdc-select--disabled) {
|
55 | @include _helper-text-validation-color(
|
56 | state.get-default-state($color-or-map),
|
57 | $query: $query
|
58 | );
|
59 |
|
60 | &:not(.mdc-select--focused):hover {
|
61 | @include _helper-text-validation-color(
|
62 | state.get-hover-state($color-or-map),
|
63 | $query: $query
|
64 | );
|
65 | }
|
66 | }
|
67 | }
|
68 |
|
69 |
|
70 |
|
71 | @mixin _helper-text-color($color, $query: feature-targeting.all()) {
|
72 | $feat-color: feature-targeting.create-target($query, color);
|
73 |
|
74 | @if $color {
|
75 | & + .mdc-select-helper-text {
|
76 | @include feature-targeting.targets($feat-color) {
|
77 | @include theme-mixins.property(color, $color);
|
78 | }
|
79 | }
|
80 | }
|
81 | }
|
82 |
|
83 | @mixin _helper-text-validation-color($color, $query: feature-targeting.all()) {
|
84 | $feat-color: feature-targeting.create-target($query, color);
|
85 |
|
86 | @if $color {
|
87 | &.mdc-select--invalid + .mdc-select-helper-text--validation-msg {
|
88 | @include feature-targeting.targets($feat-color) {
|
89 | @include theme-mixins.property(color, $color);
|
90 | }
|
91 | }
|
92 | }
|
93 | }
|