balm-ui/components/autocomplete/autocomplete.css

A modular and customizable UI library based on Material Design and Vue 3

.mdc-autocomplete{display:inline-flex;position:relative}.mdc-autocomplete .mdc-text-field__ripple:after,.mdc-autocomplete .mdc-text-field__ripple:before{border-radius:4px 4px 0 0;height:100%;left:0;top:0;width:100%}.mdc-autocomplete--fullwidth{display:flex;width:100%}.mdc-autocomplete__menu{left:0;max-height:calc(50vh - 32px);position:absolute;top:54px}.mdc-autocomplete__menu.mdc-menu-surface--open{display:block}.mdc-autocomplete__menu .mdc-deprecated-list{width:100%}.mdc-autocomplete__menu .mdc-deprecated-list-item{height:30px;line-height:30px;padding:0 10px}.mdc-autocomplete__menu .mdc-deprecated-list-item strong{font-weight:700}.mdc-autocomplete__menu .mdc-deprecated-list-item.selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu{align-items:center;background-color:transparent;bottom:0!important;box-shadow:none;flex-direction:row;justify-content:space-around;left:0!important;max-height:100vh!important;max-width:100vw!important;position:fixed!important;right:0;top:0!important}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu .mdc-deprecated-list{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);color:#000;color:var(--mdc-theme-on-surface,#000);width:560px;z-index:6}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open{display:flex}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open .mdc-drawer-scrim{background-color:rgba(0,0,0,.32);display:block}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open .mdc-deprecated-list{max-height:100%;overflow-y:scroll}@media (max-width:599px){.mdc-autocomplete--in-dialog .mdc-autocomplete__menu .mdc-deprecated-list{width:100%}}