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:list';
|
27 | @use '@material/theme/custom-properties';
|
28 | @use '@material/theme/theme';
|
29 | @use '@material/shape/functions' as shape-functions;
|
30 | @use '@material/shape/mixins' as shape-mixins;
|
31 | @use '@material/floating-label/mixins' as floating-label-mixins;
|
32 | @use '@material/feature-targeting/feature-targeting';
|
33 | @use '@material/rtl/rtl';
|
34 | @use './variables';
|
35 |
|
36 | @mixin core-styles($query: feature-targeting.all()) {
|
37 | $feat-structure: feature-targeting.create-target($query, structure);
|
38 |
|
39 | .mdc-notched-outline {
|
40 | @include base_($query);
|
41 |
|
42 | &__leading,
|
43 | &__notch,
|
44 | &__trailing {
|
45 | @include feature-targeting.targets($feat-structure) {
|
46 | box-sizing: border-box;
|
47 | height: 100%;
|
48 | border-top: variables.$border-width solid;
|
49 | border-bottom: variables.$border-width solid;
|
50 | pointer-events: none;
|
51 | }
|
52 | }
|
53 |
|
54 | &__leading {
|
55 | @include feature-targeting.targets($feat-structure) {
|
56 | @include rtl.reflexive-property(
|
57 | border,
|
58 | variables.$border-width solid,
|
59 | none
|
60 | );
|
61 |
|
62 | width: variables.$leading-width;
|
63 | }
|
64 | }
|
65 |
|
66 | &__trailing {
|
67 | @include feature-targeting.targets($feat-structure) {
|
68 | @include rtl.reflexive-property(
|
69 | border,
|
70 | none,
|
71 | variables.$border-width solid
|
72 | );
|
73 |
|
74 | flex-grow: 1;
|
75 | }
|
76 | }
|
77 |
|
78 | &__notch {
|
79 | @include feature-targeting.targets($feat-structure) {
|
80 | flex: 0 0 auto;
|
81 | width: auto;
|
82 | max-width: calc(100% - #{variables.$leading-width} * 2);
|
83 | }
|
84 | }
|
85 |
|
86 | .mdc-floating-label {
|
87 | @include feature-targeting.targets($feat-structure) {
|
88 | display: inline-block;
|
89 | position: relative;
|
90 | max-width: 100%;
|
91 | }
|
92 | }
|
93 |
|
94 | .mdc-floating-label--float-above {
|
95 | @include feature-targeting.targets($feat-structure) {
|
96 | text-overflow: clip;
|
97 | }
|
98 | }
|
99 |
|
100 | &--upgraded .mdc-floating-label--float-above {
|
101 | @include feature-targeting.targets($feat-structure) {
|
102 | max-width: calc(100% / 0.75);
|
103 | }
|
104 | }
|
105 | }
|
106 |
|
107 | .mdc-notched-outline--notched {
|
108 | .mdc-notched-outline__notch {
|
109 | @include feature-targeting.targets($feat-structure) {
|
110 | @include rtl.reflexive-box(padding, right, 8px);
|
111 |
|
112 | border-top: none;
|
113 | }
|
114 | }
|
115 | }
|
116 |
|
117 | .mdc-notched-outline--no-label {
|
118 | .mdc-notched-outline__notch {
|
119 | @include feature-targeting.targets($feat-structure) {
|
120 | display: none;
|
121 | }
|
122 | }
|
123 | }
|
124 | }
|
125 |
|
126 | @mixin color($color, $query: feature-targeting.all()) {
|
127 | $feat-color: feature-targeting.create-target($query, color);
|
128 |
|
129 | .mdc-notched-outline__leading,
|
130 | .mdc-notched-outline__notch,
|
131 | .mdc-notched-outline__trailing {
|
132 | @include feature-targeting.targets($feat-color) {
|
133 | @include theme.property(border-color, $color);
|
134 | }
|
135 | }
|
136 | }
|
137 |
|
138 | @mixin stroke-width($width, $query: feature-targeting.all()) {
|
139 | $feat-structure: feature-targeting.create-target($query, structure);
|
140 |
|
141 | .mdc-notched-outline__leading,
|
142 | .mdc-notched-outline__notch,
|
143 | .mdc-notched-outline__trailing {
|
144 | @include feature-targeting.targets($feat-structure) {
|
145 | border-width: $width;
|
146 | }
|
147 | }
|
148 | }
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 | @mixin notch-offset($stroke-width, $query: feature-targeting.all()) {
|
156 | $feat-structure: feature-targeting.create-target($query, structure);
|
157 |
|
158 | .mdc-notched-outline--notched .mdc-notched-outline__notch {
|
159 | @include feature-targeting.targets($feat-structure) {
|
160 | padding-top: $stroke-width;
|
161 | }
|
162 | }
|
163 | }
|
164 |
|
165 | @mixin shape-radius(
|
166 | $radius,
|
167 | $rtl-reflexive: false,
|
168 | $component-height: null,
|
169 | $query: feature-targeting.all()
|
170 | ) {
|
171 | $feat-structure: feature-targeting.create-target($query, structure);
|
172 |
|
173 |
|
174 |
|
175 | $resolved-radius: shape-functions.resolve-radius(
|
176 | $radius,
|
177 | $component-height: $component-height
|
178 | );
|
179 |
|
180 |
|
181 |
|
182 |
|
183 | $top-left-radius: list.nth(
|
184 | shape-functions.unpack-radius($resolved-radius),
|
185 | 1
|
186 | );
|
187 | $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);
|
188 | $top-left-radius-px: $top-left-radius;
|
189 | @if ($top-left-is-custom-prop) {
|
190 | $top-left-radius-px: custom-properties.get-fallback($top-left-radius);
|
191 | }
|
192 |
|
193 | .mdc-notched-outline__leading {
|
194 |
|
195 | @include shape-mixins.radius(
|
196 | shape-functions.mask-radius($radius, 1 0 0 1),
|
197 | $rtl-reflexive: true,
|
198 | $component-height: $component-height,
|
199 | $query: $query
|
200 | );
|
201 |
|
202 | @include feature-targeting.targets($feat-structure) {
|
203 | @if ($top-left-radius-px > variables.$leading-width) {
|
204 |
|
205 |
|
206 | width: $top-left-radius-px;
|
207 | @if ($top-left-is-custom-prop) {
|
208 |
|
209 |
|
210 |
|
211 | }
|
212 | }
|
213 |
|
214 | @if ($top-left-is-custom-prop) {
|
215 |
|
216 |
|
217 |
|
218 | $var: custom-properties.create-var($top-left-radius);
|
219 | @supports (top: max(0%)) {
|
220 | width: max(#{variables.$leading-width}, #{$var});
|
221 | }
|
222 | }
|
223 | }
|
224 | }
|
225 |
|
226 |
|
227 |
|
228 | .mdc-notched-outline__notch {
|
229 | @include feature-targeting.targets($feat-structure) {
|
230 | @if ($top-left-radius-px > variables.$leading-width) {
|
231 | max-width: calc(100% - #{$top-left-radius-px} * 2);
|
232 | @if ($top-left-is-custom-prop) {
|
233 |
|
234 | }
|
235 | }
|
236 |
|
237 | @if ($top-left-is-custom-prop) {
|
238 | $var: custom-properties.create-var($top-left-radius);
|
239 | @supports (top: max(0%)) {
|
240 | max-width: calc(100% - max(#{variables.$leading-width}, #{$var}) * 2);
|
241 | }
|
242 | }
|
243 | }
|
244 | }
|
245 |
|
246 | .mdc-notched-outline__trailing {
|
247 |
|
248 | @include shape-mixins.radius(
|
249 | shape-functions.mask-radius($radius, 0 1 1 0),
|
250 | $rtl-reflexive: true,
|
251 | $component-height: $component-height,
|
252 | $query: $query
|
253 | );
|
254 | }
|
255 | }
|
256 |
|
257 | @mixin floating-label-float-position(
|
258 | $positionY,
|
259 | $positionX: 0%,
|
260 | $scale: 0.75,
|
261 | $query: feature-targeting.all()
|
262 | ) {
|
263 | $feat-structure: feature-targeting.create-target($query, structure);
|
264 |
|
265 | @include floating-label-mixins.float-position(
|
266 | $positionY + variables.$label-adjust,
|
267 | $positionX,
|
268 | 1,
|
269 | $query: $query
|
270 | );
|
271 |
|
272 | .mdc-floating-label--float-above {
|
273 | @include feature-targeting.targets($feat-structure) {
|
274 | font-size: ($scale * 1rem);
|
275 | }
|
276 | }
|
277 |
|
278 |
|
279 | &.mdc-notched-outline--upgraded,
|
280 | .mdc-notched-outline--upgraded {
|
281 | @include floating-label-mixins.float-position(
|
282 | $positionY,
|
283 | $positionX,
|
284 | $scale,
|
285 | $query: $query
|
286 | );
|
287 |
|
288 |
|
289 | .mdc-floating-label--float-above {
|
290 | @include feature-targeting.targets($feat-structure) {
|
291 | font-size: 1rem;
|
292 | }
|
293 | }
|
294 | }
|
295 | }
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 | @mixin floating-label-float-position-absolute(
|
308 | $positionY,
|
309 | $positionX: 0,
|
310 | $scale: 0.75,
|
311 | $query: feature-targeting.all()
|
312 | ) {
|
313 | $feat-structure: feature-targeting.create-target($query, structure);
|
314 |
|
315 | @include floating-label-mixins.float-position(
|
316 | $positionY + variables.$label-adjust-absolute,
|
317 | $positionX,
|
318 | 1,
|
319 | $query: $query
|
320 | );
|
321 |
|
322 | .mdc-floating-label--float-above {
|
323 | @include feature-targeting.targets($feat-structure) {
|
324 | font-size: ($scale * 1rem);
|
325 | }
|
326 | }
|
327 |
|
328 |
|
329 | &.mdc-notched-outline--upgraded,
|
330 | .mdc-notched-outline--upgraded {
|
331 | @include floating-label-mixins.float-position(
|
332 | $positionY,
|
333 | $positionX,
|
334 | $scale,
|
335 | $query: $query
|
336 | );
|
337 |
|
338 |
|
339 | .mdc-floating-label--float-above {
|
340 | @include feature-targeting.targets($feat-structure) {
|
341 | font-size: 1rem;
|
342 | }
|
343 | }
|
344 | }
|
345 | }
|
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 | @mixin notch-max-width($max-width, $query: feature-targeting.all()) {
|
353 | $feat-structure: feature-targeting.create-target($query, structure);
|
354 |
|
355 | :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
|
356 | @include feature-targeting.targets($feat-structure) {
|
357 | max-width: $max-width;
|
358 | }
|
359 | }
|
360 | }
|
361 |
|
362 |
|
363 |
|
364 |
|
365 | @mixin base_($query) {
|
366 | $feat-structure: feature-targeting.create-target($query, structure);
|
367 |
|
368 | @include feature-targeting.targets($feat-structure) {
|
369 | display: flex;
|
370 | position: absolute;
|
371 | top: 0;
|
372 | right: 0;
|
373 | left: 0;
|
374 | box-sizing: border-box;
|
375 | width: 100%;
|
376 | max-width: 100%;
|
377 | height: 100%;
|
378 | @include rtl.ignore-next-line();
|
379 | text-align: left;
|
380 | pointer-events: none;
|
381 |
|
382 | @include rtl.rtl {
|
383 | @include rtl.ignore-next-line();
|
384 | text-align: right;
|
385 | }
|
386 | }
|
387 | }
|