192 lines
7.0 KiB
SCSS
192 lines
7.0 KiB
SCSS
@use '../core/style/layout-common';
|
|
@use '../core/tokens/m2/mat/list' as tokens-mat-list;
|
|
@use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
|
|
@use '../core/tokens/token-utils';
|
|
@use './list-item-hcm-indicator';
|
|
@use './list-inherited-structure';
|
|
|
|
@include list-inherited-structure.private-list-inherited-structural-styles;
|
|
|
|
// Add additional slots for the MDC list tokens, needed in Angular Material.
|
|
@include token-utils.use-tokens(tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()) {
|
|
// MDC allows focus and hover colors to take precedence over disabled color. We add the disabled
|
|
// color here with higher specificity so that the disabled color takes precedence.
|
|
// TODO(mmalerba): Dicuss with MDC whether to change this in their code.
|
|
.mdc-list-item.mdc-list-item--disabled .mdc-list-item__primary-text {
|
|
@include token-utils.create-token-slot(color, list-item-disabled-label-text-color);
|
|
}
|
|
|
|
// We don't use MDC's state layer since it's tied in with their ripple. Instead we emit slots
|
|
// for our own state layer.
|
|
// TODO(mmalerba): Consider using MDC's ripple & state layer.
|
|
.mdc-list-item:hover::before {
|
|
@include token-utils.create-token-slot(background-color, list-item-hover-state-layer-color);
|
|
@include token-utils.create-token-slot(opacity, list-item-hover-state-layer-opacity);
|
|
}
|
|
.mdc-list-item.mdc-list-item--disabled::before {
|
|
@include token-utils.create-token-slot(background-color, list-item-disabled-state-layer-color);
|
|
@include token-utils.create-token-slot(opacity, list-item-disabled-state-layer-opacity);
|
|
}
|
|
.mdc-list-item:focus::before {
|
|
@include token-utils.create-token-slot(background-color, list-item-focus-state-layer-color);
|
|
@include token-utils.create-token-slot(opacity, list-item-focus-state-layer-opacity);
|
|
}
|
|
|
|
// Apply the disabled opacity to the checkbox/radio indicators.
|
|
// TODO(mmalerba): We should probably stop doing this and allow the checkbox/radio to decide
|
|
// what their disabled state looks like. This is done for now to avoid screenshot diffs.
|
|
.mdc-list-item--disabled {
|
|
.mdc-radio,
|
|
.mdc-checkbox {
|
|
@include token-utils.create-token-slot(opacity, list-item-disabled-label-text-opacity);
|
|
}
|
|
}
|
|
|
|
// In Angular Material we put the avatar class directly on the .mdc-list-item__start element,
|
|
// rather than nested inside it, so we need to emit avatar slots ourselves.
|
|
// TODO(mmalerba): We should try to change MDC's recommended DOM or change ours to match their
|
|
// recommendation.
|
|
.mdc-list-item--with-leading-avatar .mat-mdc-list-item-avatar {
|
|
@include token-utils.create-token-slot(border-radius, list-item-leading-avatar-shape);
|
|
@include token-utils.create-token-slot(background-color, list-item-leading-avatar-color);
|
|
}
|
|
|
|
// Set font-size of leading icon to same value as its width and height. Ensure icon scales to
|
|
// "list-item-leading-icon-size" token. In Angular Material, the icon is on the same element as
|
|
// ".mdc-list-item__start", rather than a child of ".mdc-list-item__start".
|
|
.mat-mdc-list-item-icon {
|
|
@include token-utils.create-token-slot(font-size, list-item-leading-icon-size);
|
|
}
|
|
}
|
|
|
|
a.mdc-list-item--activated {
|
|
// Improve accessibility for Window High Contrast Mode (HCM) by adding an idicator on active
|
|
// links.
|
|
@include list-item-hcm-indicator.private-high-contrast-list-item-indicator();
|
|
}
|
|
|
|
// MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
|
|
// explicitly set `display: block`
|
|
.mat-mdc-list-base {
|
|
display: block;
|
|
|
|
// MDC sets `pointer-events: none` on these elements,
|
|
// even though we allowed interactive content in them.
|
|
.mdc-list-item__start,
|
|
.mdc-list-item__end,
|
|
.mdc-list-item__content {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-list-item,
|
|
.mat-mdc-list-option {
|
|
// MDC expects that the list items are always `<li>`, since we actually use `<button>` in some
|
|
// cases, we need to make sure it expands to fill the available width.
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
&:not(.mat-mdc-list-item-interactive) {
|
|
cursor: default;
|
|
}
|
|
|
|
// MDC doesn't have list dividers, so we use mat-divider and style appropriately.
|
|
// TODO(devversion): check if we can use the MDC dividers.
|
|
.mat-divider-inset {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.mat-mdc-list-item-avatar ~ .mat-divider-inset {
|
|
margin-left: 72px;
|
|
|
|
[dir='rtl'] & {
|
|
margin-right: 72px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// MDC's hover and focus state styles are included with their ripple which we don't use.
|
|
// Instead we add the focus, hover and selected styles ourselves using this pseudo-element
|
|
.mat-mdc-list-item-interactive::before {
|
|
@include layout-common.fill();
|
|
content: '';
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
// This comes up in some internal implementations.
|
|
border-radius: inherit;
|
|
}
|
|
|
|
// The MDC-based list items already use the `::before` pseudo element for the standard
|
|
// focus/selected/hover state. Hence, we need to have a separate list-item spanning
|
|
// element that can be used for strong focus indicators.
|
|
.mat-mdc-list-item {
|
|
> .mat-focus-indicator {
|
|
@include layout-common.fill();
|
|
pointer-events: none;
|
|
}
|
|
|
|
// For list items, render the focus indicator when the parent
|
|
// listem item is focused.
|
|
&:focus > .mat-focus-indicator::before {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
.mat-mdc-list-item.mdc-list-item--with-three-lines {
|
|
.mat-mdc-list-item-line.mdc-list-item__secondary-text {
|
|
white-space: nowrap;
|
|
line-height: normal;
|
|
}
|
|
|
|
// Unscoped content can wrap if the list item has acquired three lines. MDC implements
|
|
// this functionality for secondary text but there is no proper text ellipsis when
|
|
// text overflows the third line. These styles ensure the overflow is handled properly.
|
|
// TODO: Move this to the MDC list once it drops IE11 support.
|
|
.mat-mdc-list-item-unscoped-content.mdc-list-item__secondary-text {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
}
|
|
|
|
// MDC doesn't account for button being used as a list item. We override some of
|
|
// the default button styles here so that they look right when used as a list
|
|
// item.
|
|
mat-action-list button {
|
|
background: none;
|
|
color: inherit;
|
|
border: none;
|
|
font: inherit;
|
|
outline: inherit;
|
|
-webkit-tap-highlight-color: transparent;
|
|
text-align: start;
|
|
|
|
&::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
@include token-utils.use-tokens(tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()) {
|
|
.mdc-list-item--with-leading-icon .mdc-list-item__start {
|
|
@include token-utils.create-token-slot(margin-inline-start, list-item-leading-icon-start-space);
|
|
@include token-utils.create-token-slot(margin-inline-end, list-item-leading-icon-end-space);
|
|
}
|
|
|
|
.mat-mdc-nav-list .mat-mdc-list-item {
|
|
@include token-utils.create-token-slot(border-radius, active-indicator-shape);
|
|
@include token-utils.create-token-slot(
|
|
--mat-focus-indicator-border-radius,
|
|
active-indicator-shape
|
|
);
|
|
|
|
&.mdc-list-item--activated {
|
|
@include token-utils.create-token-slot(background-color, active-indicator-color);
|
|
}
|
|
}
|
|
}
|