vue-amazing-ui/lib/select/Select.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.slide-enter[data-v-3ddc7bae]{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.slide-enter-active[data-v-3ddc7bae]{animation-name:slideIn-3ddc7bae;animation-play-state:running}@keyframes slideIn-3ddc7bae{0%{transform:scaleY(.8);opacity:0}to{transform:scaleY(1);opacity:1}}.slide-leave[data-v-3ddc7bae]{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.slide-leave-active[data-v-3ddc7bae]{animation-name:slideOut-3ddc7bae;animation-play-state:running}@keyframes slideOut-3ddc7bae{0%{transform:scaleY(1);opacity:1}to{transform:scaleY(.8);opacity:0}}.select-wrap[data-v-3ddc7bae]{position:relative;display:inline-block;width:var(--select-width);height:var(--select-height);font-size:14px;font-weight:400;color:#000000e0;outline:none;cursor:pointer;transition:all .3s}.select-wrap:not(.select-disabled):hover .select-content-container[data-v-3ddc7bae]{border-color:var(--select-primary-color-hover)}.select-wrap .select-content-container[data-v-3ddc7bae]{position:relative;display:flex;padding:0 11px;border:1px solid #d9d9d9;border-radius:6px;background-color:#fff;width:100%;height:100%;outline:none;transition:all .2s cubic-bezier(.645,.045,.355,1)}.select-wrap .select-content-container[data-v-3ddc7bae]:after{display:inline-block;width:0;visibility:hidden;content:" ";line-height:calc(var(--select-height) - 2px)}.select-wrap .select-content-container .select-search[data-v-3ddc7bae]{position:absolute;inset:0 11px}.select-wrap .select-content-container .select-search .search-input[data-v-3ddc7bae]{margin:0;padding:0;width:100%;height:100%;caret-color:transparent;vertical-align:top;background:transparent;border:none;outline:none;appearance:none;opacity:0;cursor:pointer}.select-wrap .select-content-container .select-search .caret-show[data-v-3ddc7bae]{caret-color:auto}.select-wrap .select-content-container .select-item[data-v-3ddc7bae]{position:relative;padding-right:18px;flex:1;line-height:calc(var(--select-height) - 2px);-webkit-user-select:none;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s}.select-wrap .select-content-container .select-placeholder[data-v-3ddc7bae]{color:#00000040;transition:none;pointer-events:none}.select-wrap .select-content-container .select-item-hidden[data-v-3ddc7bae]{visibility:hidden}.select-wrap .select-content-container .icon-svg[data-v-3ddc7bae]{position:absolute;top:0;bottom:0;right:11px;margin:auto 0;display:inline-block;font-size:12px;color:#00000040;fill:currentColor;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.select-wrap .select-content-container .arrow-svg[data-v-3ddc7bae]{position:absolute;top:0;bottom:0;right:11px;margin:auto 0;display:inline-block;font-size:12px;color:#00000040;fill:currentColor;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform .3s,opacity .3s}.select-wrap .select-content-container .arrow-rotate[data-v-3ddc7bae]{transform:rotate(180deg)}.select-wrap .select-content-container .search-svg[data-v-3ddc7bae]{position:absolute;top:0;bottom:0;right:11px;margin:auto 0;display:inline-block;font-size:12px;color:#00000040;fill:currentColor;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none;transition:opacity .3s}.select-wrap .select-content-container .clear-svg[data-v-3ddc7bae]{position:absolute;top:0;bottom:0;right:11px;margin:auto 0;display:inline-block;font-size:12px;color:#00000040;fill:currentColor;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:1;background:#fff;cursor:pointer;transition:color .2s,opacity .3s}.select-wrap .select-content-container .clear-svg[data-v-3ddc7bae]:hover{color:#00000073}.select-wrap .select-content-container .show-svg[data-v-3ddc7bae]{opacity:1;pointer-events:auto}.select-focused:not(.select-disabled) .select-content-container[data-v-3ddc7bae]{border-color:var(--select-primary-color-focus);box-shadow:0 0 0 2px var(--select-primary-shadow-color)}.search-select .select-content-container[data-v-3ddc7bae]{cursor:text}.search-select .select-content-container .select-search .search-input[data-v-3ddc7bae]{cursor:auto;color:inherit;opacity:1}.select-small[data-v-3ddc7bae]{font-size:14px}.select-small .select-content-container[data-v-3ddc7bae]{padding:0 7px;border-radius:4px}.select-small .select-content-container .select-search[data-v-3ddc7bae]{left:7px;right:28px}.select-small .select-content-container .select-item[data-v-3ddc7bae]{padding-right:22px}.select-large[data-v-3ddc7bae]{font-size:16px}.select-large .select-content-container[data-v-3ddc7bae]{padding:0 11px;border-radius:8px}.select-large .select-content-container .select-item[data-v-3ddc7bae]{padding-right:20px}.select-disabled .select-content-container[data-v-3ddc7bae]{color:#00000040;background:#f5f5f5;-webkit-user-select:none;user-select:none;cursor:not-allowed}.select-disabled .select-content-container .select-search .search-input[data-v-3ddc7bae]{cursor:not-allowed}.select-panel-container[data-v-3ddc7bae]{position:absolute;z-index:1000;padding:4px;border-radius:8px;overflow:hidden;background-color:#fff;outline:none;cursor:auto;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.select-panel-container .select-options-panel .select-option[data-v-3ddc7bae]{min-height:32px;display:block;padding:5px 12px;border-radius:4px;color:#000000e0;font-weight:400;font-size:14px;line-height:1.57142857;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:background .3s ease}.select-panel-container .select-options-panel .option-hover[data-v-3ddc7bae]{background:#0000000a}.select-panel-container .select-options-panel .option-selected[data-v-3ddc7bae]{font-weight:600;background:var(--select-option-bg-color-active)}.select-panel-container .select-options-panel .option-disabled[data-v-3ddc7bae]{color:#00000040;cursor:not-allowed}.select-panel-container .options-panel-empty[data-v-3ddc7bae]{min-width:112px;padding:9px 16px}.select-panel-container .options-panel-empty .empty-wrap[data-v-3ddc7bae]{margin-block:8px}.select-panel-container .options-panel-empty .empty-wrap[data-v-3ddc7bae] .empty-image-wrap{height:35px}