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 | @use '@material/animation/animation';
|
28 | @use '@material/dom/dom';
|
29 | @use '@material/elevation/elevation-theme';
|
30 | @use '@material/focus-ring/focus-ring';
|
31 | @use '@material/feature-targeting/feature-targeting';
|
32 | @use '@material/ripple/ripple';
|
33 | @use '@material/ripple/ripple-theme';
|
34 | @use '@material/rtl/rtl';
|
35 | @use '@material/theme/theme-color';
|
36 | @use '@material/touch-target/touch-target';
|
37 | @use './chip-theme';
|
38 |
|
39 | @mixin core-styles($query: feature-targeting.all()) {
|
40 | @include without-ripple-styles($query);
|
41 | @include ripple-styles($query);
|
42 | }
|
43 |
|
44 | @mixin without-ripple-styles($query: feature-targeting.all()) {
|
45 | @include static-styles($query);
|
46 | @include _theme-styles($query);
|
47 | }
|
48 |
|
49 | @mixin ripple-styles($query: feature-targeting.all()) {
|
50 | $feat-structure: feature-targeting.create-target($query, structure);
|
51 |
|
52 | @include chip-theme.ripple-color(chip-theme.$ripple-color, $query: $query);
|
53 | @include chip-theme.trailing-action-ripple-color(
|
54 | chip-theme.$ripple-color,
|
55 | $query: $query
|
56 | );
|
57 | @include chip-theme.trailing-action-ripple-size(
|
58 | chip-theme.$trailing-action-size,
|
59 | $query: $query
|
60 | );
|
61 |
|
62 | .mdc-evolution-chip__action {
|
63 | @include ripple.surface(
|
64 | $query: $query,
|
65 | $ripple-target: chip-theme.$ripple-target,
|
66 | $include-will-change: false
|
67 | );
|
68 |
|
69 | @include ripple.radius-bounded(
|
70 | $query: $query,
|
71 | $ripple-target: chip-theme.$ripple-target
|
72 | );
|
73 | }
|
74 |
|
75 | #{chip-theme.$ripple-target} {
|
76 | @include feature-targeting.targets($feat-structure) {
|
77 | position: absolute;
|
78 |
|
79 |
|
80 | box-sizing: content-box;
|
81 | overflow: hidden;
|
82 | pointer-events: none;
|
83 | }
|
84 | }
|
85 |
|
86 | #{chip-theme.$ripple-target-primary} {
|
87 | @include feature-targeting.targets($feat-structure) {
|
88 | height: 100%;
|
89 | width: 100%;
|
90 | top: 0;
|
91 | @include rtl.ignore-next-line();
|
92 | left: 0;
|
93 | }
|
94 | }
|
95 |
|
96 | #{chip-theme.$ripple-target-trailing} {
|
97 | @include feature-targeting.targets($feat-structure) {
|
98 | top: 50%;
|
99 | transform: translateY(-50%);
|
100 | }
|
101 | }
|
102 | }
|
103 |
|
104 | @mixin static-styles($query: feature-targeting.all()) {
|
105 | $feat-animation: feature-targeting.create-target($query, animation);
|
106 | $feat-color: feature-targeting.create-target($query, color);
|
107 | $feat-structure: feature-targeting.create-target($query, structure);
|
108 |
|
109 | .mdc-evolution-chip,
|
110 | .mdc-evolution-chip__cell,
|
111 | .mdc-evolution-chip__action {
|
112 | @include feature-targeting.targets($feat-structure) {
|
113 | display: inline-flex;
|
114 | align-items: center;
|
115 | }
|
116 | }
|
117 |
|
118 | .mdc-evolution-chip {
|
119 | @include feature-targeting.targets($feat-structure) {
|
120 | position: relative;
|
121 | max-width: 100%;
|
122 | }
|
123 | @include elevation-theme.overlay-dimensions(100%, $query: $query);
|
124 | }
|
125 |
|
126 | .mdc-evolution-chip__cell,
|
127 | .mdc-evolution-chip__action {
|
128 | @include feature-targeting.targets($feat-structure) {
|
129 | height: 100%;
|
130 | }
|
131 | }
|
132 |
|
133 | .mdc-evolution-chip__cell--primary {
|
134 | @include feature-targeting.targets($feat-structure) {
|
135 | overflow-x: hidden;
|
136 | }
|
137 | }
|
138 |
|
139 | .mdc-evolution-chip__cell--trailing {
|
140 | @include feature-targeting.targets($feat-structure) {
|
141 | flex: 1 0 auto;
|
142 | }
|
143 | }
|
144 |
|
145 | .mdc-evolution-chip__action {
|
146 | @include feature-targeting.targets($feat-structure) {
|
147 | align-items: center;
|
148 | background: none;
|
149 | border: none;
|
150 | box-sizing: content-box;
|
151 | cursor: pointer;
|
152 | display: inline-flex;
|
153 | justify-content: center;
|
154 | outline: none;
|
155 | padding: 0;
|
156 | text-decoration: none;
|
157 | }
|
158 |
|
159 | @include feature-targeting.targets($feat-color) {
|
160 | color: inherit;
|
161 | }
|
162 | }
|
163 |
|
164 | .mdc-evolution-chip__action--presentational {
|
165 | @include feature-targeting.targets($feat-structure) {
|
166 | cursor: auto;
|
167 | }
|
168 | }
|
169 |
|
170 | .mdc-evolution-chip--disabled,
|
171 | .mdc-evolution-chip__action:disabled {
|
172 | @include feature-targeting.targets($feat-structure) {
|
173 | pointer-events: none;
|
174 | }
|
175 | }
|
176 |
|
177 | .mdc-evolution-chip__action--primary {
|
178 | @include feature-targeting.targets($feat-structure) {
|
179 | overflow-x: hidden;
|
180 | }
|
181 | }
|
182 |
|
183 | .mdc-evolution-chip__action--trailing {
|
184 | @include feature-targeting.targets($feat-structure) {
|
185 | position: relative;
|
186 | overflow: visible;
|
187 | }
|
188 | }
|
189 |
|
190 | .mdc-evolution-chip__action--primary:before {
|
191 | @include feature-targeting.targets($feat-structure) {
|
192 | box-sizing: border-box;
|
193 | content: '';
|
194 | height: 100%;
|
195 | left: 0;
|
196 | position: absolute;
|
197 | pointer-events: none;
|
198 | top: 0;
|
199 | width: 100%;
|
200 | z-index: 1;
|
201 | }
|
202 | }
|
203 |
|
204 | .mdc-evolution-chip--touch {
|
205 | @include touch-target.margin(
|
206 | $component-height: chip-theme.$height,
|
207 | $query: $query
|
208 | );
|
209 | }
|
210 |
|
211 | .mdc-evolution-chip__action-touch {
|
212 | @include touch-target.touch-target($query: $query);
|
213 | }
|
214 |
|
215 | .mdc-evolution-chip__text-label {
|
216 | @include feature-targeting.targets($feat-structure) {
|
217 | white-space: nowrap;
|
218 | user-select: none;
|
219 | text-overflow: ellipsis;
|
220 | overflow: hidden;
|
221 | }
|
222 | }
|
223 |
|
224 | .mdc-evolution-chip__graphic {
|
225 | @include feature-targeting.targets($feat-structure) {
|
226 | align-items: center;
|
227 | display: inline-flex;
|
228 | justify-content: center;
|
229 | overflow: hidden;
|
230 | pointer-events: none;
|
231 | position: relative;
|
232 | flex: 1 0 auto;
|
233 | }
|
234 | }
|
235 |
|
236 | .mdc-evolution-chip__checkmark {
|
237 | @include feature-targeting.targets($feat-structure) {
|
238 | position: absolute;
|
239 | opacity: 0;
|
240 | top: 50%;
|
241 | @include rtl.ignore-next-line();
|
242 | left: 50%;
|
243 | }
|
244 | }
|
245 |
|
246 | .mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected) {
|
247 | &:not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic {
|
248 | @include feature-targeting.targets($feat-structure) {
|
249 | width: 0;
|
250 | }
|
251 | }
|
252 | }
|
253 |
|
254 | .mdc-evolution-chip__checkmark-background {
|
255 | @include feature-targeting.targets($feat-structure) {
|
256 | opacity: 0;
|
257 | }
|
258 | }
|
259 |
|
260 | .mdc-evolution-chip__checkmark-svg {
|
261 | @include feature-targeting.targets($feat-structure) {
|
262 | display: block;
|
263 | }
|
264 | }
|
265 |
|
266 | .mdc-evolution-chip__checkmark-path {
|
267 | @include feature-targeting.targets($feat-structure) {
|
268 | stroke-width: 2px;
|
269 | stroke-dasharray: 29.7833385;
|
270 | stroke-dashoffset: 29.7833385;
|
271 | }
|
272 |
|
273 | @include feature-targeting.targets($feat-color) {
|
274 | stroke: currentColor;
|
275 | }
|
276 | }
|
277 |
|
278 | .mdc-evolution-chip--selecting {
|
279 | .mdc-evolution-chip__graphic {
|
280 | @include feature-targeting.targets($feat-animation) {
|
281 | transition: animation.standard(width, 150ms);
|
282 | }
|
283 | }
|
284 |
|
285 | .mdc-evolution-chip__checkmark {
|
286 | @include feature-targeting.targets($feat-animation) {
|
287 | transition: animation.standard(transform, 150ms);
|
288 | transform: translate(-75%, -50%);
|
289 | }
|
290 | }
|
291 |
|
292 | .mdc-evolution-chip__checkmark-path {
|
293 | @include feature-targeting.targets($feat-animation) {
|
294 | transition: animation.standard(stroke-dashoffset, 150ms, $delay: 45ms);
|
295 | }
|
296 | }
|
297 | }
|
298 |
|
299 | .mdc-evolution-chip--deselecting {
|
300 | .mdc-evolution-chip__graphic {
|
301 | @include feature-targeting.targets($feat-animation) {
|
302 | transition: animation.standard(width, 100ms);
|
303 | }
|
304 | }
|
305 |
|
306 | .mdc-evolution-chip__checkmark {
|
307 | @include feature-targeting.targets($feat-animation) {
|
308 | transition: animation.linear(opacity, 50ms),
|
309 | animation.standard(transform, 100ms);
|
310 | transform: translate(-75%, -50%);
|
311 | }
|
312 | }
|
313 |
|
314 | .mdc-evolution-chip__checkmark-path {
|
315 | @include feature-targeting.targets($feat-animation) {
|
316 |
|
317 | stroke-dashoffset: 0;
|
318 | }
|
319 | }
|
320 | }
|
321 |
|
322 | .mdc-evolution-chip--selecting-with-primary-icon {
|
323 | .mdc-evolution-chip__icon--primary {
|
324 | @include feature-targeting.targets($feat-animation) {
|
325 | transition: animation.standard(opacity, 75ms);
|
326 | }
|
327 | }
|
328 |
|
329 | .mdc-evolution-chip__checkmark-path {
|
330 | @include feature-targeting.targets($feat-animation) {
|
331 | transition: animation.standard(stroke-dashoffset, 150ms, $delay: 75ms);
|
332 | }
|
333 | }
|
334 | }
|
335 |
|
336 | .mdc-evolution-chip--deselecting-with-primary-icon {
|
337 | .mdc-evolution-chip__icon--primary {
|
338 | @include feature-targeting.targets($feat-animation) {
|
339 | transition: animation.standard(opacity, 150ms, $delay: 75ms);
|
340 | }
|
341 | }
|
342 |
|
343 | .mdc-evolution-chip__checkmark {
|
344 | @include feature-targeting.targets($feat-animation) {
|
345 | transition: animation.standard(opacity, 75ms);
|
346 |
|
347 | transform: translate(-50%, -50%);
|
348 | }
|
349 | }
|
350 |
|
351 | .mdc-evolution-chip__checkmark-path {
|
352 | @include feature-targeting.targets($feat-animation) {
|
353 |
|
354 | stroke-dashoffset: 0;
|
355 | }
|
356 | }
|
357 | }
|
358 |
|
359 | .mdc-evolution-chip--selected {
|
360 | .mdc-evolution-chip__icon--primary {
|
361 | @include feature-targeting.targets($feat-structure) {
|
362 | opacity: 0;
|
363 | }
|
364 | }
|
365 |
|
366 | .mdc-evolution-chip__checkmark {
|
367 | @include feature-targeting.targets($feat-structure) {
|
368 | transform: translate(-50%, -50%);
|
369 | opacity: 1;
|
370 | }
|
371 | }
|
372 |
|
373 | .mdc-evolution-chip__checkmark-path {
|
374 | @include feature-targeting.targets($feat-structure) {
|
375 | stroke-dashoffset: 0;
|
376 | }
|
377 | }
|
378 | }
|
379 |
|
380 | @include feature-targeting.targets($feat-animation) {
|
381 | @keyframes mdc-evolution-chip-enter {
|
382 | from {
|
383 | transform: scale(0.8);
|
384 | opacity: 0.4;
|
385 | }
|
386 |
|
387 | to {
|
388 | transform: scale(1);
|
389 | opacity: 1;
|
390 | }
|
391 | }
|
392 | }
|
393 |
|
394 | .mdc-evolution-chip--enter {
|
395 | @include feature-targeting.targets($feat-animation) {
|
396 | animation: animation.enter(mdc-evolution-chip-enter, 100ms);
|
397 | }
|
398 | }
|
399 |
|
400 | @include feature-targeting.targets($feat-animation) {
|
401 | @keyframes mdc-evolution-chip-exit {
|
402 | from {
|
403 | opacity: 1;
|
404 | }
|
405 |
|
406 | to {
|
407 | opacity: 0;
|
408 | }
|
409 | }
|
410 | }
|
411 |
|
412 | .mdc-evolution-chip--exit {
|
413 | @include feature-targeting.targets($feat-animation) {
|
414 | animation: animation.exit-permanent(mdc-evolution-chip-exit, 75ms);
|
415 | }
|
416 | }
|
417 |
|
418 | .mdc-evolution-chip--hidden {
|
419 | @include feature-targeting.targets($feat-animation) {
|
420 | opacity: 0;
|
421 | pointer-events: none;
|
422 | transition: animation.exit-permanent(width, 150ms);
|
423 | }
|
424 | }
|
425 | }
|
426 |
|
427 | @mixin _high-contrast-mode($query: feature-targeting.all()) {
|
428 | $feat-structure: feature-targeting.create-target($query, structure);
|
429 |
|
430 | @include dom.forced-colors-mode {
|
431 | @include chip-theme.outline-color(
|
432 | (
|
433 | default: CanvasText,
|
434 | disabled: GrayText,
|
435 | ),
|
436 | $query: $query
|
437 | );
|
438 |
|
439 | @include chip-theme.selected-outline-color(
|
440 | (
|
441 | default: CanvasText,
|
442 | disabled: GrayText,
|
443 | ),
|
444 | $query: $query
|
445 | );
|
446 |
|
447 | @include chip-theme.text-label-color(
|
448 | (
|
449 | disabled: GrayText,
|
450 | ),
|
451 | $query: $query
|
452 | );
|
453 |
|
454 | @include chip-theme.icon-color(
|
455 | (
|
456 | disabled: GrayText,
|
457 | ),
|
458 | $query: $query
|
459 | );
|
460 |
|
461 | @include chip-theme.checkmark-color(
|
462 | (
|
463 | disabled: GrayText,
|
464 | ),
|
465 | $query: $query
|
466 | );
|
467 |
|
468 | @include chip-theme.trailing-action-color(
|
469 | (
|
470 | disabled: GrayText,
|
471 | ),
|
472 | $query: $query
|
473 | );
|
474 | }
|
475 |
|
476 |
|
477 |
|
478 |
|
479 |
|
480 | .mdc-evolution-chip__focus-ring {
|
481 | display: none;
|
482 | }
|
483 |
|
484 | .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {
|
485 | @include ripple-theme.focus() {
|
486 | .mdc-evolution-chip__focus-ring {
|
487 | z-index: 1;
|
488 | display: block;
|
489 | @include focus-ring.focus-ring($query: $query);
|
490 | }
|
491 | }
|
492 | }
|
493 |
|
494 | .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational) {
|
495 | @include ripple-theme.focus() {
|
496 | .mdc-evolution-chip__focus-ring {
|
497 | z-index: 1;
|
498 | display: block;
|
499 | @include focus-ring.focus-ring(
|
500 | $container-outer-padding-vertical: 2px,
|
501 | $container-outer-padding-horizontal: -2px,
|
502 | $query: $query
|
503 | );
|
504 | }
|
505 | }
|
506 | }
|
507 | }
|
508 |
|
509 | @mixin _theme-styles($query: feature-targeting.all()) {
|
510 | .mdc-evolution-chip {
|
511 | @include chip-theme.height(chip-theme.$height, $query);
|
512 | @include chip-theme.shape-radius(chip-theme.$radius, $query);
|
513 | @include chip-theme.horizontal-padding(
|
514 | chip-theme.$leading-padding,
|
515 | chip-theme.$trailing-padding,
|
516 | $query
|
517 | );
|
518 | @include chip-theme.with-graphic-horizontal-padding(
|
519 | chip-theme.$graphic-leading-padding,
|
520 | chip-theme.$graphic-trailing-padding,
|
521 | chip-theme.$trailing-padding
|
522 | );
|
523 | @include chip-theme.with-trailing-action-horizontal-padding(
|
524 | chip-theme.$leading-padding,
|
525 | chip-theme.$trailing-action-leading-padding,
|
526 | chip-theme.$trailing-action-trailing-padding,
|
527 | $query
|
528 | );
|
529 | @include chip-theme.with-graphic-and-trailing-action-horizontal-padding(
|
530 | chip-theme.$graphic-leading-padding,
|
531 | chip-theme.$graphic-trailing-padding,
|
532 | chip-theme.$trailing-action-leading-padding,
|
533 | chip-theme.$trailing-action-trailing-padding,
|
534 | $query
|
535 | );
|
536 | @include chip-theme.container-color(chip-theme.$container-color, $query);
|
537 | @include chip-theme.text-label-color(chip-theme.$text-label-color, $query);
|
538 | @include chip-theme.icon-color(chip-theme.$icon-color, $query);
|
539 | @include chip-theme.checkmark-color(chip-theme.$checkmark-color, $query);
|
540 | @include chip-theme.trailing-action-color(
|
541 | chip-theme.$trailing-action-color,
|
542 | $query
|
543 | );
|
544 | @include chip-theme.text-label-type-scale(chip-theme.$type-scale, $query);
|
545 | @include chip-theme.graphic-size(chip-theme.$leading-icon-size, $query);
|
546 | @include chip-theme.icon-size(chip-theme.$leading-icon-size, $query);
|
547 | @include chip-theme.checkmark-size(chip-theme.$checkmark-size, $query);
|
548 | @include chip-theme.trailing-action-size(
|
549 | chip-theme.$trailing-action-size,
|
550 | $query
|
551 | );
|
552 |
|
553 | @include _high-contrast-mode($query);
|
554 | }
|
555 |
|
556 | .mdc-evolution-chip--filter {
|
557 | @include chip-theme.selected-container-color(
|
558 | chip-theme.$filter-selected-container-color,
|
559 | $query
|
560 | );
|
561 | }
|
562 |
|
563 | .mdc-evolution-chip--with-avatar {
|
564 | @include chip-theme.with-graphic-horizontal-padding(
|
565 | chip-theme.$avatar-leading-padding,
|
566 | chip-theme.$avatar-trailing-padding,
|
567 | chip-theme.$trailing-padding
|
568 | );
|
569 | @include chip-theme.with-graphic-and-trailing-action-horizontal-padding(
|
570 | chip-theme.$avatar-leading-padding,
|
571 | chip-theme.$avatar-trailing-padding,
|
572 | chip-theme.$trailing-action-leading-padding,
|
573 | chip-theme.$trailing-action-trailing-padding
|
574 | );
|
575 | @include chip-theme.graphic-size(chip-theme.$avatar-size, $query);
|
576 | @include chip-theme.icon-size(chip-theme.$avatar-size, $query);
|
577 | }
|
578 | }
|