src/material/list/list-option.scss - main - githubmirror/components

src/material/list/list-option.scss
89 строк3 KB
Karl Seamon
perf(material/checkbox): Optimize more expensive selectors (#30409)
31 янв 2025, 20:28
31 янв 2025, 20:281b3c42e
@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 radio-common.radio-structure(false);
  @include radio-common.radio-noop-animations;

  &._mat-animation-noopable > .mdc-list-item__start > .mdc-checkbox,
  &._mat-animation-noopable > .mdc-list-item__end > .mdc-checkbox {
    @include checkbox-common.checkbox-noop-animations-internal;
  }

  // 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();
}