|
| 1 | +@use '@material/typography/typography'; |
| 2 | +@use '@material/feature-targeting/feature-targeting'; |
| 3 | +@use '@material/density/functions' as density-functions; |
| 4 | +@use '@material/list/evolution-mixins' as mdc-list; |
| 5 | +@use '@material/list/evolution-variables' as mdc-list-variables; |
| 6 | + |
| 7 | +// For compatibility with the non-MDC selection list, we support avatars that are |
| 8 | +// shown at the end of the list option. This is not supported by the MDC list as the |
| 9 | +// spec only defines avatars at the beginning of a list item. For selection list options, |
| 10 | +// we support changing the checkbox position to `before`. This results in the avatar from |
| 11 | +// the list start being moved to the end. Similar to MDC's `--trailing-icon` class, we |
| 12 | +// implement a `--trailing-avatar` class that is based on the original `--leading-avatar` |
| 13 | +// implementation. See: https://github.com/material-components/material-components-web/blob/3f342c3f4715fd3587f327ce4ea6b5dd314c5c55/packages/mdc-list/_evolution-mixins.scss#L198-L217 |
| 14 | + |
| 15 | +@mixin core-styles($query) { |
| 16 | + $feat-structure: feature-targeting.create-target($query, structure); |
| 17 | + |
| 18 | + .mat-mdc-list-option-with-trailing-avatar { |
| 19 | + @include mdc-list.item-end-spacing(16px, $query: $query); |
| 20 | + @include mdc-list.item-end-size(40px, $query: $query); |
| 21 | + |
| 22 | + &.mdc-list-item--with-two-lines { |
| 23 | + .mdc-list-item__primary-text { |
| 24 | + @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query); |
| 25 | + } |
| 26 | + } |
| 27 | + |
| 28 | + .mdc-list-item__end { |
| 29 | + @include feature-targeting.targets($feat-structure) { |
| 30 | + border-radius: 50%; |
| 31 | + } |
| 32 | + } |
| 33 | + } |
| 34 | +} |
| 35 | + |
| 36 | +@mixin density-styles($density-scale) { |
| 37 | + $one-line-tall-height: density-functions.prop-value( |
| 38 | + $density-config: mdc-list-variables.$one-line-item-tall-density-config, |
| 39 | + $density-scale: $density-scale, |
| 40 | + $property-name: height, |
| 41 | + ); |
| 42 | + |
| 43 | + $two-line-tall-height: density-functions.prop-value( |
| 44 | + $density-config: mdc-list-variables.$two-line-item-tall-density-config, |
| 45 | + $density-scale: $density-scale, |
| 46 | + $property-name: height, |
| 47 | + ); |
| 48 | + |
| 49 | + .mat-mdc-list-option-with-trailing-avatar { |
| 50 | + @include mdc-list.one-line-item-height($one-line-tall-height); |
| 51 | + @include mdc-list.two-line-item-height($two-line-tall-height); |
| 52 | + } |
| 53 | +} |
0 commit comments