201 lines
7.1 KiB
SCSS
201 lines
7.1 KiB
SCSS
|
@use '@angular/cdk';
|
||
|
|
|
||
|
|
@use '../tokens/m2/mat/option' as tokens-mat-option;
|
||
|
|
@use '../tokens/m2/mdc/list' as tokens-mdc-list;
|
||
|
|
@use '../tokens/token-utils';
|
||
|
|
@use '../style/vendor-prefixes';
|
||
|
|
@use '../style/layout-common';
|
||
|
|
|
||
|
|
$_side-padding: 16px;
|
||
|
|
|
||
|
|
.mat-mdc-option {
|
||
|
|
@include vendor-prefixes.user-select(none);
|
||
|
|
@include vendor-prefixes.smooth-font();
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
overflow: hidden;
|
||
|
|
min-height: 48px;
|
||
|
|
padding: 0 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mat-option.$prefix, tokens-mat-option.get-token-slots()) {
|
||
|
|
@include token-utils.create-token-slot(color, label-text-color);
|
||
|
|
@include token-utils.create-token-slot(font-family, label-text-font);
|
||
|
|
@include token-utils.create-token-slot(line-height, label-text-line-height);
|
||
|
|
@include token-utils.create-token-slot(font-size, label-text-size);
|
||
|
|
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
|
||
|
|
@include token-utils.create-token-slot(font-weight, label-text-weight);
|
||
|
|
|
||
|
|
// Increase specificity to override styles from list theme.
|
||
|
|
&:hover:not(.mdc-list-item--disabled) {
|
||
|
|
@include token-utils.create-token-slot(background-color, hover-state-layer-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus.mdc-list-item,
|
||
|
|
&.mat-mdc-option-active.mdc-list-item {
|
||
|
|
@include token-utils.create-token-slot(background-color, focus-state-layer-color);
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-list-item--selected:not(.mdc-list-item--disabled) {
|
||
|
|
.mdc-list-item__primary-text {
|
||
|
|
@include token-utils.create-token-slot(color, selected-state-label-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
// We don't change the background in multiple mode since
|
||
|
|
// it has the checkbox to show the selected state.
|
||
|
|
&:not(.mat-mdc-option-multiple) {
|
||
|
|
@include token-utils.create-token-slot(background-color, selected-state-layer-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-pseudo-checkbox {
|
||
|
|
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
|
||
|
|
token-utils.get-token-variable(selected-state-label-text-color)};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-list-item {
|
||
|
|
// If the MDC list is loaded after the option, this gets overwritten which breaks the text
|
||
|
|
// alignment. Ideally we'd wrap all the MDC mixins above with this selector, but the increased
|
||
|
|
// specificity breaks some internal overrides.
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
// List items in MDC have a default background color which can be different from the container
|
||
|
|
// in which the option is projected. Set the base background to transparent since options
|
||
|
|
// should always have the same color as their container.
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-list-item--disabled {
|
||
|
|
// This is the same as `mdc-list-mixins.list-disabled-opacity` which
|
||
|
|
// we can't use directly, because it comes with some selectors.
|
||
|
|
cursor: default;
|
||
|
|
|
||
|
|
// Prevent clicking on disabled options with mouse. Support focusing on disabled option using
|
||
|
|
// keyboard, but not with mouse.
|
||
|
|
pointer-events: none;
|
||
|
|
|
||
|
|
// Give the visual content of this list item a lower opacity. This creates the "gray" appearance
|
||
|
|
// for disabled state. Set the opacity on the pseudo checkbox and projected content. Set
|
||
|
|
// opacity only on the visual content rather than the entire list-item so we don't affect the
|
||
|
|
// focus ring from `.mat-focus-indicator`.
|
||
|
|
//
|
||
|
|
// MatOption uses a child `<div>` element for its focus state to align with how ListItem does
|
||
|
|
// its focus state.
|
||
|
|
.mat-mdc-option-pseudo-checkbox, .mdc-list-item__primary-text, > mat-icon {
|
||
|
|
opacity: 0.38;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Note that we bump the padding here, rather than padding inside the
|
||
|
|
// group so that ripples still reach to the edges of the panel.
|
||
|
|
.mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
|
||
|
|
padding-left: $_side-padding * 2;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
padding-left: $_side-padding;
|
||
|
|
padding-right: $_side-padding * 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-icon,
|
||
|
|
.mat-pseudo-checkbox-full {
|
||
|
|
margin-right: $_side-padding;
|
||
|
|
flex-shrink: 0;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
margin-right: 0;
|
||
|
|
margin-left: $_side-padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-pseudo-checkbox-minimal {
|
||
|
|
margin-left: $_side-padding;
|
||
|
|
flex-shrink: 0;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
margin-right: $_side-padding;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Increase specificity because ripple styles are part of the `mat-core` mixin and can
|
||
|
|
// potentially overwrite the absolute position of the container.
|
||
|
|
.mat-mdc-option-ripple {
|
||
|
|
@include layout-common.fill;
|
||
|
|
|
||
|
|
// Disable pointer events for the ripple container because the container will overlay the
|
||
|
|
// user content and we don't want to disable mouse events on the user content.
|
||
|
|
// Pointer events can be safely disabled because the ripple trigger element is the host element.
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Needs to be overwritten explicitly, because the style can
|
||
|
|
// leak in from the list and cause the text to truncate.
|
||
|
|
.mdc-list-item__primary-text {
|
||
|
|
white-space: normal;
|
||
|
|
|
||
|
|
// MDC assigns the typography to this element, rather than the option itself, which will break
|
||
|
|
// existing overrides. Set all of the typography-related properties to `inherit` so that any
|
||
|
|
// styles set on the host can propagate down.
|
||
|
|
font-size: inherit;
|
||
|
|
font-weight: inherit;
|
||
|
|
letter-spacing: inherit;
|
||
|
|
line-height: inherit;
|
||
|
|
font-family: inherit;
|
||
|
|
text-decoration: inherit;
|
||
|
|
text-transform: inherit;
|
||
|
|
margin-right: auto;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
margin-right: 0;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
// In single selection mode, the selected option is indicated by changing its
|
||
|
|
// background color, but that doesn't work in high contrast mode. We add an
|
||
|
|
// alternate indication by rendering out a circle.
|
||
|
|
&.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after {
|
||
|
|
$size: 10px;
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
right: $_side-padding;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
width: $size;
|
||
|
|
height: 0;
|
||
|
|
border-bottom: solid $size;
|
||
|
|
border-radius: $size;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] &.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after {
|
||
|
|
right: auto;
|
||
|
|
left: $_side-padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-option-multiple {
|
||
|
|
// Multi-select options in the selected state aren't supposed to change their background color,
|
||
|
|
// because the checkbox already indicates that they're selected. This happened to work in M2,
|
||
|
|
// due to `list-item-selected-container-color` being the same as `list-item-container-color`,
|
||
|
|
// but that's no longer the case in M3. This overrides ensures that the appearance is consistent.
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()) {
|
||
|
|
$selected-token: token-utils.get-token-variable-name(list-item-selected-container-color);
|
||
|
|
$base-token: token-utils.get-token-variable(list-item-container-color, $fallback: transparent);
|
||
|
|
#{$selected-token}: $base-token;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// For options, render the focus indicator when the class .mat-mdc-option-active is present.
|
||
|
|
.mat-mdc-option-active .mat-focus-indicator::before {
|
||
|
|
content: '';
|
||
|
|
}
|