86 lines
2.8 KiB
SCSS
86 lines
2.8 KiB
SCSS
|
@use '../checkbox/checkbox-common';
|
||
|
|
@use '../radio/radio-common';
|
||
|
|
@use './list-item-hcm-indicator';
|
||
|
|
|
||
|
|
// For compatibility with the non-MDC selection list, we support avatars that are
|
||
|
|
// shown at the end of the list option. This is not supported by the MDC list as the
|
||
|
|
// spec only defines avatars at the beginning of a list item. For selection list options,
|
||
|
|
// we support changing the checkbox position to `before`. This results in the avatar from
|
||
|
|
// the list start being moved to the end. Similar to MDC's `--trailing-icon` class, we
|
||
|
|
// implement a `--trailing-avatar` class that is based on the original `--leading-avatar`
|
||
|
|
// implementation.
|
||
|
|
.mat-mdc-list-option-with-trailing-avatar {
|
||
|
|
&.mdc-list-item,
|
||
|
|
[dir='rtl'] &.mdc-list-item {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-list-item__end {
|
||
|
|
margin-left: 16px;
|
||
|
|
margin-right: 16px;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-list-item--with-two-lines {
|
||
|
|
$top: 32px;
|
||
|
|
$bottom: 20px;
|
||
|
|
|
||
|
|
.mdc-list-item__primary-text {
|
||
|
|
display: block;
|
||
|
|
margin-top: 0;
|
||
|
|
line-height: normal;
|
||
|
|
margin-bottom: $bottom * -1;
|
||
|
|
|
||
|
|
// This was used by MDC to set the text baseline. We should figure out a way to
|
||
|
|
// remove it, because it can introduce unnecessary whitespace at the beginning
|
||
|
|
// of the element.
|
||
|
|
&::before {
|
||
|
|
display: inline-block;
|
||
|
|
width: 0;
|
||
|
|
height: $top;
|
||
|
|
content: '';
|
||
|
|
vertical-align: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
display: inline-block;
|
||
|
|
width: 0;
|
||
|
|
height: $bottom;
|
||
|
|
content: '';
|
||
|
|
vertical-align: $bottom * -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-list-item__end {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-list-option {
|
||
|
|
// We can't use the MDC checkbox here directly, because this checkbox is purely
|
||
|
|
// decorative and including the MDC one will bring in unnecessary JS.
|
||
|
|
@include checkbox-common.checkbox-structure(false);
|
||
|
|
@include checkbox-common.checkbox-noop-animations;
|
||
|
|
@include radio-common.radio-structure(false);
|
||
|
|
@include radio-common.radio-noop-animations;
|
||
|
|
|
||
|
|
// The internal checkbox/radio is purely decorative, but because it's an `input`, the user can
|
||
|
|
// still focus it by tabbing or clicking. Furthermore, `mat-list-option` has the `option` role
|
||
|
|
// which doesn't allow a nested `input`. We use `display: none` both to remove it from the tab
|
||
|
|
// order and to prevent focus from reaching it through the screen reader's forms mode. Ideally
|
||
|
|
// we'd remove the `input` completely, but we can't because MDC uses a `:checked` selector to
|
||
|
|
// toggle the selected styles.
|
||
|
|
.mdc-checkbox__native-control, .mdc-radio__native-control {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-list-option.mdc-list-item--selected {
|
||
|
|
// Improve accessibility for Window High Contrast Mode (HCM) by adding an idicator on the selected
|
||
|
|
// option.
|
||
|
|
@include list-item-hcm-indicator.private-high-contrast-list-item-indicator();
|
||
|
|
}
|