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 | @use 'sass:list';
|
26 | @use 'sass:map';
|
27 | @use '@material/density/functions' as density-functions;
|
28 | @use '@material/dom/mixins' as dom-mixins;
|
29 | @use '@material/rtl/rtl';
|
30 | @use '@material/theme/theme';
|
31 | @use '@material/shape/functions' as shape-functions;
|
32 | @use '@material/shape/mixins' as shape-mixins;
|
33 | @use '@material/ripple/ripple';
|
34 | @use '@material/ripple/ripple-theme';
|
35 | @use '@material/typography/typography';
|
36 | @use '@material/feature-targeting/feature-targeting';
|
37 | @use './variables';
|
38 | @use '@material/theme/theme-color';
|
39 | @use './evolution-mixins';
|
40 |
|
41 | @mixin deprecated-core-styles($query: feature-targeting.all()) {
|
42 | @include deprecated-without-ripple($query);
|
43 | @include deprecated-ripple($query);
|
44 | }
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | @mixin deprecated-without-ripple($query: feature-targeting.all()) {
|
50 | $feat-color: feature-targeting.create-target($query, color);
|
51 | $feat-structure: feature-targeting.create-target($query, structure);
|
52 | $feat-typography: feature-targeting.create-target($query, typography);
|
53 |
|
54 | $divider-color: if(
|
55 | theme-color.tone(theme-color.$background) == 'dark',
|
56 | variables.$deprecated-divider-color-on-dark-bg,
|
57 | variables.$deprecated-divider-color-on-light-bg
|
58 | );
|
59 |
|
60 | .mdc-deprecated-list {
|
61 | @include deprecated-base_($query);
|
62 | }
|
63 |
|
64 | @include deprecated-single-line-density(
|
65 | variables.$deprecated-single-line-density-scale,
|
66 | $query: $query
|
67 | );
|
68 | @include deprecated-item-secondary-text-ink-color(
|
69 | text-secondary-on-background,
|
70 | $query
|
71 | );
|
72 | @include deprecated-item-graphic-fill-color(transparent, $query);
|
73 | @include deprecated-item-graphic-ink-color(text-icon-on-background, $query);
|
74 | @include deprecated-item-meta-ink-color(text-hint-on-background, $query);
|
75 | @include deprecated-group-subheader-ink-color(
|
76 | text-primary-on-background,
|
77 | $query
|
78 | );
|
79 | @include deprecated-item-disabled-text-opacity(
|
80 | variables.$deprecated-text-disabled-opacity,
|
81 | $query
|
82 | );
|
83 | @include deprecated-item-disabled-text-color(
|
84 | variables.$deprecated-text-disabled-color,
|
85 | $query
|
86 | );
|
87 | @include deprecated-item-selected-text-color(
|
88 | variables.$deprecated-text-selected-color,
|
89 | $query
|
90 | );
|
91 |
|
92 | .mdc-deprecated-list--dense {
|
93 | @include feature-targeting.targets($feat-structure) {
|
94 | padding-top: 4px;
|
95 | padding-bottom: 4px;
|
96 | font-size: 0.812rem;
|
97 | }
|
98 | }
|
99 |
|
100 | .mdc-deprecated-list-item {
|
101 | @include feature-targeting.targets($feat-structure) {
|
102 | @include deprecated-item-base_;
|
103 | }
|
104 |
|
105 |
|
106 |
|
107 | &:not(.mdc-deprecated-list-item--selected):focus::before,
|
108 | &.mdc-ripple-upgraded--background-focused::before {
|
109 | @include dom-mixins.transparent-border($query: $query);
|
110 | }
|
111 |
|
112 | &.mdc-deprecated-list-item--selected::before {
|
113 | @include dom-mixins.transparent-border(
|
114 | $border-width: 3px,
|
115 | $border-style: double,
|
116 | $query: $query
|
117 | );
|
118 | }
|
119 |
|
120 | @include deprecated-list-item-padding-variant(
|
121 | variables.$deprecated-textual-variant-config,
|
122 | $query
|
123 | );
|
124 | @include deprecated-list-item-height-variant(
|
125 | variables.$deprecated-textual-variant-config,
|
126 | $query
|
127 | );
|
128 |
|
129 | .mdc-deprecated-list--icon-list & {
|
130 | @include deprecated-list-item-padding-variant(
|
131 | variables.$deprecated-icon-variant-config,
|
132 | $query
|
133 | );
|
134 | @include deprecated-list-item-height-variant(
|
135 | variables.$deprecated-icon-variant-config,
|
136 | $query
|
137 | );
|
138 | }
|
139 |
|
140 | .mdc-deprecated-list--avatar-list & {
|
141 | @include deprecated-list-item-padding-variant(
|
142 | variables.$deprecated-avatar-variant-config,
|
143 | $query
|
144 | );
|
145 | @include deprecated-list-item-height-variant(
|
146 | variables.$deprecated-avatar-variant-config,
|
147 | $query
|
148 | );
|
149 | }
|
150 |
|
151 | .mdc-deprecated-list--thumbnail-list & {
|
152 | @include deprecated-list-item-padding-variant(
|
153 | variables.$deprecated-thumbnail-variant-config,
|
154 | $query
|
155 | );
|
156 | @include deprecated-list-item-height-variant(
|
157 | variables.$deprecated-thumbnail-variant-config,
|
158 | $query
|
159 | );
|
160 | }
|
161 |
|
162 | .mdc-deprecated-list--image-list & {
|
163 | @include deprecated-list-item-padding-variant(
|
164 | variables.$deprecated-image-variant-config,
|
165 | $query
|
166 | );
|
167 | @include deprecated-list-item-height-variant(
|
168 | variables.$deprecated-image-variant-config,
|
169 | $query
|
170 | );
|
171 | }
|
172 |
|
173 | .mdc-deprecated-list--video-list & {
|
174 | @include deprecated-list-item-padding-variant(
|
175 | variables.$deprecated-video-variant-config,
|
176 | $query
|
177 | );
|
178 | @include deprecated-list-item-height-variant(
|
179 | variables.$deprecated-video-variant-config,
|
180 | $query
|
181 | );
|
182 | }
|
183 | }
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | .mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic {
|
189 | @include deprecated-graphic-size-dense_(20px, $query);
|
190 | }
|
191 |
|
192 | .mdc-deprecated-list-item__graphic {
|
193 | @include feature-targeting.targets($feat-structure) {
|
194 | flex-shrink: 0;
|
195 | align-items: center;
|
196 | justify-content: center;
|
197 | fill: currentColor;
|
198 | object-fit: cover;
|
199 | }
|
200 |
|
201 |
|
202 | @include deprecated-graphic-size-variant(
|
203 | variables.$deprecated-deprecated-graphic-config,
|
204 | $query
|
205 | );
|
206 |
|
207 | .mdc-deprecated-list--icon-list & {
|
208 | @include deprecated-graphic-size-variant(
|
209 | variables.$deprecated-icon-variant-config,
|
210 | $query
|
211 | );
|
212 | }
|
213 |
|
214 | .mdc-deprecated-list--avatar-list & {
|
215 | @include deprecated-graphic-size-variant(
|
216 | variables.$deprecated-avatar-variant-config,
|
217 | $query
|
218 | );
|
219 | @include feature-targeting.targets($feat-structure) {
|
220 | border-radius: 50%;
|
221 | }
|
222 | }
|
223 |
|
224 | .mdc-deprecated-list--thumbnail-list & {
|
225 | @include deprecated-graphic-size-variant(
|
226 | variables.$deprecated-thumbnail-variant-config,
|
227 | $query
|
228 | );
|
229 | }
|
230 |
|
231 | .mdc-deprecated-list--image-list & {
|
232 | @include deprecated-graphic-size-variant(
|
233 | variables.$deprecated-image-variant-config,
|
234 | $query
|
235 | );
|
236 | }
|
237 |
|
238 | .mdc-deprecated-list--video-list & {
|
239 | @include deprecated-graphic-size-variant(
|
240 | variables.$deprecated-video-variant-config,
|
241 | $query
|
242 | );
|
243 | }
|
244 | }
|
245 |
|
246 |
|
247 |
|
248 |
|
249 | .mdc-deprecated-list .mdc-deprecated-list-item__graphic {
|
250 | @include feature-targeting.targets($feat-structure) {
|
251 | display: inline-flex;
|
252 | }
|
253 | }
|
254 |
|
255 |
|
256 | .mdc-deprecated-list-item__meta {
|
257 | &:not(.material-icons) {
|
258 | @include typography.typography(caption, $query);
|
259 | }
|
260 |
|
261 | @include feature-targeting.targets($feat-structure) {
|
262 | @include rtl.ignore-next-line();
|
263 | margin-left: auto;
|
264 | @include rtl.ignore-next-line();
|
265 | margin-right: 0;
|
266 |
|
267 | @at-root {
|
268 | .mdc-deprecated-list-item[dir='rtl'] &,
|
269 | [dir='rtl'] .mdc-deprecated-list-item & {
|
270 | @include rtl.ignore-next-line();
|
271 | margin-left: 0;
|
272 | @include rtl.ignore-next-line();
|
273 | margin-right: auto;
|
274 | }
|
275 | }
|
276 | }
|
277 | }
|
278 |
|
279 | .mdc-deprecated-list-item__text {
|
280 | @include typography.overflow-ellipsis($query);
|
281 | }
|
282 |
|
283 |
|
284 |
|
285 | .mdc-deprecated-list-item__text[for] {
|
286 | @include feature-targeting.targets($feat-structure) {
|
287 | pointer-events: none;
|
288 | }
|
289 | }
|
290 |
|
291 | .mdc-deprecated-list-item__primary-text {
|
292 | @include typography.overflow-ellipsis($query);
|
293 | @include typography.text-baseline(
|
294 | $top: variables.$deprecated-item-primary-text-baseline-height,
|
295 | $bottom: variables.$deprecated-item-secondary-text-baseline-height,
|
296 | $display: block,
|
297 | $query: $query
|
298 | );
|
299 |
|
300 | .mdc-deprecated-list--video-list &,
|
301 | .mdc-deprecated-list--image-list &,
|
302 | .mdc-deprecated-list--thumbnail-list &,
|
303 | .mdc-deprecated-list--avatar-list &,
|
304 | .mdc-deprecated-list--icon-list & {
|
305 | @include typography.text-baseline(
|
306 | $top:
|
307 | variables.$deprecated-item-primary-text-baseline-height-with-graphic,
|
308 | $bottom: variables.$deprecated-item-secondary-text-baseline-height,
|
309 | $query: $query
|
310 | );
|
311 | }
|
312 |
|
313 |
|
314 | .mdc-deprecated-list--dense & {
|
315 | @include typography.text-baseline(
|
316 | $top: variables.$deprecated-dense-item-primary-text-baseline-height,
|
317 | $bottom: variables.$deprecated-item-secondary-text-baseline-height,
|
318 | $query: $query
|
319 | );
|
320 | }
|
321 |
|
322 | }
|
323 |
|
324 | .mdc-deprecated-list-item__secondary-text {
|
325 | @include typography.typography(body2, $query);
|
326 | @include typography.overflow-ellipsis($query);
|
327 | @include typography.text-baseline(
|
328 | $top: variables.$deprecated-item-secondary-text-baseline-height,
|
329 | $display: block,
|
330 | $query: $query
|
331 | );
|
332 |
|
333 |
|
334 | .mdc-deprecated-list--dense & {
|
335 | @include feature-targeting.targets($feat-structure) {
|
336 | font-size: inherit;
|
337 | }
|
338 | }
|
339 |
|
340 | }
|
341 |
|
342 |
|
343 | .mdc-deprecated-list--dense .mdc-deprecated-list-item {
|
344 | @include feature-targeting.targets($feat-structure) {
|
345 | height: 40px;
|
346 | }
|
347 | }
|
348 |
|
349 | .mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {
|
350 | @include feature-targeting.targets($feat-structure) {
|
351 | align-self: flex-start;
|
352 | }
|
353 | }
|
354 |
|
355 | .mdc-deprecated-list--two-line {
|
356 | .mdc-deprecated-list-item {
|
357 | @include feature-targeting.targets($feat-structure) {
|
358 | height: variables.$deprecated-two-line-height;
|
359 | }
|
360 | }
|
361 |
|
362 | &.mdc-deprecated-list--video-list .mdc-deprecated-list-item,
|
363 | &.mdc-deprecated-list--image-list .mdc-deprecated-list-item,
|
364 | &.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item,
|
365 | &.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item,
|
366 | &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item {
|
367 | @include feature-targeting.targets($feat-structure) {
|
368 | height: variables.$deprecated-two-line-graphic-height;
|
369 | }
|
370 | }
|
371 |
|
372 |
|
373 | &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic {
|
374 | @include feature-targeting.targets($feat-structure) {
|
375 | align-self: flex-start;
|
376 | margin-top: variables.$deprecated-two-line-icon-top-margin;
|
377 | }
|
378 | }
|
379 | }
|
380 |
|
381 | .mdc-deprecated-list--two-line.mdc-deprecated-list--dense
|
382 | .mdc-deprecated-list-item,
|
383 | .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense
|
384 | .mdc-deprecated-list-item {
|
385 | @include feature-targeting.targets($feat-structure) {
|
386 | height: 60px;
|
387 | }
|
388 | }
|
389 |
|
390 | .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense
|
391 | .mdc-deprecated-list-item__graphic {
|
392 | @include deprecated-graphic-size-dense_(36px, $query);
|
393 | }
|
394 |
|
395 |
|
396 | :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {
|
397 | @include feature-targeting.targets($feat-structure) {
|
398 | cursor: pointer;
|
399 | }
|
400 | }
|
401 |
|
402 |
|
403 |
|
404 | a.mdc-deprecated-list-item {
|
405 | @include feature-targeting.targets($feat-structure) {
|
406 | color: inherit;
|
407 | text-decoration: none;
|
408 | }
|
409 | }
|
410 |
|
411 |
|
412 | .mdc-deprecated-list-divider {
|
413 | @include feature-targeting.targets($feat-structure) {
|
414 | height: 0;
|
415 | margin: 0;
|
416 | border: none;
|
417 | border-bottom-width: 1px;
|
418 | border-bottom-style: solid;
|
419 | }
|
420 | }
|
421 |
|
422 |
|
423 |
|
424 |
|
425 | @include deprecated-divider-color($divider-color, $query);
|
426 |
|
427 |
|
428 |
|
429 | .mdc-deprecated-list-divider--padded {
|
430 | @include deprecated-divider-inset-variant(
|
431 | variables.$deprecated-textual-variant-config,
|
432 | $use-padding: true,
|
433 | $query: $query
|
434 | );
|
435 | }
|
436 |
|
437 |
|
438 |
|
439 |
|
440 | .mdc-deprecated-list-divider--inset {
|
441 | @include deprecated-divider-inset-variant(
|
442 | variables.$deprecated-avatar-variant-config,
|
443 | $trailing: false,
|
444 | $query: $query
|
445 | );
|
446 | }
|
447 |
|
448 |
|
449 |
|
450 | .mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded {
|
451 | @include deprecated-divider-inset-variant(
|
452 | variables.$deprecated-avatar-variant-config,
|
453 | $query: $query
|
454 | );
|
455 | }
|
456 |
|
457 | .mdc-deprecated-list {
|
458 | @include deprecated-divider-insets-variant(
|
459 | variables.$deprecated-textual-variant-config,
|
460 | $query: $query
|
461 | );
|
462 | }
|
463 |
|
464 | .mdc-deprecated-list--icon-list {
|
465 | @include deprecated-divider-insets-variant(
|
466 | variables.$deprecated-icon-variant-config,
|
467 | $query: $query
|
468 | );
|
469 | }
|
470 |
|
471 | .mdc-deprecated-list--avatar-list {
|
472 | @include deprecated-divider-insets-variant(
|
473 | variables.$deprecated-avatar-variant-config,
|
474 | $query: $query
|
475 | );
|
476 | }
|
477 |
|
478 | .mdc-deprecated-list--thumbnail-list {
|
479 | @include deprecated-divider-insets-variant(
|
480 | variables.$deprecated-thumbnail-variant-config,
|
481 | $query: $query
|
482 | );
|
483 | }
|
484 |
|
485 | .mdc-deprecated-list--image-list {
|
486 | @include deprecated-divider-insets-variant(
|
487 | variables.$deprecated-image-variant-config,
|
488 | $query: $query
|
489 | );
|
490 | }
|
491 |
|
492 | .mdc-deprecated-list--video-list {
|
493 | @include deprecated-divider-insets-variant(
|
494 | variables.$deprecated-video-variant-config,
|
495 | $query: $query
|
496 | );
|
497 | }
|
498 |
|
499 | .mdc-deprecated-list-group {
|
500 | @include feature-targeting.targets($feat-structure) {
|
501 |
|
502 | .mdc-deprecated-list {
|
503 | padding: 0;
|
504 | }
|
505 | }
|
506 | }
|
507 |
|
508 | .mdc-deprecated-list-group__subheader {
|
509 | $list-subheader-virtual-height: 3rem;
|
510 | $list-subheader-leading: map.get(
|
511 | map.get(typography.$styles, body1),
|
512 | line-height
|
513 | );
|
514 | $list-subheader-margin: calc(
|
515 | (#{$list-subheader-virtual-height} - #{$list-subheader-leading}) / 2
|
516 | );
|
517 |
|
518 | @include typography.typography(subtitle1, $query);
|
519 |
|
520 | @include feature-targeting.targets($feat-structure) {
|
521 | margin: $list-subheader-margin variables.$deprecated-side-padding;
|
522 | }
|
523 | }
|
524 |
|
525 | @include evolution-mixins.without-ripple($query: $query);
|
526 | }
|
527 |
|
528 |
|
529 |
|
530 | @mixin deprecated-ripple($query: feature-targeting.all()) {
|
531 | @include ripple.common($query);
|
532 |
|
533 |
|
534 | :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {
|
535 | @include deprecated-item-interactive-ripple_($query);
|
536 | }
|
537 |
|
538 |
|
539 | .mdc-deprecated-list-item--disabled {
|
540 | @include ripple.surface(
|
541 | $ripple-target: variables.$deprecated-ripple-target,
|
542 | $query: $query
|
543 | );
|
544 | @include ripple.surface(
|
545 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
546 | $query: $query
|
547 | );
|
548 | @include ripple.radius-bounded(
|
549 | $ripple-target: variables.$deprecated-ripple-target,
|
550 | $query: $query
|
551 | );
|
552 | @include ripple.radius-bounded(
|
553 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
554 | $query: $query
|
555 | );
|
556 | @include ripple-theme.states-base-color(
|
557 | theme-color.prop-value(on-surface),
|
558 | $ripple-target: variables.$deprecated-ripple-target,
|
559 | $query: $query
|
560 | );
|
561 | @include ripple-theme.states-base-color(
|
562 | theme-color.prop-value(on-surface),
|
563 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
564 | $query: $query
|
565 | );
|
566 | @include ripple-theme.states-focus-opacity(
|
567 | ripple-theme.states-opacity(primary, focus),
|
568 | $ripple-target: variables.$deprecated-ripple-target,
|
569 | $query: $query
|
570 | );
|
571 | @include ripple-theme.states-focus-opacity(
|
572 | ripple-theme.states-opacity(primary, focus),
|
573 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
574 | $query: $query
|
575 | );
|
576 |
|
577 | #{variables.$deprecated-ripple-target},
|
578 | #{variables.$deprecated-temporary-ripple-target} {
|
579 | @include ripple.target-common($query: $query);
|
580 | }
|
581 | }
|
582 |
|
583 | @include evolution-mixins.with-ripple($query: $query);
|
584 | }
|
585 |
|
586 |
|
587 |
|
588 |
|
589 | @mixin deprecated-ripple-states($color, $query: feature-targeting.all()) {
|
590 | @include ripple-theme.states(
|
591 | $color: $color,
|
592 | $query: $query,
|
593 | $ripple-target: variables.$deprecated-ripple-target
|
594 | );
|
595 | @include ripple-theme.states(
|
596 | $color: $color,
|
597 | $query: $query,
|
598 | $ripple-target: variables.$deprecated-temporary-ripple-target
|
599 | );
|
600 | }
|
601 |
|
602 |
|
603 |
|
604 | @mixin deprecated-item-selected-text-color(
|
605 | $color,
|
606 | $query: feature-targeting.all()
|
607 | ) {
|
608 |
|
609 |
|
610 | .mdc-deprecated-list-item--selected,
|
611 | .mdc-deprecated-list-item--activated {
|
612 | @include deprecated-item-primary-text-ink-color($color, $query: $query);
|
613 | @include deprecated-item-graphic-ink-color($color, $query: $query);
|
614 | }
|
615 | }
|
616 |
|
617 | @mixin deprecated-item-primary-text-ink-color(
|
618 | $color,
|
619 | $query: feature-targeting.all()
|
620 | ) {
|
621 | $feat-color: feature-targeting.create-target($query, color);
|
622 |
|
623 | @include feature-targeting.targets($feat-color) {
|
624 | @include theme.prop(color, $color);
|
625 | }
|
626 | }
|
627 |
|
628 | @mixin deprecated-item-secondary-text-ink-color(
|
629 | $color,
|
630 | $query: feature-targeting.all()
|
631 | ) {
|
632 | $feat-color: feature-targeting.create-target($query, color);
|
633 |
|
634 | .mdc-deprecated-list-item__secondary-text {
|
635 | @include feature-targeting.targets($feat-color) {
|
636 | @include theme.prop(color, $color);
|
637 | }
|
638 | }
|
639 | }
|
640 |
|
641 | @mixin deprecated-item-graphic-fill-color(
|
642 | $color,
|
643 | $query: feature-targeting.all()
|
644 | ) {
|
645 | $feat-color: feature-targeting.create-target($query, color);
|
646 |
|
647 | .mdc-deprecated-list-item__graphic {
|
648 | @include feature-targeting.targets($feat-color) {
|
649 | @include theme.prop(background-color, $color);
|
650 | }
|
651 | }
|
652 | }
|
653 |
|
654 | @mixin deprecated-item-graphic-ink-color(
|
655 | $color,
|
656 | $query: feature-targeting.all()
|
657 | ) {
|
658 | $feat-color: feature-targeting.create-target($query, color);
|
659 |
|
660 | .mdc-deprecated-list-item__graphic {
|
661 | @include feature-targeting.targets($feat-color) {
|
662 | @include theme.prop(color, $color);
|
663 | }
|
664 | }
|
665 | }
|
666 |
|
667 | @mixin deprecated-item-meta-ink-color($color, $query: feature-targeting.all()) {
|
668 | $feat-color: feature-targeting.create-target($query, color);
|
669 |
|
670 | .mdc-deprecated-list-item__meta {
|
671 | @include feature-targeting.targets($feat-color) {
|
672 | @include theme.prop(color, $color);
|
673 | }
|
674 | }
|
675 | }
|
676 |
|
677 |
|
678 |
|
679 |
|
680 |
|
681 |
|
682 |
|
683 |
|
684 |
|
685 |
|
686 |
|
687 |
|
688 | @mixin deprecated-single-line-shape-radius(
|
689 | $radius,
|
690 | $rtl-reflexive: false,
|
691 | $density-scale: variables.$deprecated-single-line-density-scale,
|
692 | $query: feature-targeting.all()
|
693 | ) {
|
694 | $height: density-functions.prop-value(
|
695 | $density-config: variables.$deprecated-single-line-density-config,
|
696 | $density-scale: $density-scale,
|
697 | $property-name: height,
|
698 | );
|
699 |
|
700 | .mdc-deprecated-list-item {
|
701 | @include shape-mixins.radius(
|
702 | $radius,
|
703 | $rtl-reflexive,
|
704 | $component-height: $height,
|
705 | $query: $query
|
706 | );
|
707 | }
|
708 | }
|
709 |
|
710 | @mixin deprecated-divider-color($color, $query: feature-targeting.all()) {
|
711 | $feat-color: feature-targeting.create-target($query, color);
|
712 |
|
713 | .mdc-deprecated-list-divider {
|
714 | @include feature-targeting.targets($feat-color) {
|
715 | @include theme.prop(border-bottom-color, $color);
|
716 | }
|
717 | }
|
718 | }
|
719 |
|
720 | @mixin deprecated-group-subheader-ink-color(
|
721 | $color,
|
722 | $query: feature-targeting.all()
|
723 | ) {
|
724 | $feat-color: feature-targeting.create-target($query, color);
|
725 |
|
726 | .mdc-deprecated-list-group__subheader {
|
727 | @include feature-targeting.targets($feat-color) {
|
728 | @include theme.prop(color, $color);
|
729 | }
|
730 | }
|
731 | }
|
732 |
|
733 | @mixin deprecated-item-disabled-text-opacity(
|
734 | $opacity,
|
735 | $query: feature-targeting.all()
|
736 | ) {
|
737 | $feat-color: feature-targeting.create-target($query, color);
|
738 |
|
739 | .mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text {
|
740 | @include feature-targeting.targets($feat-color) {
|
741 | opacity: $opacity;
|
742 | }
|
743 | }
|
744 | }
|
745 |
|
746 | @mixin deprecated-item-disabled-text-color(
|
747 | $color,
|
748 | $query: feature-targeting.all()
|
749 | ) {
|
750 | $feat-color: feature-targeting.create-target($query, color);
|
751 |
|
752 | .mdc-deprecated-list-item--disabled {
|
753 | .mdc-deprecated-list-item__text,
|
754 | .mdc-deprecated-list-item__primary-text,
|
755 | .mdc-deprecated-list-item__secondary-text {
|
756 | @include feature-targeting.targets($feat-color) {
|
757 | @include theme.prop(color, $color);
|
758 | }
|
759 | }
|
760 | }
|
761 | }
|
762 |
|
763 |
|
764 |
|
765 |
|
766 |
|
767 |
|
768 |
|
769 |
|
770 | @mixin deprecated-list-item-padding-variant(
|
771 | $variant-config,
|
772 | $query: feature-targeting.all()
|
773 | ) {
|
774 | $leading-padding: map.get($variant-config, leading-padding);
|
775 | @include deprecated-list-item-padding($leading-padding, $query);
|
776 | }
|
777 |
|
778 |
|
779 |
|
780 |
|
781 |
|
782 |
|
783 |
|
784 |
|
785 | @mixin deprecated-list-item-padding(
|
786 | $leading-padding,
|
787 | $query: feature-targeting.all()
|
788 | ) {
|
789 | $feat-structure: feature-targeting.create-target($query, structure);
|
790 |
|
791 | @include feature-targeting.targets($feat-structure) {
|
792 | @include rtl.reflexive-property(
|
793 | padding,
|
794 | $leading-padding,
|
795 | variables.$deprecated-trailing-padding
|
796 | );
|
797 | }
|
798 | }
|
799 |
|
800 |
|
801 |
|
802 |
|
803 |
|
804 |
|
805 |
|
806 |
|
807 | @mixin deprecated-list-item-height-variant(
|
808 | $variant-config,
|
809 | $query: feature-targeting.all()
|
810 | ) {
|
811 | $single-line-height: map.get($variant-config, single-line-height);
|
812 | @include deprecated-list-item-height($single-line-height, $query);
|
813 | }
|
814 |
|
815 |
|
816 |
|
817 |
|
818 |
|
819 |
|
820 |
|
821 |
|
822 | @mixin deprecated-list-item-height($height, $query: feature-targeting.all()) {
|
823 | $feat-structure: feature-targeting.create-target($query, structure);
|
824 |
|
825 | @include feature-targeting.targets($feat-structure) {
|
826 | height: $height;
|
827 | }
|
828 | }
|
829 |
|
830 |
|
831 |
|
832 |
|
833 |
|
834 |
|
835 |
|
836 |
|
837 | @mixin deprecated-icon-margin($margin, $query: feature-targeting.all()) {
|
838 | $feat-structure: feature-targeting.create-target($query, structure);
|
839 |
|
840 | @include feature-targeting.targets($feat-structure) {
|
841 | .mdc-deprecated-list-item__graphic {
|
842 | @include rtl.reflexive-box(margin, right, $margin);
|
843 | }
|
844 | }
|
845 | }
|
846 |
|
847 |
|
848 |
|
849 |
|
850 |
|
851 |
|
852 |
|
853 |
|
854 | @mixin deprecated-divider-insets-variant(
|
855 | $variant-config,
|
856 | $query: feature-targeting.all()
|
857 | ) {
|
858 | $leading-padding: map.get($variant-config, leading-padding);
|
859 | $text-offset: map.get($variant-config, text-offset);
|
860 | @include deprecated-divider-insets($leading-padding, $text-offset, $query);
|
861 | }
|
862 |
|
863 |
|
864 |
|
865 |
|
866 |
|
867 |
|
868 |
|
869 |
|
870 |
|
871 | @mixin deprecated-divider-insets(
|
872 | $leading-padding,
|
873 | $text-offset,
|
874 | $query: feature-targeting.all()
|
875 | ) {
|
876 | .mdc-deprecated-list-divider--inset-leading {
|
877 | @include deprecated-divider-inset(
|
878 | $leading-padding,
|
879 | $text-offset,
|
880 | $trailing: false,
|
881 | $query: $query
|
882 | );
|
883 | }
|
884 |
|
885 | .mdc-deprecated-list-divider--inset-trailing {
|
886 | @include deprecated-divider-inset(
|
887 | $leading-padding,
|
888 | $text-offset,
|
889 | $leading: false,
|
890 | $query: $query
|
891 | );
|
892 | }
|
893 |
|
894 | .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing {
|
895 | @include deprecated-divider-inset(
|
896 | $leading-padding,
|
897 | $text-offset,
|
898 | $query: $query
|
899 | );
|
900 | }
|
901 |
|
902 | .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding {
|
903 | @include deprecated-divider-inset(
|
904 | $leading-padding,
|
905 | $text-offset,
|
906 | $trailing: false,
|
907 | $use-padding: true,
|
908 | $query: $query
|
909 | );
|
910 | }
|
911 |
|
912 | .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding {
|
913 | @include deprecated-divider-inset(
|
914 | $leading-padding,
|
915 | $text-offset,
|
916 | $use-padding: true,
|
917 | $query: $query
|
918 | );
|
919 | }
|
920 | }
|
921 |
|
922 |
|
923 | @mixin deprecated-graphic-size-variant(
|
924 | $variant-config,
|
925 | $query: feature-targeting.all()
|
926 | ) {
|
927 | $leading-padding: map.get($variant-config, leading-padding);
|
928 | $text-offset: map.get($variant-config, text-offset);
|
929 | $width: map.get(map.get($variant-config, graphic-size), width);
|
930 | $height: map.get(map.get($variant-config, graphic-size), height);
|
931 |
|
932 | @include deprecated-graphic-size(
|
933 | $leading-padding,
|
934 | $text-offset,
|
935 | $width,
|
936 | $height,
|
937 | $query
|
938 | );
|
939 | }
|
940 |
|
941 |
|
942 |
|
943 |
|
944 |
|
945 |
|
946 | @mixin deprecated-graphic-size(
|
947 | $leading-padding,
|
948 | $text-offset,
|
949 | $width,
|
950 | $height,
|
951 | $query: feature-targeting.all()
|
952 | ) {
|
953 | $feat-structure: feature-targeting.create-target($query, structure);
|
954 | $margin-value: max(
|
955 | $text-offset - $leading-padding - $width,
|
956 | $leading-padding
|
957 | );
|
958 | @include feature-targeting.targets($feat-structure) {
|
959 | @include rtl.reflexive-box(margin, right, $margin-value);
|
960 | width: $width;
|
961 | height: $height;
|
962 | }
|
963 | }
|
964 |
|
965 |
|
966 | @mixin deprecated-graphic-size-dense_($size, $query: feature-targeting.all()) {
|
967 | @include deprecated-graphic-size(
|
968 | $leading-padding: 16px,
|
969 | $text-offset: 16px,
|
970 | $width: $size,
|
971 | $height: $size,
|
972 | $query: $query
|
973 | );
|
974 | }
|
975 |
|
976 |
|
977 |
|
978 |
|
979 |
|
980 |
|
981 |
|
982 |
|
983 |
|
984 |
|
985 |
|
986 | @mixin deprecated-divider-inset-variant(
|
987 | $variant-config,
|
988 | $leading: true,
|
989 | $trailing: true,
|
990 | $use-padding: false,
|
991 | $query: feature-targeting.all()
|
992 | ) {
|
993 | $leading-padding: map.get($variant-config, leading-padding);
|
994 | $text-offset: map.get($variant-config, text-offset);
|
995 |
|
996 | @include deprecated-divider-inset(
|
997 | $leading-padding,
|
998 | $text-offset,
|
999 | $leading,
|
1000 | $trailing,
|
1001 | $use-padding,
|
1002 | $query
|
1003 | );
|
1004 | }
|
1005 |
|
1006 | @mixin deprecated-divider-inset(
|
1007 | $leading-padding,
|
1008 | $text-offset,
|
1009 | $leading: true,
|
1010 | $trailing: true,
|
1011 | $use-padding: false,
|
1012 | $query: feature-targeting.all()
|
1013 | ) {
|
1014 | $feat-structure: feature-targeting.create-target($query, structure);
|
1015 | $trailing-inset: if($trailing, variables.$deprecated-trailing-padding, 0);
|
1016 | $leading-inset: if(
|
1017 | $leading,
|
1018 | if($use-padding, $leading-padding, $text-offset),
|
1019 | 0
|
1020 | );
|
1021 |
|
1022 | @include feature-targeting.targets($feat-structure) {
|
1023 | @if $leading {
|
1024 | @include rtl.reflexive-box(margin, left, $leading-inset);
|
1025 | }
|
1026 | width: calc(100% - #{$leading-inset + $trailing-inset});
|
1027 | }
|
1028 | }
|
1029 |
|
1030 |
|
1031 |
|
1032 |
|
1033 |
|
1034 |
|
1035 |
|
1036 |
|
1037 | @mixin deprecated-single-line-density(
|
1038 | $density-scale,
|
1039 | $query: feature-targeting.all()
|
1040 | ) {
|
1041 | $height: density-functions.prop-value(
|
1042 | $density-config: variables.$deprecated-single-line-density-config,
|
1043 | $density-scale: $density-scale,
|
1044 | $property-name: height,
|
1045 | );
|
1046 |
|
1047 | .mdc-deprecated-list-item {
|
1048 | @include deprecated-single-line-height($height, $query: $query);
|
1049 | }
|
1050 | }
|
1051 |
|
1052 |
|
1053 |
|
1054 |
|
1055 |
|
1056 |
|
1057 |
|
1058 |
|
1059 | @mixin deprecated-single-line-height($height, $query: feature-targeting.all()) {
|
1060 | $feat-structure: feature-targeting.create-target($query, structure);
|
1061 |
|
1062 | @include feature-targeting.targets($feat-structure) {
|
1063 | height: $height;
|
1064 | }
|
1065 | }
|
1066 |
|
1067 |
|
1068 |
|
1069 |
|
1070 |
|
1071 | @mixin deprecated-base_($query: feature-targeting.all()) {
|
1072 | $feat-color: feature-targeting.create-target($query, color);
|
1073 | $feat-structure: feature-targeting.create-target($query, structure);
|
1074 | $feat-typography: feature-targeting.create-target($query, typography);
|
1075 |
|
1076 | @include typography.typography(subtitle1, $query);
|
1077 |
|
1078 | @include feature-targeting.targets($feat-typography) {
|
1079 |
|
1080 |
|
1081 |
|
1082 | line-height: map.get(map.get(typography.$styles, body1), line-height);
|
1083 | }
|
1084 |
|
1085 | @include feature-targeting.targets($feat-structure) {
|
1086 | margin: 0;
|
1087 | padding: 8px 0;
|
1088 | list-style-type: none;
|
1089 |
|
1090 | &:focus {
|
1091 | outline: none;
|
1092 | }
|
1093 | }
|
1094 |
|
1095 | @include deprecated-item-primary-text-ink-color(
|
1096 | text-primary-on-background,
|
1097 | $query
|
1098 | );
|
1099 | }
|
1100 |
|
1101 | @mixin deprecated-item-base_ {
|
1102 | display: flex;
|
1103 | position: relative;
|
1104 | align-items: center;
|
1105 | justify-content: flex-start;
|
1106 | overflow: hidden;
|
1107 | padding: 0;
|
1108 |
|
1109 | &:focus {
|
1110 | outline: none;
|
1111 | }
|
1112 | }
|
1113 |
|
1114 |
|
1115 | @mixin deprecated-item-interactive-ripple_($query: feature-targeting.all()) {
|
1116 | @include ripple.surface(
|
1117 | $ripple-target: variables.$deprecated-ripple-target,
|
1118 | $query: $query
|
1119 | );
|
1120 | @include ripple.surface(
|
1121 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
1122 | $query: $query
|
1123 | );
|
1124 | @include ripple.radius-bounded(
|
1125 | $ripple-target: variables.$deprecated-ripple-target,
|
1126 | $query: $query
|
1127 | );
|
1128 | @include ripple.radius-bounded(
|
1129 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
1130 | $query: $query
|
1131 | );
|
1132 | @include ripple-theme.states(
|
1133 | theme-color.prop-value(on-surface),
|
1134 | false,
|
1135 | $ripple-target: variables.$deprecated-ripple-target,
|
1136 | $query: $query
|
1137 | );
|
1138 | @include ripple-theme.states(
|
1139 | theme-color.prop-value(on-surface),
|
1140 | false,
|
1141 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
1142 | $query: $query
|
1143 | );
|
1144 | @include ripple-theme.states-activated(
|
1145 | primary,
|
1146 | false,
|
1147 | $ripple-target: variables.$deprecated-ripple-target,
|
1148 | $query: $query
|
1149 | );
|
1150 | @include ripple-theme.states-activated(
|
1151 | primary,
|
1152 | false,
|
1153 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
1154 | $query: $query
|
1155 | );
|
1156 | @include ripple-theme.states-selected(
|
1157 | primary,
|
1158 | false,
|
1159 | $ripple-target: variables.$deprecated-ripple-target,
|
1160 | $query: $query
|
1161 | );
|
1162 | @include ripple-theme.states-selected(
|
1163 | primary,
|
1164 | false,
|
1165 | $ripple-target: variables.$deprecated-temporary-ripple-target,
|
1166 | $query: $query
|
1167 | );
|
1168 |
|
1169 | #{variables.$deprecated-ripple-target},
|
1170 | #{variables.$deprecated-temporary-ripple-target} {
|
1171 | @include ripple.target-common($query: $query);
|
1172 | }
|
1173 | }
|