sass-references/angular-material/material/core/option/optgroup.scss

48 lines
1.6 KiB
SCSS

@use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
@use '../tokens/token-utils';
.mat-mdc-optgroup {
// These tokens are set on the root option group to make them easier to override.
@include token-utils.use-tokens(
tokens-mat-optgroup.$prefix, tokens-mat-optgroup.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);
}
}
.mat-mdc-optgroup-label {
display: flex;
position: relative;
align-items: center;
justify-content: flex-start;
overflow: hidden;
min-height: 48px;
padding: 0 16px;
outline: none;
&.mdc-list-item--disabled {
opacity: 0.38;
}
// 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 {
// MDC assigns the typography to this element, rather than the element 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;
white-space: normal;
color: inherit;
}
}