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 | @use 'sass:math';
|
27 | @use '@material/rtl/rtl';
|
28 | @use '@material/theme/theme';
|
29 | @use '@material/feature-targeting/feature-targeting';
|
30 | @use './variables';
|
31 |
|
32 |
|
33 |
|
34 | @mixin icon-core-styles($query: feature-targeting.all()) {
|
35 | .mdc-text-field__icon {
|
36 | @include icon_($query: $query);
|
37 |
|
38 | svg {
|
39 | @include _icon-svg($query: $query);
|
40 | }
|
41 | }
|
42 |
|
43 | .mdc-text-field__icon--leading {
|
44 | @include leading-icon_($query: $query);
|
45 | }
|
46 |
|
47 | .mdc-text-field__icon--trailing {
|
48 | @include trailing-icon_($query: $query);
|
49 | }
|
50 | }
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 | @mixin leading-icon-color($color, $query: feature-targeting.all()) {
|
57 | &:not(.mdc-text-field--disabled) {
|
58 | @include leading-icon-color_($color, $query);
|
59 | }
|
60 | }
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | @mixin trailing-icon-color($color, $query: feature-targeting.all()) {
|
67 | &:not(.mdc-text-field--disabled) {
|
68 | @include trailing-icon-color_($color, $query);
|
69 | }
|
70 | }
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | @mixin disabled-icon-color($color, $query: feature-targeting.all()) {
|
77 | &.mdc-text-field--disabled {
|
78 | @include leading-icon-color_($color, $query);
|
79 | @include trailing-icon-color_($color, $query);
|
80 | }
|
81 | }
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | @mixin size($size, $query: feature-targeting.all()) {
|
87 | $feat-structure: feature-targeting.create-target($query, structure);
|
88 |
|
89 | @include feature-targeting.targets($feat-structure) {
|
90 | .mdc-text-field__icon {
|
91 | font-size: $size;
|
92 | }
|
93 | }
|
94 | }
|
95 |
|
96 |
|
97 |
|
98 | @mixin icon_($query: feature-targeting.all()) {
|
99 | $feat-structure: feature-targeting.create-target($query, structure);
|
100 | $feat-color: feature-targeting.create-target($query, color);
|
101 |
|
102 | @include feature-targeting.targets($feat-structure) {
|
103 | align-self: center;
|
104 | cursor: pointer;
|
105 | }
|
106 |
|
107 | &:not([tabindex]),
|
108 | &[tabindex='-1'] {
|
109 | @include feature-targeting.targets($feat-color) {
|
110 | cursor: default;
|
111 | pointer-events: none;
|
112 | }
|
113 | }
|
114 | }
|
115 |
|
116 | @mixin _icon-svg($query: feature-targeting.all()) {
|
117 | $feat-structure: feature-targeting.create-target($query, structure);
|
118 |
|
119 | @include feature-targeting.targets($feat-structure) {
|
120 |
|
121 |
|
122 |
|
123 | display: block;
|
124 | }
|
125 | }
|
126 |
|
127 | @mixin leading-icon_($query: feature-targeting.all()) {
|
128 | $feat-structure: feature-targeting.create-target($query, structure);
|
129 |
|
130 | @include feature-targeting.targets($feat-structure) {
|
131 | @include rtl.reflexive-property(
|
132 | margin,
|
133 | variables.$leading-icon-padding-left,
|
134 | variables.$leading-icon-padding-right
|
135 | );
|
136 | }
|
137 | }
|
138 |
|
139 | @mixin trailing-icon_($query: feature-targeting.all()) {
|
140 | $feat-structure: feature-targeting.create-target($query, structure);
|
141 |
|
142 | @include feature-targeting.targets($feat-structure) {
|
143 | $padding: math.div(variables.$touch-target-size - variables.$icon-size, 2);
|
144 | $left-margin: variables.$trailing-icon-padding-left - $padding;
|
145 | $right-margin: variables.$trailing-icon-padding-right - $padding;
|
146 |
|
147 | padding: $padding;
|
148 | @include rtl.reflexive-property(margin, $left-margin, $right-margin);
|
149 | }
|
150 | }
|
151 |
|
152 | @mixin leading-icon-color_($color, $query: feature-targeting.all()) {
|
153 | $feat-color: feature-targeting.create-target($query, color);
|
154 |
|
155 | .mdc-text-field__icon--leading {
|
156 | @include feature-targeting.targets($feat-color) {
|
157 | @include theme.property(color, $color);
|
158 | }
|
159 | }
|
160 | }
|
161 |
|
162 | @mixin trailing-icon-color_($color, $query: feature-targeting.all()) {
|
163 | $feat-color: feature-targeting.create-target($query, color);
|
164 |
|
165 | .mdc-text-field__icon--trailing {
|
166 | @include feature-targeting.targets($feat-color) {
|
167 | @include theme.property(color, $color);
|
168 | }
|
169 | }
|
170 | }
|