vexip-ui/css/option.css

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

.vxp-option-vars{--vxp-option-color:var(--vxp-content-color-base);--vxp-option-color-hitting:var(--vxp-color-primary-base);--vxp-option-color-selected:var(--vxp-color-primary-base);--vxp-option-color-disabled:var(--vxp-fill-color-disabled);--vxp-option-bg-color:transparent;--vxp-option-bg-color-hover:var(--vxp-fill-color-humble);--vxp-option-bg-color-hitting:var(--vxp-option-bg-color-hover);--vxp-option-bg-color-selected:var(--vxp-color-primary-opacity-8);--vxp-option-bg-color-disabled:var(--vxp-option-bg-color);--vxp-option-d-color:var(--vxp-border-color-light-2);--vxp-option-divider:var(--vxp-border-shape) var(--vxp-option-d-color);--vxp-option-group-color:var(--vxp-content-color-secondary);--vxp-option-group-font-size:var(--vxp-font-size-secondary);--vxp-option-label-v-padding:5px;--vxp-option-label-h-padding:16px;--vxp-option-min-height:32px}.vxp-option{display:inline-flex;align-items:center;width:100%;min-height:var(--vxp-option-min-height);padding:var(--vxp-option-label-v-padding) var(--vxp-option-label-h-padding);color:var(--vxp-option-color);white-space:nowrap;list-style:none;cursor:pointer;background-color:var(--vxp-option-bg-color);transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-option:not(.vxp-option--no-hover):hover{background-color:var(--vxp-option-bg-color-hover)}.vxp-option--hitting{color:var(--vxp-option-color-hitting);background-color:var(--vxp-option-bg-color-hitting)}.vxp-option--selected,.vxp-option--selected:hover,.vxp-option--selected:not(.vxp-option--selected--no-hover):hover{color:var(--vxp-option-color-selected);background-color:var(--vxp-option-bg-color-selected)}.vxp-option--disabled{cursor:not-allowed}.vxp-option--disabled,.vxp-option--disabled:hover{color:var(--vxp-option-color-disabled);background-color:var(--vxp-option-bg-color)}.vxp-option--divided{position:relative;margin-bottom:calc(var(--vxp-option-label-v-padding) * 2)}.vxp-option--divided::after{position:absolute;bottom:calc(var(--vxp-option-label-v-padding) * -1 - .5px);display:block;width:100%;height:0;margin:0;margin-inline:calc(var(--vxp-option-label-h-padding) * -1);pointer-events:none;content:"";border-bottom:var(--vxp-option-divider)}.vxp-option-group{white-space:nowrap;list-style:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-option-group__label{padding:var(--vxp-option-label-v-padding) var(--vxp-option-label-h-padding);font-size:var(--vxp-option-group-font-size);color:var(--vxp-option-group-color)}.vxp-option-group__list{position:relative;display:flex;flex-direction:column;padding:0}.vxp-option-group--divided .vxp-option-group__list{padding-bottom:10px}.vxp-option-group--divided .vxp-option-group__list::after{position:absolute;right:0;bottom:var(--vxp-option-label-v-padding);left:0;display:block;height:1px;font-size:var(--vxp-option-group-font-size);content:"";background-color:var(--vxp-option-d-color)}