fine-true/lib/select/index.css

A small and beautiful Vue3 version of the UI Library

.fine-select{position:relative;background-color:var(--fine-select-background-color);border:var(--fine-select-border);border-radius:var(--fine-select-border-radius);cursor:pointer;transition:border var(--fine-select-transition-duration),box-shadow var(--fine-select-transition-duration);display:flex;justify-content:space-between;align-items:center}.fine-select.fine-select-disabled{pointer-events:none;opacity:.5}.fine-select.fine-select-on-focus{border-color:var(--fine-select-on-focus-border-color);box-shadow:var(--fine-select-on-focus-box-shadow)}.fine-select .fine-select-icon-container{position:relative;display:block;height:16px;width:16px;line-height:16px}.fine-select .fine-select-icon-container .fine-select-arrow-off,.fine-select .fine-select-icon-container .fine-select-arrow-on{font-size:14px;display:inline-block;transition:transform var(--fine-select-transition-duration);color:var(--fine-select-icon-color)}.fine-select .fine-select-icon-container .fine-select-arrow-off{transform:rotate(0deg)}.fine-select .fine-select-icon-container .fine-select-arrow-on{transform:rotate(90deg)}.fine-select .fine-select-icon-container .fine-select-clear-icon{opacity:0;position:absolute;top:1px;right:1px;font-size:14px;color:var(--fine-select-icon-color);z-index:1}.fine-select .fine-select-placeholder{position:absolute;top:0;color:var(--fine-select-placeholder-color)}.fine-select:hover .fine-select-clear-icon{opacity:1}.fine-select.fine-select-icon-has-value:hover .fine-select-arrow-off,.fine-select.fine-select-icon-has-value:hover .fine-select-arrow-on{opacity:0}.fine-popover.fine-select-popover .fine-popover-inner{padding:5px 0;max-height:282px;overflow:auto}.fine-popover.fine-select-popover .fine-popover-inner::-webkit-scrollbar{width:5px}.fine-popover.fine-select-popover .fine-popover-inner::-webkit-scrollbar-thumb{background-color:#999b9c;border-radius:5px}.fine-select-container{display:flex;align-items:flex-start;flex-wrap:wrap}.fine-select-container .fine-select-selection{color:var(--fine-select-selection-color);margin-right:5px}.fine-select-container .fine-tag{border-width:0;background-color:var(--fine-select-tag-background-color)}.fine-select-container .fine-select-input{flex:1;width:100%;outline:0;padding:0;border:0;background-color:transparent;color:var(--fine-select-input-color)}.fine-select-size-large{padding:var(--fine-select-size-large-padding-y) var(--fine-select-size-large-padding-x)}.fine-select-size-large .fine-select-placeholder{left:var(--fine-select-size-large-padding-x)}.fine-select-size-large .fine-select-placeholder,.fine-select-size-large .fine-select-selection{font-size:var(--fine-select-size-large-font-size);line-height:var(--fine-select-size-large-inner-height)}.fine-select-size-large .fine-select-container .fine-tag{margin:2px 4px 2px 0}.fine-select-size-large .fine-select-container .fine-select-input{height:var(--fine-select-size-large-inner-height)}.fine-select-size-default{padding:var(--fine-select-size-default-padding-y) var(--fine-select-size-default-padding-x)}.fine-select-size-default .fine-select-placeholder{left:var(--fine-select-size-default-padding-x)}.fine-select-size-default .fine-select-placeholder,.fine-select-size-default .fine-select-selection{font-size:var(--fine-select-size-default-font-size);line-height:var(--fine-select-size-default-inner-height)}.fine-select-size-default .fine-select-container .fine-tag{margin:2px 2px 2px 0}.fine-select-size-default .fine-select-container .fine-select-input{height:var(--fine-select-size-default-inner-height)}.fine-select-size-small{padding:var(--fine-select-size-small-padding-y) var(--fine-select-size-small-padding-x)}.fine-select-size-small .fine-select-placeholder{left:var(--fine-select-size-small-padding-x)}.fine-select-size-small .fine-select-placeholder,.fine-select-size-small .fine-select-selection{font-size:var(--fine-select-size-small-font-size);line-height:var(--fine-select-size-small-inner-height)}.fine-select-size-small .fine-select-container .fine-tag{margin:1px 2px 1px 0}.fine-select-size-small .fine-select-container .fine-select-input{height:var(--fine-select-size-small-inner-height)}