99 lines
2.1 KiB
CSS
99 lines
2.1 KiB
CSS
@import '../colors.css';
|
|
@import '../variables.css';
|
|
@import '../input/config.css';
|
|
@import './config.css';
|
|
|
|
.autocomplete {
|
|
padding: var(--unit) 0;
|
|
position: relative;
|
|
|
|
@apply --reset;
|
|
}
|
|
|
|
.clear {
|
|
cursor: pointer;
|
|
display: block;
|
|
left: -4px;
|
|
padding: 4px;
|
|
position: absolute;
|
|
top: 12px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.withclear input {
|
|
text-indent: 28px;
|
|
}
|
|
|
|
.withclear label {
|
|
transition-property: top, left, font-size, color;
|
|
}
|
|
|
|
.inputFilled {
|
|
composes: filled from '../input/theme.css';
|
|
}
|
|
|
|
.withclear input:not(:focus):not(.inputFilled) ~ label {
|
|
left: 28px;
|
|
}
|
|
|
|
.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);
|
|
box-shadow: var(--zdepth-shadow-1);
|
|
list-style: none;
|
|
max-height: 1px;
|
|
-ms-overflow-style: none;
|
|
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);
|
|
width: 100%;
|
|
z-index: var(--z-index-highest);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.inputInputElement {
|
|
padding: var(--input-field-padding) calc(3 * var(--input-chevron-offset)) var(--input-field-padding) 0;
|
|
}
|