@aws-amplify/ui
Version:
`@aws-amplify/ui` contains low-level logic & styles for stand-alone usage or re-use in framework-specific implementations.
50 lines (48 loc) • 2.47 kB
CSS
@layer amplify.components {
.amplify-autocomplete__menu__option, .amplify-autocomplete__menu--loading, .amplify-autocomplete__menu--empty {
padding-block: var(--amplify-components-autocomplete-menu-space-shared-padding-block);
padding-inline: var(--amplify-components-autocomplete-menu-space-shared-padding-inline);
}
.amplify-autocomplete {
position: relative;
display: block;
}
.amplify-autocomplete__menu {
position: absolute;
z-index: 999999;
width: var(--amplify-components-autocomplete-menu-width);
margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
background-color: var(--amplify-components-autocomplete-menu-background-color);
border-color: var(--amplify-components-autocomplete-menu-border-color);
border-width: var(--amplify-components-autocomplete-menu-border-width);
border-style: var(--amplify-components-autocomplete-menu-border-style);
border-radius: var(--amplify-components-autocomplete-menu-border-radius);
}
.amplify-autocomplete__menu--empty {
display: var(--amplify-components-autocomplete-menu-empty-display);
}
.amplify-autocomplete__menu--loading {
display: var(--amplify-components-autocomplete-menu-loading-display);
align-items: var(--amplify-components-autocomplete-menu-loading-align-items);
gap: var(--amplify-components-autocomplete-menu-loading-gap);
}
.amplify-autocomplete__menu__options {
position: relative;
overscroll-behavior: contain;
display: var(--amplify-components-autocomplete-menu-options-display);
flex-direction: var(--amplify-components-autocomplete-menu-options-flex-direction);
max-height: var(--amplify-components-autocomplete-menu-options-max-height);
}
.amplify-autocomplete__menu__option {
background-color: var(--amplify-components-autocomplete-menu-option-background-color);
color: var(--amplify-components-autocomplete-menu-option-color);
cursor: var(--amplify-components-autocomplete-menu-option-cursor);
transition-duration: var(--amplify-components-autocomplete-menu-option-transition-duration);
transition-property: var(--amplify-components-autocomplete-menu-option-transition-property);
transition-timing-function: var(--amplify-components-autocomplete-menu-option-transition-timing-function);
}
.amplify-autocomplete__menu__option--active {
background-color: var(--amplify-components-autocomplete-menu-option-active-background-color);
color: var(--amplify-components-autocomplete-menu-option-active-color);
}
}