vexip-ui/css/dropdown.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-dropdown-vars{--vxp-dropdown-color-selected:var(--vxp-color-primary-base);--vxp-dropdown-color-disabled:var(--vxp-content-color-disabled);--vxp-dropdown-bg-color:var(--vxp-bg-color-base);--vxp-dropdown-bg-color-hover:var(--vxp-fill-color-hover);--vxp-dropdown-bg-color-active:var(--vxp-dropdown-bg-color-hover);--vxp-dropdown-b-color:var(--vxp-border-color-light-2);--vxp-dropdown-radius:var(--vxp-radius-base);--vxp-dropdown-s-color:var(--vxp-shadow-color-base);--vxp-dropdown-shadow:var(--vxp-shadow-shape) var(--vxp-dropdown-s-color);--vxp-dropdown-d-color:var(--vxp-border-color-light-2);--vxp-dropdown-divider:var(--vxp-border-shape) var(--vxp-dropdown-d-color)}.vxp-dropdown{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-block}.vxp-dropdown,.vxp-dropdown *,.vxp-dropdown ::after,.vxp-dropdown ::before{box-sizing:border-box}.vxp-dropdown--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-dropdown--inherit{color:inherit}.vxp-dropdown__trigger{display:flex;min-width:100%;height:100%}.vxp-dropdown__popper--nested{padding:0}.vxp-dropdown .vxp-dropdown,.vxp-dropdown__popper .vxp-dropdown{width:100%}.vxp-dropdown__list{display:inline-block;min-width:70px;padding:5px 0;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxp-dropdown-bg-color);border:var(--vxp-border-shape) var(--vxp-dropdown-b-color);border-radius:var(--vxp-dropdown-radius);box-shadow:var(--vxp-dropdown-shadow)}.vxp-dropdown__item{position:relative;display:flex;align-items:center;min-height:32px;padding:5px 16px;white-space:nowrap;list-style:none;cursor:pointer;background-color:transparent;outline:0;transition:var(--vxp-transition-background)}.vxp-dropdown__item:focus,.vxp-dropdown__item:hover{background-color:var(--vxp-dropdown-bg-color-hover)}.vxp-dropdown__item--selected{color:var(--vxp-dropdown-color-selected)}.vxp-dropdown__item--disabled{color:var(--vxp-dropdown-color-disabled);cursor:not-allowed}.vxp-dropdown__item--disabled:focus,.vxp-dropdown__item--disabled:hover{background-color:transparent}.vxp-dropdown__item--divided{margin-bottom:10px}.vxp-dropdown__item--divided::after{position:absolute;bottom:-5.5px;left:0;display:block;width:100%;height:0;content:"";border-bottom:var(--vxp-dropdown-divider)}.vxp-dropdown__trigger .vxp-dropdown__item{width:100%}.vxp-dropdown__trigger--active .vxp-dropdown__item{background-color:var(--vxp-dropdown-bg-color-active)}