@zeit-ui/vue
Version:
A popular UI framework for Vue
1 lines • 2.91 kB
CSS
.expand-enter-active,.expand-leave-active{transition:height .2s ease;overflow:hidden}.expand-enter,.expand-leave-to{height:0}select:active,select:focus,select:hover{outline:none}.zi-select{color:var(--geist-foreground);border:1px solid var(--accents-2);box-shadow:none;background:transparent;background-image:none;height:2.5rem;line-height:2.5rem;font-size:.875rem;margin-right:-1.25rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;width:auto;padding:0 2.25rem 0 1rem;text-transform:none;transition:border .2s,background .2s,color .2s ease-out,box-shadow .2s ease}.zi-select:not(.disabled):focus-within,.zi-select:not(.disabled):hover{box-shadow:0 2px 6px rgba(0,0,0,.1);border-color:var(--accents-3)}.zi-select-container{display:inline-flex;border:1px solid var(--accents-2);border-radius:5px;height:2.5rem;line-height:2.5rem;outline:none;font-size:.75rem;user-select:none;text-transform:uppercase;font-weight:100;color:#000;background-color:var(--geist-background);white-space:nowrap;width:auto;min-width:10rem;overflow:hidden;position:relative;transition:border .2s,background .2s,color .2s ease-out,box-shadow .2s ease}.zi-select-container select{border:none;margin:0;width:100%;height:100%}.zi-select-container:not(.disabled):focus-within,.zi-select-container:not(.disabled):hover{box-shadow:0 2px 6px rgba(0,0,0,.1);border-color:var(--accents-7)}.zi-select-container:not(.disabled):focus-within .arrow-box,.zi-select-container:not(.disabled):hover .arrow-box{border-color:var(--accents-7)}.zi-select-container.simple{width:auto;min-width:unset}.zi-select-container .arrow-box{width:2.5rem;height:100%;display:inline-flex;justify-content:center;align-items:center;border-left:1px solid var(--accents-2);pointer-events:none;background-color:var(--geist-background);transition:border .2s,background .2s,color .2s ease-out,box-shadow .2s ease;position:absolute;right:0}.zi-select-container .arrow{display:inline-flex;width:.75rem;height:.75rem}.zi-select-container.disabled,.zi-select.disabled{cursor:not-allowed;opacity:.6}.zi-select-container.disabled select,.zi-select.disabled select{cursor:not-allowed}.zi-select-container.mini,.zi-select.mini{min-width:7.5rem}.zi-select-container.mini,.zi-select-container.mini select,.zi-select.mini,.zi-select.mini select{height:1.5rem;line-height:1.5rem;font-size:.75rem}.zi-select-container.mini .arrow-box,.zi-select.mini .arrow-box{width:1.875rem;border:none}.zi-select-container.mini .arrow,.zi-select.mini .arrow{border:none;width:.625rem;height:.625rem}.zi-select-container.small,.zi-select.small{min-width:9.375rem}.zi-select-container.small,.zi-select-container.small select,.zi-select.small,.zi-select.small select{height:2rem;line-height:2rem;font-size:.75rem}.zi-select-container.small .arrow-box,.zi-select.small .arrow-box{width:2.125rem;border:none}.zi-select-container.small .arrow,.zi-select.small .arrow{width:.625rem;height:.625rem}