67 lines
1.2 KiB
SCSS
67 lines
1.2 KiB
SCSS
|
// Ensures that the internal chip container spans the entire outer container width, if the
|
||
|
|
// outer container width is customized. This is used by some wrapper components in g3.
|
||
|
|
.mat-mdc-chip-set {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip-set__chips {
|
||
|
|
min-width: 100%;
|
||
|
|
margin-left: -8px;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip {
|
||
|
|
margin: 4px 0 4px 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
.mdc-evolution-chip-set__chips {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: -8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip-set__chips {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Angular Material supports vertically-stacked chips, which MDC does not.
|
||
|
|
.mat-mdc-chip-set-stacked {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
|
||
|
|
.mat-mdc-chip {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__graphic {
|
||
|
|
flex-grow: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-evolution-chip__action--primary {
|
||
|
|
flex-basis: 100%;
|
||
|
|
justify-content: start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input.mat-mdc-chip-input {
|
||
|
|
flex: 1 0 150px;
|
||
|
|
margin-left: 8px;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
}
|