vue-devui/editable-select/style.css

DevUI components based on Vite and Vue3

.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #cfd0d3)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.5)}to{transform:rotate(360deg) scale(1)}}.devui-loading__mask{z-index:var(--devui-z-index-full-page-overlay, 1080);position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #d7d8da);opacity:.3}.devui-loading__wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:var(--devui-z-index-full-page-overlay, 1080)}.devui-loading--hidden{overflow:hidden}.devui-loading__text{margin-left:10px}.devui-loading__area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-loading__busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-loading__busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-loading__busy-default-spinner .devui-loading__bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-loading__busy-default-spinner .devui-loading__bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-editable-select-input{height:32px;font-size:var(--devui-font-size, 12px)}.devui-editable-select-input--sm{height:24px;font-size:var(--devui-font-size-sm, 12px)}.devui-editable-select-input--lg{height:40px;font-size:var(--devui-font-size-lg, 14px)}.devui-editable-select-input--open .devui-editable-select__arrow-icon{transform:rotate(180deg)}.devui-editable-select-input__wrapper{display:flex;align-items:center;justify-content:center;position:relative;height:100%;padding:0 8px;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(.devui-editable-select-input__wrapper--focus):hover{border-color:var(--devui-form-control-line-hover, #9b9fa8)}.devui-editable-select-input__wrapper--focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-editable-select-input__wrapper--disabled{color:var(--devui-disabled-text, #cfd0d3);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.devui-editable-select-input__wrapper--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-editable-select-input__wrapper--disabled .devui-editable-select-input__inner{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-editable-select-input__inner{width:100%;height:100%;padding:4px 0;border:none;background:none;outline:none}.devui-editable-select-input__placeholder{width:calc(100% - 16px);position:absolute;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);top:50%}.devui-editable-select-input__suffix{height:100%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--devui-font-size, 12px)}.devui-editable-select-input__suffix>span{align-items:center}.devui-editable-select-input__suffix .devui-editable-select__clear-icon{pointer-events:auto;display:flex;cursor:pointer}.devui-editable-select-input__suffix .devui-editable-select__arrow-icon{display:flex;transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-editable-select__dropdown{margin:8px 0}.devui-editable-select__inner{padding:12px;margin:0;list-style:none;overflow-y:auto}.devui-editable-select__item{cursor:pointer;user-select:none;line-height:20px;padding:8px 12px;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-editable-select__item:not(:first-child){margin-top:4px}.devui-editable-select__item--disabled{cursor:not-allowed;color:var(--devui-disabled-text, #cfd0d3)}.devui-editable-select__item--selected:not(.devui-editable-select__item--disabled):not(.devui-editable-select__item--no-data-tip){color:var(--devui-list-item-active-text, #252b3a);background-color:var(--devui-list-item-active-bg, #f2f5fc)}.devui-editable-select__item--last-selected{background:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #252b3a)}.devui-editable-select__item--hover:not(.devui-editable-select__item--selected){background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #252b3a)}.devui-editable-select__item:not(.devui-editable-select__item--disabled):not(.devui-editable-select__item--selected):not(.devui-editable-select__item--no-data-tip):hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #252b3a)}.devui-editable-select__item--no-data-tip{text-align:center;cursor:not-allowed;user-select:none;color:var(--devui-disabled-text, #cfd0d3);font-size:var(--devui-font-size, 12px);line-height:22px;padding:0}