742 lines
24 KiB
SCSS
742 lines
24 KiB
SCSS
|
@use '@angular/cdk';
|
||
|
|
@use '../core/style/layout-common';
|
||
|
|
@use '../core/focus-indicators/private' as focus-indicators-private;
|
||
|
|
@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
|
||
|
|
@use '../core/tokens/m2/mat/chip' as tokens-mat-chip;
|
||
|
|
@use '../core/style/vendor-prefixes';
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
|
||
|
|
$_checkmark-size: 20px;
|
||
|
|
$_trailing-icon-size: 18px;
|
||
|
|
$_action-padding: 12px;
|
||
|
|
$_graphic-padding: 6px;
|
||
|
|
$_trailing-action-padding: 8px;
|
||
|
|
$_avatar-leading-padding: 4px;
|
||
|
|
$_avatar-trailing-padding: 8px;
|
||
|
|
|
||
|
|
.mdc-evolution-chip,
|
||
|
|
.mdc-evolution-chip__cell,
|
||
|
|
.mdc-evolution-chip__action {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip {
|
||
|
|
position: relative;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__cell,
|
||
|
|
.mdc-evolution-chip__action {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__cell--primary {
|
||
|
|
// Ensures that the trailing icon is pushed to the end if the chip has a set width.
|
||
|
|
flex-basis: 100%;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__cell--trailing {
|
||
|
|
flex: 1 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__action {
|
||
|
|
align-items: center;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
box-sizing: content-box;
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-flex;
|
||
|
|
justify-content: center;
|
||
|
|
outline: none;
|
||
|
|
padding: 0;
|
||
|
|
text-decoration: none;
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__action--presentational {
|
||
|
|
cursor: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--disabled,
|
||
|
|
.mdc-evolution-chip__action:disabled {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__action--primary {
|
||
|
|
// This element can be placed on a `button` node which usually has some user agent styles.
|
||
|
|
// Reset the font so that the typography from the root element can propagate down.
|
||
|
|
font: inherit;
|
||
|
|
letter-spacing: inherit;
|
||
|
|
white-space: inherit;
|
||
|
|
overflow-x: hidden;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
.mat-mdc-standard-chip &::before {
|
||
|
|
@include token-utils.create-token-slot(border-width, outline-width);
|
||
|
|
@include token-utils.create-token-slot(border-radius, container-shape-radius);
|
||
|
|
box-sizing: border-box;
|
||
|
|
content: '';
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
pointer-events: none;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 1;
|
||
|
|
border-style: solid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip & {
|
||
|
|
padding-left: $_action-padding;
|
||
|
|
padding-right: $_action-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic & {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: $_action-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic & {
|
||
|
|
padding-left: $_action-padding;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) &::before {
|
||
|
|
@include token-utils.create-token-slot(border-color, outline-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus::before {
|
||
|
|
@include token-utils.create-token-slot(border-color, focus-outline-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--disabled &::before {
|
||
|
|
@include token-utils.create-token-slot(border-color, disabled-outline-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--selected &::before {
|
||
|
|
@include token-utils.create-token-slot(border-width, flat-selected-outline-width);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Keeps basic listbox chips looking consistent with the other variations. Listbox chips don't
|
||
|
|
// inherit the font size, because they wrap the label in a `button` that has user agent styles.
|
||
|
|
.mat-mdc-basic-chip & {
|
||
|
|
font: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Moved out into variables, because the selectors are too long.
|
||
|
|
$with-graphic: '.mdc-evolution-chip--with-primary-graphic';
|
||
|
|
$with-trailing: '.mdc-evolution-chip--with-trailing-action';
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip#{$with-trailing} & {
|
||
|
|
padding-left: $_action-padding;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mat-mdc-standard-chip#{$with-trailing} & {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: $_action-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mat-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--with-avatar#{$with-graphic} & {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: $_action-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic} & {
|
||
|
|
padding-left: $_action-padding;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__action--trailing {
|
||
|
|
position: relative;
|
||
|
|
overflow: visible;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(color, with-trailing-icon-trailing-icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--disabled & {
|
||
|
|
@include token-utils.create-token-slot(color,
|
||
|
|
with-trailing-icon-disabled-trailing-icon-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Moved out into variables, because the selectors are too long.
|
||
|
|
$with-graphic: '.mdc-evolution-chip--with-primary-graphic';
|
||
|
|
$with-trailing: '.mdc-evolution-chip--with-trailing-action';
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip#{$with-trailing} & {
|
||
|
|
padding-left: $_trailing-action-padding;
|
||
|
|
padding-right: $_trailing-action-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: $_trailing-action-padding;
|
||
|
|
padding-right: $_trailing-action-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: $_avatar-trailing-padding;
|
||
|
|
padding-right: $_avatar-trailing-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: $_avatar-trailing-padding;
|
||
|
|
padding-right: $_avatar-trailing-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__text-label {
|
||
|
|
@include vendor-prefixes.user-select(none);
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
.mat-mdc-standard-chip & {
|
||
|
|
@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(font-weight, label-text-weight);
|
||
|
|
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(color, label-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(color, selected-label-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--disabled &,
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled & {
|
||
|
|
@include token-utils.create-token-slot(color, disabled-label-text-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__graphic {
|
||
|
|
align-items: center;
|
||
|
|
display: inline-flex;
|
||
|
|
justify-content: center;
|
||
|
|
overflow: hidden;
|
||
|
|
pointer-events: none;
|
||
|
|
position: relative;
|
||
|
|
flex: 1 0 auto;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
.mat-mdc-standard-chip & {
|
||
|
|
@include token-utils.create-token-slot(width, with-avatar-avatar-size);
|
||
|
|
@include token-utils.create-token-slot(height, with-avatar-avatar-size);
|
||
|
|
@include token-utils.create-token-slot(font-size, with-avatar-avatar-size);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--selecting & {
|
||
|
|
transition: width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Moved out into variables, because the selectors are too long.
|
||
|
|
$with-icon: '.mdc-evolution-chip--with-primary-icon';
|
||
|
|
$with-graphic: '.mdc-evolution-chip--with-primary-graphic';
|
||
|
|
$with-trailing: '.mdc-evolution-chip--with-trailing-action';
|
||
|
|
|
||
|
|
.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(#{$with-icon}) & {
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip#{$with-graphic} & {
|
||
|
|
padding-left: $_graphic-padding;
|
||
|
|
padding-right: $_graphic-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--with-avatar#{$with-graphic} & {
|
||
|
|
padding-left: $_avatar-leading-padding;
|
||
|
|
padding-right: $_avatar-trailing-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic} & {
|
||
|
|
padding-left: $_avatar-trailing-padding;
|
||
|
|
padding-right: $_avatar-leading-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: $_graphic-padding;
|
||
|
|
padding-right: $_graphic-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: $_avatar-leading-padding;
|
||
|
|
padding-right: $_avatar-trailing-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
|
||
|
|
padding-left: $_avatar-trailing-padding;
|
||
|
|
padding-right: $_avatar-leading-padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__checkmark {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
height: $_checkmark-size;
|
||
|
|
width: $_checkmark-size;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(color, with-icon-selected-icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--disabled & {
|
||
|
|
@include token-utils.create-token-slot(color, with-icon-disabled-icon-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--selecting & {
|
||
|
|
transition: transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
transform: translate(-75%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--selected & {
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__checkmark-svg {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__checkmark-path {
|
||
|
|
stroke-width: 2px;
|
||
|
|
stroke-dasharray: 29.7833385;
|
||
|
|
stroke-dashoffset: 29.7833385;
|
||
|
|
stroke: currentColor;
|
||
|
|
|
||
|
|
.mdc-evolution-chip--selecting & {
|
||
|
|
transition: stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--selected & {
|
||
|
|
stroke-dashoffset: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
// SVG colors won't be changed in high contrast mode and since the checkmark is white
|
||
|
|
// by default, it'll blend in with the background in black-on-white mode. Override the
|
||
|
|
// color to ensure that it's visible. We need !important, because the theme styles are
|
||
|
|
// very specific.
|
||
|
|
stroke: CanvasText !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__icon--trailing {
|
||
|
|
.mat-mdc-standard-chip & {
|
||
|
|
height: $_trailing-icon-size;
|
||
|
|
width: $_trailing-icon-size;
|
||
|
|
font-size: $_trailing-icon-size;
|
||
|
|
}
|
||
|
|
|
||
|
|
$disabled-icon-opacity: null;
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
$disabled-icon-opacity:
|
||
|
|
token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
// If the trailing icon is a chip-remove button, we have to factor in the trailing action
|
||
|
|
// opacity as well as the disabled opacity.
|
||
|
|
.mdc-evolution-chip--disabled &.mat-mdc-chip-remove {
|
||
|
|
@include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) {
|
||
|
|
$action-opacity: token-utils.get-token-variable(trailing-action-opacity);
|
||
|
|
opacity: calc(#{$action-opacity} * #{$disabled-icon-opacity});
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
$action-focus-opacity: token-utils.get-token-variable(trailing-action-focus-opacity);
|
||
|
|
opacity: calc(#{$action-focus-opacity} * #{$disabled-icon-opacity});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip {
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
@include token-utils.create-token-slot(border-radius, container-shape-radius);
|
||
|
|
@include token-utils.create-token-slot(height, container-height);
|
||
|
|
|
||
|
|
&:not(.mdc-evolution-chip--disabled) {
|
||
|
|
@include token-utils.create-token-slot(background-color, elevated-container-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-evolution-chip--disabled {
|
||
|
|
@include token-utils.create-token-slot(background-color, elevated-disabled-container-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) {
|
||
|
|
@include token-utils.create-token-slot(background-color, elevated-selected-container-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-evolution-chip--selected.mdc-evolution-chip--disabled {
|
||
|
|
@include token-utils.create-token-slot(background-color,
|
||
|
|
flat-disabled-selected-container-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
outline: solid 1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__icon--primary {
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
.mat-mdc-standard-chip & {
|
||
|
|
@include token-utils.create-token-slot(border-radius, with-avatar-avatar-shape-radius);
|
||
|
|
@include token-utils.create-token-slot(width, with-icon-icon-size);
|
||
|
|
@include token-utils.create-token-slot(height, with-icon-icon-size);
|
||
|
|
@include token-utils.create-token-slot(font-size, with-icon-icon-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--selected & {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(color, with-icon-icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip.mdc-evolution-chip--disabled & {
|
||
|
|
@include token-utils.create-token-slot(color, with-icon-disabled-icon-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// The highlighted attribute is used to make the chip appear as selected on-demand,
|
||
|
|
// aside from showing the selected indicator. We achieve this by re-mapping the base
|
||
|
|
// tokens to the highlighted ones. Note that we only need to do this for the tokens
|
||
|
|
// that we don't re-implement ourselves below.
|
||
|
|
// TODO(crisbeto): with some future refactors we may be able to clean this up.
|
||
|
|
.mat-mdc-chip-highlighted {
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
$highlighted-remapped-tokens: (
|
||
|
|
with-icon-icon-color: with-icon-selected-icon-color,
|
||
|
|
elevated-container-color: elevated-selected-container-color,
|
||
|
|
label-text-color: selected-label-text-color,
|
||
|
|
outline-width: flat-selected-outline-width,
|
||
|
|
);
|
||
|
|
|
||
|
|
@each $selected, $base in $highlighted-remapped-tokens {
|
||
|
|
#{token-utils.get-token-variable-name($selected)}: token-utils.get-token-variable($base);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add additional slots for the MDC chip tokens, needed in Angular Material.
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
|
||
|
|
.mat-mdc-chip-focus-overlay {
|
||
|
|
@include token-utils.create-token-slot(background, focus-state-layer-color);
|
||
|
|
|
||
|
|
.mat-mdc-chip-selected &,
|
||
|
|
.mat-mdc-chip-highlighted & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-focus-state-layer-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip:hover & {
|
||
|
|
@include token-utils.create-token-slot(background, hover-state-layer-color);
|
||
|
|
@include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-selected:hover,
|
||
|
|
.mat-mdc-chip-highlighted:hover & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-hover-state-layer-color);
|
||
|
|
@include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip.cdk-focused & {
|
||
|
|
@include token-utils.create-token-slot(background, focus-state-layer-color);
|
||
|
|
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-selected.cdk-focused &,
|
||
|
|
.mat-mdc-chip-highlighted.cdk-focused & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-focus-state-layer-color);
|
||
|
|
@include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--disabled:not(.mdc-evolution-chip--selected) .mat-mdc-chip-avatar {
|
||
|
|
@include token-utils.create-token-slot(opacity, with-avatar-disabled-avatar-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing {
|
||
|
|
@include token-utils.create-token-slot(
|
||
|
|
opacity, with-trailing-icon-disabled-trailing-icon-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip--disabled.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark {
|
||
|
|
@include token-utils.create-token-slot(opacity, with-icon-disabled-icon-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) {
|
||
|
|
// Historically, MDC did not support disabled chips, so we needed our own disabled styles.
|
||
|
|
// Now that MDC supports disabled styles, we should switch to using theirs.
|
||
|
|
.mat-mdc-standard-chip {
|
||
|
|
&.mdc-evolution-chip--disabled {
|
||
|
|
@include token-utils.create-token-slot(opacity, disabled-container-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-evolution-chip--selected,
|
||
|
|
&.mat-mdc-chip-highlighted {
|
||
|
|
.mdc-evolution-chip__icon--trailing {
|
||
|
|
@include token-utils.create-token-slot(color, selected-trailing-icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing {
|
||
|
|
@include token-utils.create-token-slot(color, selected-disabled-trailing-icon-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-remove {
|
||
|
|
@include token-utils.create-token-slot(opacity, trailing-action-opacity);
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
@include token-utils.create-token-slot(opacity, trailing-action-focus-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
@include token-utils.create-token-slot(background-color, trailing-action-state-layer-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover::after {
|
||
|
|
@include token-utils.create-token-slot(opacity, trailing-action-hover-state-layer-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus::after {
|
||
|
|
@include token-utils.create-token-slot(opacity, trailing-action-focus-state-layer-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-selected .mat-mdc-chip-remove::after,
|
||
|
|
.mat-mdc-chip-highlighted .mat-mdc-chip-remove::after {
|
||
|
|
@include token-utils.create-token-slot(background-color,
|
||
|
|
selected-trailing-action-state-layer-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-standard-chip {
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
|
||
|
|
// MDC sets `overflow: hidden` on these elements in order to truncate the text. This is
|
||
|
|
// unnecessary since our chips don't truncate their text and it makes it difficult to style
|
||
|
|
// the strong focus indicators so we need to override it.
|
||
|
|
.mdc-evolution-chip__cell--primary,
|
||
|
|
.mdc-evolution-chip__action--primary,
|
||
|
|
.mat-mdc-chip-action-label {
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
// MDC sizes and positions this element using `width`, `height` and `padding`.
|
||
|
|
// This usually works, but it's common for apps to add `box-sizing: border-box`
|
||
|
|
// to all elements on the page which can cause the graphic to be clipped.
|
||
|
|
// Set an explicit `box-sizing` in order to avoid these issues.
|
||
|
|
.mat-mdc-chip-graphic,
|
||
|
|
.mat-mdc-chip-trailing-icon {
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
&._mat-animation-noopable {
|
||
|
|
&,
|
||
|
|
.mdc-evolution-chip__graphic,
|
||
|
|
.mdc-evolution-chip__checkmark,
|
||
|
|
.mdc-evolution-chip__checkmark-path {
|
||
|
|
// MDC listens to `transitionend` events on some of these
|
||
|
|
// elements so we can't disable the transitions completely.
|
||
|
|
transition-duration: 1ms;
|
||
|
|
animation-duration: 1ms;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// MDC's focus and hover indication is handled through their ripple which we currently
|
||
|
|
// don't use due to size concerns so we have to re-implement it ourselves.
|
||
|
|
.mat-mdc-chip-focus-overlay {
|
||
|
|
@include layout-common.fill;
|
||
|
|
pointer-events: none;
|
||
|
|
opacity: 0;
|
||
|
|
border-radius: inherit;
|
||
|
|
transition: opacity 150ms linear;
|
||
|
|
|
||
|
|
._mat-animation-noopable & {
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-basic-chip & {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// The ripple container should match the bounds of the entire chip.
|
||
|
|
.mat-mdc-chip .mat-ripple.mat-mdc-chip-ripple {
|
||
|
|
@include layout-common.fill;
|
||
|
|
|
||
|
|
// Disable pointer events for the ripple container and state overlay 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;
|
||
|
|
|
||
|
|
// Inherit the border radius from the parent so that state overlay and ripples don't exceed the
|
||
|
|
// parent button boundaries.
|
||
|
|
border-radius: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-avatar {
|
||
|
|
// In case an icon or text is used as an avatar.
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1;
|
||
|
|
|
||
|
|
// Technically the avatar is only supposed to have an image, but we also allow for icons.
|
||
|
|
// Set the color so the icons inherit the correct color.
|
||
|
|
color: var(--mdc-chip-with-icon-icon-color, currentColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Required for the strong focus indicator to fill the chip.
|
||
|
|
.mat-mdc-chip {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
// `.mat-mdc-chip-action-label` below sets a `z-index: 1` to put the label above the focus
|
||
|
|
// overlay, but that can also cause it to appear above other elements like sticky columns
|
||
|
|
// (see #26793). Set an explicit `z-index` to prevent the label from leaking out.
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-action-label {
|
||
|
|
// MDC centers the text, but we have a lot of internal customers who have it at the start.
|
||
|
|
text-align: left;
|
||
|
|
|
||
|
|
// Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
|
||
|
|
// does not affect the color of the text. Material spec requires state layer to not interfere with
|
||
|
|
// text color.
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
// When a chip has a trailing action, it'll have two focusable elements when navigating with
|
||
|
|
// the arrow keys: the primary action and the trailing one. If that's the case, we apply
|
||
|
|
// `position: relative` to the primary action container so that the indicators is only around
|
||
|
|
// the text label. This allows for it to be distinguished from the indicator on the trailing icon.
|
||
|
|
.mat-mdc-chip.mdc-evolution-chip--with-trailing-action & {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-primary-focus-indicator {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// For the chip element, default inset/offset values are necessary to ensure that
|
||
|
|
// the focus indicator is sufficiently contrastive and renders appropriately.
|
||
|
|
.mat-focus-indicator::before {
|
||
|
|
$default-border-width: focus-indicators-private.$default-border-width;
|
||
|
|
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
|
||
|
|
$offset: calc(#{$border-width} + 2px);
|
||
|
|
margin: calc(#{$offset} * -1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-chip-remove {
|
||
|
|
&::before {
|
||
|
|
$default-border-width: focus-indicators-private.$default-border-width;
|
||
|
|
$offset: var(--mat-focus-indicator-border-width, #{$default-border-width});
|
||
|
|
margin: calc(#{$offset} * -1);
|
||
|
|
|
||
|
|
// MDC sets a padding a on the chip button which stretches out the focus indicator.
|
||
|
|
left: 8px;
|
||
|
|
right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Used as a state overlay.
|
||
|
|
&::after {
|
||
|
|
$_touch-target-size: 48px;
|
||
|
|
$_ripple-size: 24px;
|
||
|
|
$offset: 3px;
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 0 - $offset;
|
||
|
|
bottom: 0 - $offset;
|
||
|
|
left: 8px - $offset;
|
||
|
|
right: 8px - $offset;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: calc(($_touch-target-size - $_ripple-size)/2);
|
||
|
|
margin: calc((($_touch-target-size - $_ripple-size)/2) * -1);
|
||
|
|
// stylelint-disable material/no-prefixes
|
||
|
|
background-clip: content-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-icon {
|
||
|
|
width: $_trailing-icon-size;
|
||
|
|
height: $_trailing-icon-size;
|
||
|
|
font-size: $_trailing-icon-size;
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-chip-edit-input {
|
||
|
|
cursor: text;
|
||
|
|
display: inline-block;
|
||
|
|
color: inherit;
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Single-selection chips show their selected state using a background color which won't be visible
|
||
|
|
// in high contrast mode. This isn't necessary in multi-selection since there's a checkmark.
|
||
|
|
.mat-mdc-chip-selected:not(.mat-mdc-chip-multiple) {
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
outline-width: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// The chip has multiple focus targets so we have to put the indicator on
|
||
|
|
// a separate element, rather than on the focusable element itself.
|
||
|
|
.mat-mdc-chip-action:focus .mat-focus-indicator::before {
|
||
|
|
content: '';
|
||
|
|
}
|