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/rtl/rtl';
|
25 | @use '@material/theme/mixins' as theme-mixins;
|
26 | @use '@material/theme/state';
|
27 | @use '@material/theme/variables' as theme-variables;
|
28 |
|
29 | $icon-size: 24px !default;
|
30 | $dense-icon-size: 20px !default;
|
31 | $icon-horizontal-margin: 12px !default;
|
32 |
|
33 | $icon-color: rgba(theme-variables.prop-value(on-surface), 0.54) !default;
|
34 | $disabled-icon-color: rgba(
|
35 | theme-variables.prop-value(on-surface),
|
36 | 0.38
|
37 | ) !default;
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 | @mixin size($size, $query: feature-targeting.all()) {
|
44 | $feat-structure: feature-targeting.create-target($query, structure);
|
45 |
|
46 | @include feature-targeting.targets($feat-structure) {
|
47 | .mdc-select__icon {
|
48 | width: $size;
|
49 | height: $size;
|
50 | font-size: $size;
|
51 | }
|
52 | }
|
53 | }
|
54 |
|
55 | @mixin icon-color($color-or-map, $query: feature-targeting.all()) {
|
56 | &:not(.mdc-select--disabled) {
|
57 | @include _icon-color(
|
58 | state.get-default-state($color-or-map),
|
59 | $query: $query
|
60 | );
|
61 | }
|
62 |
|
63 | &.mdc-select--disabled {
|
64 | @include _icon-color(
|
65 | state.get-disabled-state($color-or-map),
|
66 | $query: $query
|
67 | );
|
68 | }
|
69 | }
|
70 |
|
71 | @mixin icon-horizontal-margins($left, $right, $query: feature-targeting.all()) {
|
72 | $feat-structure: feature-targeting.create-target($query, structure);
|
73 | .mdc-select__icon {
|
74 | @include feature-targeting.targets($feat-structure) {
|
75 | @include rtl.reflexive-property(margin, $left, $right);
|
76 | }
|
77 | }
|
78 | }
|
79 |
|
80 | @mixin _icon-color($color, $query: feature-targeting.all()) {
|
81 | $feat-color: feature-targeting.create-target($query, color);
|
82 |
|
83 | @if $color {
|
84 | .mdc-select__icon {
|
85 | @include feature-targeting.targets($feat-color) {
|
86 | @include theme-mixins.property(color, $color);
|
87 | }
|
88 | }
|
89 | }
|
90 | }
|