88 lines
1.8 KiB
CSS
88 lines
1.8 KiB
CSS
@import '../colors.css';
|
|
@import '../variables.css';
|
|
@import '../input/config.css';
|
|
@import './config.css';
|
|
|
|
.autocomplete {
|
|
composes: reset from '../helpers.css';
|
|
padding: var(--unit) 0;
|
|
position: relative;
|
|
|
|
&.focus {
|
|
& .suggestions {
|
|
box-shadow: var(--zdepth-shadow-1);
|
|
max-height: var(--autocomplete-overflow-max-height);
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.values {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 0 calc(var(--unit) / 2) 0;
|
|
}
|
|
|
|
.value {
|
|
margin: var(--autocomplete-value-margin);
|
|
}
|
|
|
|
.suggestions {
|
|
background-color: var(--autocomplete-suggestions-background);
|
|
list-style: none;
|
|
max-height: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
position: absolute;
|
|
transition-duration: var(--animation-duration);
|
|
transition-property: max-height, box-shadow;
|
|
transition-timing-function: var(--animation-curve-default);
|
|
visibility: hidden;
|
|
width: 100%;
|
|
z-index: var(--z-index-high);
|
|
|
|
&:not(.up) {
|
|
margin-top: calc(-1 * var(--input-padding));
|
|
}
|
|
|
|
&.up {
|
|
bottom: 0;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.suggestion {
|
|
cursor: pointer;
|
|
font-size: var(--input-field-font-size);
|
|
padding: var(--autocomplete-suggestion-padding);
|
|
|
|
&.active {
|
|
background-color: var(--autocomplete-suggestion-active-background);
|
|
}
|
|
}
|
|
|
|
.input {
|
|
position: relative;
|
|
|
|
&::after {
|
|
border-left: var(--autocomplete-border-size) solid transparent;
|
|
border-right: var(--autocomplete-border-size) solid transparent;
|
|
border-top: var(--autocomplete-border-size) solid var(--input-text-bottom-border-color);
|
|
content: '';
|
|
height: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: var(--input-chevron-offset);
|
|
top: 50%;
|
|
transition: transform var(--animation-duration) var(--animation-curve-default);
|
|
width: 0;
|
|
}
|
|
}
|