UNPKG

16 kBSCSSView Raw
1//
2// Copyright 2020 Google Inc.
3//
4// Permission is hereby granted, free of charge, to any person obtaining a copy
5// of this software and associated documentation files (the "Software"), to deal
6// in the Software without restriction, including without limitation the rights
7// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8// copies of the Software, and to permit persons to whom the Software is
9// furnished to do so, subject to the following conditions:
10//
11// The above copyright notice and this permission notice shall be included in
12// all copies or substantial portions of the Software.
13//
14// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20// THE SOFTWARE.
21//
22
23// Selector '.mdc-*' should only be used in this project.
24// stylelint-disable selector-class-pattern --
25// Internal styling for Chip MDC component.
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 // Ripple needs content-box as the box sizing and box-sizing: border-box
79 // is often set as a default, so we override that here.
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; // Position above touch target
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 // Ensure the checkmark path stays visible
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 // Ensure the checkmark stays statically positioned
347 transform: translate(-50%, -50%);
348 }
349 }
350
351 .mdc-evolution-chip__checkmark-path {
352 @include feature-targeting.targets($feat-animation) {
353 // Ensure the checkmark path stays visible
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 /// Renders a transparent border on focus in Windows high-contrast mode.
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}