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

An Amazing Vue3 UI Components Library, Using TypeScript.

.slide-down-enter[data-v-f28c4ec3]{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.slide-down-enter-active[data-v-f28c4ec3]{animation-name:slideDownIn-f28c4ec3;animation-play-state:running}@keyframes slideDownIn-f28c4ec3{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}.slide-down-leave[data-v-f28c4ec3]{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.slide-down-leave-active[data-v-f28c4ec3]{animation-name:slideDownOut-f28c4ec3;animation-play-state:running}@keyframes slideDownOut-f28c4ec3{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}.m-select[data-v-f28c4ec3]{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}.m-select:not(.select-disabled):hover .select-wrap[data-v-f28c4ec3]{border-color:var(--select-primary-color-hover)}.m-select .select-wrap[data-v-f28c4ec3]{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)}.m-select .select-wrap[data-v-f28c4ec3]:after{display:inline-block;width:0;visibility:hidden;content:" ";line-height:calc(var(--select-height) - 2px)}.m-select .select-wrap .select-search[data-v-f28c4ec3]{position:absolute;top:0;bottom:0;left:11px;right:11px}.m-select .select-wrap .select-search .search-input[data-v-f28c4ec3]{margin:0;padding:0;width:100%;height:100%;caret-color:transparent;vertical-align:top;background:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;cursor:pointer}.m-select .select-wrap .select-search .caret-show[data-v-f28c4ec3]{caret-color:auto}.m-select .select-wrap .select-item[data-v-f28c4ec3]{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}.m-select .select-wrap .select-placeholder[data-v-f28c4ec3]{color:#00000040;transition:none;pointer-events:none}.m-select .select-wrap .select-item-hidden[data-v-f28c4ec3]{visibility:hidden}.m-select .select-wrap .icon-svg[data-v-f28c4ec3]{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}.m-select .select-wrap .arrow-svg[data-v-f28c4ec3]{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}.m-select .select-wrap .arrow-rotate[data-v-f28c4ec3]{transform:rotate(180deg)}.m-select .select-wrap .search-svg[data-v-f28c4ec3]{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}.m-select .select-wrap .clear-svg[data-v-f28c4ec3]{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}.m-select .select-wrap .clear-svg[data-v-f28c4ec3]:hover{color:#00000073}.m-select .select-wrap .show-svg[data-v-f28c4ec3]{opacity:1;pointer-events:auto}.m-select .select-options-panel[data-v-f28c4ec3]{position:absolute;top:calc(var(--select-height) + 4px);z-index:1000;width:100%;background-color:#fff;border-radius:8px;outline:none;cursor:auto;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.m-select .select-options-panel .select-option[data-v-f28c4ec3]{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}.m-select .select-options-panel .option-hover[data-v-f28c4ec3]{background:#0000000a}.m-select .select-options-panel .option-selected[data-v-f28c4ec3]{font-weight:600;background:var(--select-item-bg-color-active)}.m-select .select-options-panel .option-disabled[data-v-f28c4ec3]{color:#00000040;cursor:not-allowed}.m-select .options-empty[data-v-f28c4ec3]{min-width:112px;padding:9px 16px}.m-select .options-empty .m-empty[data-v-f28c4ec3]{margin-block:8px}.m-select .options-empty .m-empty[data-v-f28c4ec3] .empty-image-wrap{height:35px}.select-focused:not(.select-disabled) .select-wrap[data-v-f28c4ec3]{border-color:var(--select-primary-color-focus);box-shadow:0 0 0 2px var(--select-primary-shadow-color)}.search-select .select-wrap[data-v-f28c4ec3]{cursor:text}.search-select .select-wrap .select-search .search-input[data-v-f28c4ec3]{cursor:auto;color:inherit;opacity:1}.select-small[data-v-f28c4ec3]{font-size:14px}.select-small .select-wrap[data-v-f28c4ec3]{padding:0 7px;border-radius:4px}.select-small .select-wrap .select-search[data-v-f28c4ec3]{left:7px;right:28px}.select-small .select-wrap .select-item[data-v-f28c4ec3]{padding-right:22px}.select-large[data-v-f28c4ec3]{font-size:16px}.select-large .select-wrap[data-v-f28c4ec3]{padding:0 11px;border-radius:8px}.select-large .select-wrap .select-item[data-v-f28c4ec3]{padding-right:20px}.select-disabled .select-wrap[data-v-f28c4ec3]{color:#00000040;background:#f5f5f5;-webkit-user-select:none;user-select:none;cursor:not-allowed}.select-disabled .select-wrap .select-search .search-input[data-v-f28c4ec3]{cursor:not-allowed}