57 lines
1.7 KiB
SCSS
57 lines
1.7 KiB
SCSS
|
@use '@angular/cdk';
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
|
||
|
|
|
||
|
|
// Even though we don't use the MDC styles, we need to keep the classes in the
|
||
|
|
// DOM for the Gmat versions to work. We need to bump up the specificity here
|
||
|
|
// so that it's higher than MDC's styles.
|
||
|
|
div.mat-mdc-autocomplete-panel {
|
||
|
|
width: 100%; // Ensures that the panel matches the overlay width.
|
||
|
|
max-height: 256px; // Prevents lists with a lot of option from growing too high.
|
||
|
|
visibility: hidden;
|
||
|
|
transform-origin: center top;
|
||
|
|
overflow: auto;
|
||
|
|
padding: 8px 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
// Workaround in case other MDC menu surface styles bleed in.
|
||
|
|
position: static;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) {
|
||
|
|
@include token-utils.create-token-slot(border-radius, container-shape);
|
||
|
|
@include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
|
||
|
|
@include token-utils.create-token-slot(background-color, background-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
outline: solid 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) & {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-autocomplete-panel-above & {
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
transform-origin: center bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
// These classes are used to toggle the panel visibility depending on whether it has any options.
|
||
|
|
&.mat-mdc-autocomplete-visible {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mat-mdc-autocomplete-hidden {
|
||
|
|
visibility: hidden;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Prevent the overlay host node from affecting its surrounding layout.
|
||
|
|
mat-autocomplete {
|
||
|
|
display: none;
|
||
|
|
}
|