UNPKG

21.9 kBCSSView Raw
1/**
2 * @license
3 * Copyright Google LLC All Rights Reserved.
4 *
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
7 */
8.mdc-touch-target-wrapper {
9 display: inline;
10}
11
12.mdc-deprecated-chip-trailing-action__touch {
13 position: absolute;
14 top: 50%;
15 height: 48px;
16 /* @noflip */
17 /*rtl:ignore*/
18 left: 50%;
19 width: 48px;
20 -webkit-transform: translate(-50%, -50%);
21 transform: translate(-50%, -50%);
22}
23
24.mdc-deprecated-chip-trailing-action {
25 border: none;
26 display: inline-flex;
27 position: relative;
28 align-items: center;
29 justify-content: center;
30 box-sizing: border-box;
31 padding: 0;
32 outline: none;
33 cursor: pointer;
34 -webkit-appearance: none;
35 background: none;
36}
37.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon {
38 height: 18px;
39 width: 18px;
40 font-size: 18px;
41}
42.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action {
43 color: #000;
44 /* @alternate */
45 color: var(--mdc-theme-on-surface, #000);
46}
47.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__touch {
48 width: 26px;
49}
50.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon {
51 fill: currentColor;
52 color: inherit;
53}
54
55@-webkit-keyframes mdc-ripple-fg-radius-in {
56 from {
57 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
58 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
59 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
60 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
61 }
62 to {
63 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
64 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
65 }
66}
67
68@keyframes mdc-ripple-fg-radius-in {
69 from {
70 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
71 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
72 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
73 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
74 }
75 to {
76 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
77 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
78 }
79}
80@-webkit-keyframes mdc-ripple-fg-opacity-in {
81 from {
82 -webkit-animation-timing-function: linear;
83 animation-timing-function: linear;
84 opacity: 0;
85 }
86 to {
87 opacity: var(--mdc-ripple-fg-opacity, 0);
88 }
89}
90@keyframes mdc-ripple-fg-opacity-in {
91 from {
92 -webkit-animation-timing-function: linear;
93 animation-timing-function: linear;
94 opacity: 0;
95 }
96 to {
97 opacity: var(--mdc-ripple-fg-opacity, 0);
98 }
99}
100@-webkit-keyframes mdc-ripple-fg-opacity-out {
101 from {
102 -webkit-animation-timing-function: linear;
103 animation-timing-function: linear;
104 opacity: var(--mdc-ripple-fg-opacity, 0);
105 }
106 to {
107 opacity: 0;
108 }
109}
110@keyframes mdc-ripple-fg-opacity-out {
111 from {
112 -webkit-animation-timing-function: linear;
113 animation-timing-function: linear;
114 opacity: var(--mdc-ripple-fg-opacity, 0);
115 }
116 to {
117 opacity: 0;
118 }
119}
120.mdc-deprecated-chip-trailing-action {
121 --mdc-ripple-fg-size: 0;
122 --mdc-ripple-left: 0;
123 --mdc-ripple-top: 0;
124 --mdc-ripple-fg-scale: 1;
125 --mdc-ripple-fg-translate-end: 0;
126 --mdc-ripple-fg-translate-start: 0;
127 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
128 will-change: transform, opacity;
129}
130.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,
131.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after {
132 position: absolute;
133 border-radius: 50%;
134 opacity: 0;
135 pointer-events: none;
136 content: "";
137}
138.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before {
139 transition: opacity 15ms linear, background-color 15ms linear;
140 z-index: 1;
141 /* @alternate */
142 z-index: var(--mdc-ripple-z-index, 1);
143}
144.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after {
145 z-index: 0;
146 /* @alternate */
147 z-index: var(--mdc-ripple-z-index, 0);
148}
149.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before {
150 -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
151 transform: scale(var(--mdc-ripple-fg-scale, 1));
152}
153.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
154 top: 0;
155 /* @noflip */
156 /*rtl:ignore*/
157 left: 0;
158 -webkit-transform: scale(0);
159 transform: scale(0);
160 -webkit-transform-origin: center center;
161 transform-origin: center center;
162}
163.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple::after {
164 top: var(--mdc-ripple-top, 0);
165 /* @noflip */
166 /*rtl:ignore*/
167 left: var(--mdc-ripple-left, 0);
168}
169.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple::after {
170 -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
171 animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
172}
173.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-chip-trailing-action__ripple::after {
174 -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
175 animation: mdc-ripple-fg-opacity-out 150ms;
176 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
177 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
178}
179.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,
180.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after {
181 top: calc(50% - 50%);
182 /* @noflip */
183 /*rtl:ignore*/
184 left: calc(50% - 50%);
185 width: 100%;
186 height: 100%;
187}
188.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before,
189.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
190 top: var(--mdc-ripple-top, calc(50% - 50%));
191 /* @noflip */
192 /*rtl:ignore*/
193 left: var(--mdc-ripple-left, calc(50% - 50%));
194 width: var(--mdc-ripple-fg-size, 100%);
195 height: var(--mdc-ripple-fg-size, 100%);
196}
197.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
198 width: var(--mdc-ripple-fg-size, 100%);
199 height: var(--mdc-ripple-fg-size, 100%);
200}
201.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before, .mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after {
202 background-color: #000;
203 /* @alternate */
204 background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000));
205}
206.mdc-deprecated-chip-trailing-action:hover .mdc-deprecated-chip-trailing-action__ripple::before, .mdc-deprecated-chip-trailing-action.mdc-ripple-surface--hover .mdc-deprecated-chip-trailing-action__ripple::before {
207 opacity: 0.04;
208 /* @alternate */
209 opacity: var(--mdc-ripple-hover-opacity, 0.04);
210}
211.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--background-focused .mdc-deprecated-chip-trailing-action__ripple::before, .mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):focus .mdc-deprecated-chip-trailing-action__ripple::before {
212 transition-duration: 75ms;
213 opacity: 0.12;
214 /* @alternate */
215 opacity: var(--mdc-ripple-focus-opacity, 0.12);
216}
217.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded) .mdc-deprecated-chip-trailing-action__ripple::after {
218 transition: opacity 150ms linear;
219}
220.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):active .mdc-deprecated-chip-trailing-action__ripple::after {
221 transition-duration: 75ms;
222 opacity: 0.12;
223 /* @alternate */
224 opacity: var(--mdc-ripple-press-opacity, 0.12);
225}
226.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded {
227 --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
228}
229.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple {
230 position: absolute;
231 box-sizing: content-box;
232 width: 100%;
233 height: 100%;
234 overflow: hidden;
235}
236
237.mdc-chip__icon--leading {
238 color: rgba(0, 0, 0, 0.54);
239}
240
241.mdc-deprecated-chip-trailing-action {
242 color: #000;
243}
244
245.mdc-chip__icon--trailing {
246 color: rgba(0, 0, 0, 0.54);
247}
248.mdc-chip__icon--trailing:hover {
249 color: rgba(0, 0, 0, 0.62);
250}
251.mdc-chip__icon--trailing:focus {
252 color: rgba(0, 0, 0, 0.87);
253}
254
255.mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
256 width: 20px;
257 height: 20px;
258 font-size: 20px;
259}
260
261.mdc-deprecated-chip-trailing-action__icon {
262 height: 18px;
263 width: 18px;
264 font-size: 18px;
265}
266
267.mdc-chip__icon.mdc-chip__icon--trailing {
268 width: 18px;
269 height: 18px;
270 font-size: 18px;
271}
272
273.mdc-deprecated-chip-trailing-action {
274 /* @noflip */
275 /*rtl:ignore*/
276 margin-left: 4px;
277 /* @noflip */
278 /*rtl:ignore*/
279 margin-right: -4px;
280}
281[dir=rtl] .mdc-deprecated-chip-trailing-action, .mdc-deprecated-chip-trailing-action[dir=rtl] {
282 /*rtl:begin:ignore*/
283 /* @noflip */
284 /*rtl:ignore*/
285 margin-left: -4px;
286 /* @noflip */
287 /*rtl:ignore*/
288 margin-right: 4px;
289 /*rtl:end:ignore*/
290}
291
292.mdc-chip__icon--trailing {
293 /* @noflip */
294 /*rtl:ignore*/
295 margin-left: 4px;
296 /* @noflip */
297 /*rtl:ignore*/
298 margin-right: -4px;
299}
300[dir=rtl] .mdc-chip__icon--trailing, .mdc-chip__icon--trailing[dir=rtl] {
301 /*rtl:begin:ignore*/
302 /* @noflip */
303 /*rtl:ignore*/
304 margin-left: -4px;
305 /* @noflip */
306 /*rtl:ignore*/
307 margin-right: 4px;
308 /*rtl:end:ignore*/
309}
310
311.mdc-elevation-overlay {
312 position: absolute;
313 border-radius: inherit;
314 pointer-events: none;
315 opacity: 0;
316 /* @alternate */
317 opacity: var(--mdc-elevation-overlay-opacity, 0);
318 transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
319 background-color: #fff;
320 /* @alternate */
321 background-color: var(--mdc-elevation-overlay-color, #fff);
322}
323
324.mdc-chip {
325 border-radius: 16px;
326 background-color: #e0e0e0;
327 color: rgba(0, 0, 0, 0.87);
328 -moz-osx-font-smoothing: grayscale;
329 -webkit-font-smoothing: antialiased;
330 font-family: Roboto, sans-serif;
331 /* @alternate */
332 font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
333 font-size: 0.875rem;
334 /* @alternate */
335 font-size: var(--mdc-typography-body2-font-size, 0.875rem);
336 line-height: 1.25rem;
337 /* @alternate */
338 line-height: var(--mdc-typography-body2-line-height, 1.25rem);
339 font-weight: 400;
340 /* @alternate */
341 font-weight: var(--mdc-typography-body2-font-weight, 400);
342 letter-spacing: 0.0178571429em;
343 /* @alternate */
344 letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
345 text-decoration: inherit;
346 /* @alternate */
347 -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
348 text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
349 text-transform: inherit;
350 /* @alternate */
351 text-transform: var(--mdc-typography-body2-text-transform, inherit);
352 height: 32px;
353 /* @alternate */
354 position: relative;
355 display: inline-flex;
356 align-items: center;
357 box-sizing: border-box;
358 padding: 0 12px;
359 border-width: 0;
360 outline: none;
361 cursor: pointer;
362 -webkit-appearance: none;
363}
364.mdc-chip .mdc-chip__ripple {
365 border-radius: 16px;
366}
367.mdc-chip:hover {
368 color: rgba(0, 0, 0, 0.87);
369}
370.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
371.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
372 /* @noflip */
373 /*rtl:ignore*/
374 margin-left: -4px;
375 /* @noflip */
376 /*rtl:ignore*/
377 margin-right: 4px;
378}
379[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark, [dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden), .mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl], .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl] {
380 /*rtl:begin:ignore*/
381 /* @noflip */
382 /*rtl:ignore*/
383 margin-left: 4px;
384 /* @noflip */
385 /*rtl:ignore*/
386 margin-right: -4px;
387 /*rtl:end:ignore*/
388}
389
390.mdc-chip .mdc-elevation-overlay {
391 width: 100%;
392 height: 100%;
393 top: 0;
394 /* @noflip */
395 /*rtl:ignore*/
396 left: 0;
397}
398.mdc-chip::-moz-focus-inner {
399 padding: 0;
400 border: 0;
401}
402.mdc-chip:hover {
403 color: #000;
404 /* @alternate */
405 color: var(--mdc-theme-on-surface, #000);
406}
407.mdc-chip .mdc-chip__touch {
408 position: absolute;
409 top: 50%;
410 height: 48px;
411 left: 0;
412 right: 0;
413 -webkit-transform: translateY(-50%);
414 transform: translateY(-50%);
415}
416
417.mdc-chip--exit {
418 transition: opacity 75ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0, 0, 0.2, 1), padding 100ms linear, margin 100ms linear;
419 opacity: 0;
420}
421
422.mdc-chip__overflow {
423 text-overflow: ellipsis;
424 overflow: hidden;
425}
426
427.mdc-chip__text {
428 white-space: nowrap;
429}
430
431.mdc-chip__icon {
432 border-radius: 50%;
433 outline: none;
434 vertical-align: middle;
435}
436
437.mdc-chip__checkmark {
438 height: 20px;
439}
440
441.mdc-chip__checkmark-path {
442 transition: stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
443 stroke-width: 2px;
444 stroke-dashoffset: 29.7833385;
445 stroke-dasharray: 29.7833385;
446}
447
448.mdc-chip__primary-action:focus {
449 outline: none;
450}
451
452.mdc-chip--selected .mdc-chip__checkmark-path {
453 stroke-dashoffset: 0;
454}
455
456.mdc-chip__icon--leading,
457.mdc-chip__icon--trailing {
458 position: relative;
459}
460
461.mdc-chip-set--choice .mdc-chip.mdc-chip--selected {
462 color: #6200ee;
463 /* @alternate */
464 color: var(--mdc-theme-primary, #6200ee);
465}
466.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading {
467 color: rgba(98, 0, 238, 0.54);
468}
469.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover {
470 color: #6200ee;
471 /* @alternate */
472 color: var(--mdc-theme-primary, #6200ee);
473}
474.mdc-chip-set--choice .mdc-chip .mdc-chip__checkmark-path {
475 stroke: #6200ee;
476 /* @alternate */
477 stroke: var(--mdc-theme-primary, #6200ee);
478}
479.mdc-chip-set--choice .mdc-chip--selected {
480 background-color: #fff;
481 /* @alternate */
482 background-color: var(--mdc-theme-surface, #fff);
483}
484
485.mdc-chip__checkmark-svg {
486 width: 0;
487 height: 20px;
488 transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
489}
490
491.mdc-chip--selected .mdc-chip__checkmark-svg {
492 width: 20px;
493}
494
495.mdc-chip-set--filter .mdc-chip__icon--leading {
496 transition: opacity 75ms linear;
497 transition-delay: -50ms;
498 opacity: 1;
499}
500.mdc-chip-set--filter .mdc-chip__icon--leading + .mdc-chip__checkmark {
501 transition: opacity 75ms linear;
502 transition-delay: 80ms;
503 opacity: 0;
504}
505.mdc-chip-set--filter .mdc-chip__icon--leading + .mdc-chip__checkmark .mdc-chip__checkmark-svg {
506 transition: width 0ms;
507}
508.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading {
509 opacity: 0;
510}
511.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading + .mdc-chip__checkmark {
512 width: 0;
513 opacity: 1;
514}
515.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {
516 width: 0;
517 opacity: 0;
518}
519.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading + .mdc-chip__checkmark {
520 width: 20px;
521}
522
523.mdc-chip {
524 --mdc-ripple-fg-size: 0;
525 --mdc-ripple-left: 0;
526 --mdc-ripple-top: 0;
527 --mdc-ripple-fg-scale: 1;
528 --mdc-ripple-fg-translate-end: 0;
529 --mdc-ripple-fg-translate-start: 0;
530 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
531 will-change: transform, opacity;
532}
533.mdc-chip .mdc-chip__ripple::before,
534.mdc-chip .mdc-chip__ripple::after {
535 position: absolute;
536 border-radius: 50%;
537 opacity: 0;
538 pointer-events: none;
539 content: "";
540}
541.mdc-chip .mdc-chip__ripple::before {
542 transition: opacity 15ms linear, background-color 15ms linear;
543 z-index: 1;
544 /* @alternate */
545 z-index: var(--mdc-ripple-z-index, 1);
546}
547.mdc-chip .mdc-chip__ripple::after {
548 z-index: 0;
549 /* @alternate */
550 z-index: var(--mdc-ripple-z-index, 0);
551}
552.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::before {
553 -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
554 transform: scale(var(--mdc-ripple-fg-scale, 1));
555}
556.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after {
557 top: 0;
558 /* @noflip */
559 /*rtl:ignore*/
560 left: 0;
561 -webkit-transform: scale(0);
562 transform: scale(0);
563 -webkit-transform-origin: center center;
564 transform-origin: center center;
565}
566.mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple::after {
567 top: var(--mdc-ripple-top, 0);
568 /* @noflip */
569 /*rtl:ignore*/
570 left: var(--mdc-ripple-left, 0);
571}
572.mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple::after {
573 -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
574 animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
575}
576.mdc-chip.mdc-ripple-upgraded--foreground-deactivation .mdc-chip__ripple::after {
577 -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
578 animation: mdc-ripple-fg-opacity-out 150ms;
579 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
580 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
581}
582.mdc-chip .mdc-chip__ripple::before,
583.mdc-chip .mdc-chip__ripple::after {
584 top: calc(50% - 100%);
585 /* @noflip */
586 /*rtl:ignore*/
587 left: calc(50% - 100%);
588 width: 200%;
589 height: 200%;
590}
591.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after {
592 width: var(--mdc-ripple-fg-size, 100%);
593 height: var(--mdc-ripple-fg-size, 100%);
594}
595.mdc-chip .mdc-chip__ripple::before, .mdc-chip .mdc-chip__ripple::after {
596 background-color: rgba(0, 0, 0, 0.87);
597 /* @alternate */
598 background-color: var(--mdc-ripple-color, rgba(0, 0, 0, 0.87));
599}
600.mdc-chip:hover .mdc-chip__ripple::before, .mdc-chip.mdc-ripple-surface--hover .mdc-chip__ripple::before {
601 opacity: 0.04;
602 /* @alternate */
603 opacity: var(--mdc-ripple-hover-opacity, 0.04);
604}
605.mdc-chip.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before, .mdc-chip.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before, .mdc-chip:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before, .mdc-chip:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before {
606 transition-duration: 75ms;
607 opacity: 0.12;
608 /* @alternate */
609 opacity: var(--mdc-ripple-focus-opacity, 0.12);
610}
611.mdc-chip:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after {
612 transition: opacity 150ms linear;
613}
614.mdc-chip:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after {
615 transition-duration: 75ms;
616 opacity: 0.12;
617 /* @alternate */
618 opacity: var(--mdc-ripple-press-opacity, 0.12);
619}
620.mdc-chip.mdc-ripple-upgraded {
621 --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
622}
623.mdc-chip .mdc-chip__ripple {
624 position: absolute;
625 top: 0;
626 left: 0;
627 width: 100%;
628 height: 100%;
629 pointer-events: none;
630 overflow: hidden;
631}
632
633.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before {
634 opacity: 0.08;
635 /* @alternate */
636 opacity: var(--mdc-ripple-selected-opacity, 0.08);
637}
638.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before, .mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::after {
639 background-color: #6200ee;
640 /* @alternate */
641 background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));
642}
643.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover .mdc-chip__ripple::before, .mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-surface--hover .mdc-chip__ripple::before {
644 opacity: 0.12;
645 /* @alternate */
646 opacity: var(--mdc-ripple-hover-opacity, 0.12);
647}
648.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before, .mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before, .mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before, .mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before {
649 transition-duration: 75ms;
650 opacity: 0.2;
651 /* @alternate */
652 opacity: var(--mdc-ripple-focus-opacity, 0.2);
653}
654.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after {
655 transition: opacity 150ms linear;
656}
657.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after {
658 transition-duration: 75ms;
659 opacity: 0.2;
660 /* @alternate */
661 opacity: var(--mdc-ripple-press-opacity, 0.2);
662}
663.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded {
664 --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.2);
665}
666
667@-webkit-keyframes mdc-chip-entry {
668 from {
669 -webkit-transform: scale(0.8);
670 transform: scale(0.8);
671 opacity: 0.4;
672 }
673 to {
674 -webkit-transform: scale(1);
675 transform: scale(1);
676 opacity: 1;
677 }
678}
679
680@keyframes mdc-chip-entry {
681 from {
682 -webkit-transform: scale(0.8);
683 transform: scale(0.8);
684 opacity: 0.4;
685 }
686 to {
687 -webkit-transform: scale(1);
688 transform: scale(1);
689 opacity: 1;
690 }
691}
692.mdc-chip-set {
693 padding: 4px;
694 display: flex;
695 flex-wrap: wrap;
696 box-sizing: border-box;
697}
698.mdc-chip-set .mdc-chip {
699 margin: 4px;
700}
701.mdc-chip-set .mdc-chip--touch {
702 margin-top: 8px;
703 margin-bottom: 8px;
704}
705
706.mdc-chip-set--input .mdc-chip {
707 -webkit-animation: mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1);
708 animation: mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1);
709}
710
711/*# sourceMappingURL=mdc.chips.css.map*/
\No newline at end of file