@opentiny/vue-theme/base-select/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-base-select{--tv-BaseSelect-text-color:var(--tv-color-text, #191919);--tv-BaseSelect-font-size:var(--tv-font-size-default, 14px);--tv-BaseSelect-line-height:var(--tv-line-height-number, 1.5);--tv-BaseSelect-icon-color:var(--tv-color-icon, #808080);--tv-BaseSelect-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-BaseSelect-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-BaseSelect-icon-font-size:var(--tv-icon-size, 16px);--tv-BaseSelect-input-border-color-active:var(--tv-color-border-active, #191919);--tv-BaseSelect-suffix-top:var(--tv-space-xl, 16px);--tv-BaseSelect-suffix-top-medium:20px;--tv-BaseSelect-suffix-top-small:var(--tv-space-xl, 16px);--tv-BaseSelect-suffix-top-mini:var(--tv-space-lg, 12px);--tv-BaseSelect-suffix-icon-margin-right:var(--tv-space-sm, 4px);--tv-BaseSelect-suffix-txt-margin:0 var(--tv-space-sm, 4px);--tv-BaseSelect-suffix-text-color:var(--tv-color-text-weaken, #808080);--tv-BaseSelect-input-height:var(--tv-size-height-md, 32px);--tv-BaseSelect-height-mini:var(--tv-size-height-xs, 24px);--tv-BaseSelect-height-small:var(--tv-size-height-sm, 28px);--tv-BaseSelect-height-medium:var(--tv-size-height-lg, 40px);--tv-BaseSelect-tags-padding:var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px);--tv-BaseSelect-tags-height:var(--tv-size-height-md, 32px);--tv-BaseSelect-tag-margin:var(--tv-space-xs, 2px);--tv-BaseSelect-collapse-text-color:var(--tv-color-text-link, #1476ff);--tv-BaseSelect-collapse-icon-color:var(--tv-color-icon-link, #1476ff);--tv-BaseSelect-collapse-icon-margin-left:var(--tv-space-xs, 2px);--tv-BaseSelect-tag-height-medium:calc(var(--tv-size-height-lg, 40px) - 8px);--tv-BaseSelect-tag-height-default:calc(var(--tv-size-height-md, 32px) - 8px);--tv-BaseSelect-tag-height-small:calc(var(--tv-size-height-sm, 28px) - 8px);--tv-BaseSelect-tag-height-mini:calc(var(--tv-size-height-xs, 24px) - 8px);display:inline-block;position:relative;width:100%;outline:0;font-size:var(--tv-BaseSelect-font-size);line-height:var(--tv-BaseSelect-line-height)}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.tiny-base-select.tiny-base-select__multiple:not(.tiny-base-select__collapse-tags):not(.tiny-base-select__filterable) .tiny-base-select__tags>span{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}}@supports (-ms-ime-align:auto){.tiny-base-select.tiny-base-select__multiple:not(.tiny-base-select__collapse-tags):not(.tiny-base-select__filterable) .tiny-base-select__tags>span{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}}.tiny-base-select.tiny-base-select__collapse-tags .tiny-base-select__tags>span{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.tiny-base-select.tiny-base-select__collapse-tags .tiny-base-select__tags>span>span{display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-base-select.tiny-base-select__collapse-tags .tiny-base-select__tags>span>span:not(:only-child):first-child{max-width:70%}.tiny-base-select.tiny-base-select__collapse-tags.tiny-base-select__filterable .tiny-base-select__tags>span{width:auto;max-width:76%}.tiny-base-select.tiny-base-select__collapse-tags.tiny-base-select__filterable .tiny-base-select__tags>span>span:first-child{-webkit-box-flex:1;-ms-flex:1;flex:1}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.tiny-base-select.tiny-base-select__collapse-tags.tiny-base-select__filterable .tiny-base-select__tags>span>span:first-child{-ms-flex-preferred-size:auto;flex-basis:auto}}.tiny-base-select.tiny-base-select__collapse-tags.tiny-base-select__filterable .tiny-base-select__tags>span>span:not(:only-child):first-child,.tiny-base-select.tiny-base-select__collapse-tags.tiny-base-select__filterable .tiny-base-select__tags>span>span:only-child{max-width:100%}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.tiny-base-select.tiny-base-select__collapse-tags.tiny-base-select__filterable .tiny-base-select__tags>span>span:not(:only-child):not(:first-child){-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}}.tiny-base-select.tiny-base-select__filterable .tiny-base-select__tags .tiny-base-select__input{cursor:text}.tiny-base-select__tags{position:absolute;line-height:normal;white-space:normal;padding:var(--tv-BaseSelect-tags-padding);z-index:1;top:50%;margin-left:1px;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;cursor:pointer}.tiny-base-select__tags>span{display:contents}.tiny-base-select__tags>span>span{font-size:0}.tiny-base-select__tags .not-visible{visibility:hidden}.tiny-base-select__tags .tiny-base-select__input{cursor:pointer;border:none;outline:0;padding:0;margin-left:8px;color:var(--tv-BaseSelect-text-color);font-size:var(--tv-BaseSelect-font-size);height:var(--tv-BaseSelect-input-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.tiny-base-select__tags.is-showicon{padding-left:24px}.tiny-base-select__tags .tiny-tag{white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;border-color:transparent;margin:var(--tv-BaseSelect-tag-margin);text-overflow:ellipsis;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:160px}.tiny-base-select__tags .tiny-base-select__tags-text{display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:bottom}.tiny-base-select__tags .tiny-base-select__tags-text+.tiny-tag__close{-ms-flex-negative:0;flex-shrink:0}.tiny-base-select__tags .tiny-base-select__tags-text.is-disabled{max-height:24px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.tiny-base-select__tags .tiny-base-select__tags-text.is-disabled>span{margin:var(--tv-BaseSelect-tag-margin);display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tiny-base-select__tags .tiny-base-select__collapse-text{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--tv-BaseSelect-tags-margin-left);font-size:var(--tv-BaseSelect-font-size);color:var(--tv-BaseSelect-collapse-text-color)}.tiny-base-select__tags .tiny-base-select__collapse-text .tiny-svg{margin-left:var(--tv-BaseSelect-collapse-icon-margin-left);fill:var(--tv-BaseSelect-collapse-icon-color)}.tiny-base-select .tiny-tag{height:var(--tv-BaseSelect-tag-height-default)}.tiny-base-select.tiny-base-select--medium .tiny-input .tiny-input__suffix-inner{height:var(--tv-BaseSelect-height-medium)}.tiny-base-select.tiny-base-select--medium .tiny-tag{height:var(--tv-BaseSelect-tag-height-medium)}.tiny-base-select.tiny-base-select--small .tiny-input .tiny-input__suffix-inner{height:var(--tv-BaseSelect-height-small)}.tiny-base-select.tiny-base-select--small .tiny-tag{height:var(--tv-BaseSelect-tag-height-small)}.tiny-base-select.tiny-base-select--mini .tiny-input .tiny-input__suffix-inner{height:var(--tv-BaseSelect-height-mini)}.tiny-base-select.tiny-base-select--mini .tiny-tag{height:var(--tv-BaseSelect-tag-height-mini)}.tiny-base-select.is-click-expand,.tiny-base-select.is-hover-expand{vertical-align:top}.tiny-base-select.is-click-expand .tiny-base-select__tags-group,.tiny-base-select.is-hover-expand .tiny-base-select__tags-group{position:absolute;top:0;left:0;right:0}.tiny-base-select.is-click-expand.is-hover .is-expand,.tiny-base-select.is-hover-expand.is-hover .is-expand{z-index:2}.tiny-base-select.is-click-expand .tiny-base-select__tags,.tiny-base-select.is-hover-expand .tiny-base-select__tags{height:var(--tv-BaseSelect-tags-height);overflow:hidden}.tiny-base-select.is-click-expand .tiny-base-select__tags-collapse,.tiny-base-select.is-hover-expand .tiny-base-select__tags-collapse{visibility:visible;position:static}.tiny-base-select.is-click-expand .tiny-base-select__tags .is-hidden,.tiny-base-select.is-hover-expand .tiny-base-select__tags .is-hidden{visibility:hidden;position:absolute}.tiny-base-select.is-click-expand .tiny-base-select__tags>span>span,.tiny-base-select.is-hover-expand .tiny-base-select__tags>span>span{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.tiny-base-select.is-click-expand .tiny-base-select__tags .hidden,.tiny-base-select.is-hover-expand .tiny-base-select__tags .hidden{visibility:hidden}.tiny-base-select.is-click-expand.collapse-tag-clicked .tiny-base-select__tags,.tiny-base-select.is-click-expand.is-hover .tiny-base-select__tags,.tiny-base-select.is-hover-expand.collapse-tag-clicked .tiny-base-select__tags,.tiny-base-select.is-hover-expand.is-hover .tiny-base-select__tags{height:auto;max-height:none;overflow-y:auto}.tiny-base-select.is-click-expand.collapse-tag-clicked .tiny-base-select__tags-collapse,.tiny-base-select.is-click-expand.is-hover .tiny-base-select__tags-collapse,.tiny-base-select.is-hover-expand.collapse-tag-clicked .tiny-base-select__tags-collapse,.tiny-base-select.is-hover-expand.is-hover .tiny-base-select__tags-collapse{visibility:hidden;position:absolute}.tiny-base-select.is-click-expand.collapse-tag-clicked .tiny-base-select__tags-collapse.is-hidden,.tiny-base-select.is-click-expand.is-hover .tiny-base-select__tags-collapse.is-hidden,.tiny-base-select.is-hover-expand.collapse-tag-clicked .tiny-base-select__tags-collapse.is-hidden,.tiny-base-select.is-hover-expand.is-hover .tiny-base-select__tags-collapse.is-hidden{margin:0}.tiny-base-select.is-click-expand.collapse-tag-clicked .tiny-base-select__tags.not-selected,.tiny-base-select.is-click-expand.is-hover .tiny-base-select__tags.not-selected,.tiny-base-select.is-hover-expand.collapse-tag-clicked .tiny-base-select__tags.not-selected,.tiny-base-select.is-hover-expand.is-hover .tiny-base-select__tags.not-selected{overflow-y:hidden}.tiny-base-select.is-click-expand .is-expand,.tiny-base-select.is-hover-expand .is-expand{position:absolute;width:100%}.tiny-base-select.is-click-expand.tiny-base-select--small .tiny-base-select__tags,.tiny-base-select.is-hover-expand.tiny-base-select--small .tiny-base-select__tags{padding-top:2px}.tiny-base-select.is-click-expand.tiny-base-select--mini .tiny-base-select__tags,.tiny-base-select.is-hover-expand.tiny-base-select--mini .tiny-base-select__tags{padding-top:2px}.tiny-base-select.is-hover-expand.is-disabled .tiny-base-select__tags{height:auto}.tiny-base-select.is-click-expand .tiny-base-select__tags-collapse{visibility:visible;position:static}.tiny-base-select.is-click-expand .tiny-base-select__tags-collapse.is-hidden{visibility:hidden;position:absolute}.tiny-base-select.is-disabled{cursor:not-allowed}.tiny-base-select.is-disabled .tiny-input__inner{padding-right:12px}.tiny-base-select.is-disabled .tiny-base-select__tags{padding-right:16px;cursor:not-allowed}.tiny-base-select-tip .tiny-base-select-tipcontent{max-width:300px}.tiny-base-select .tiny-input{display:block}.tiny-base-select .tiny-input .tiny-input__inner[readonly]{cursor:pointer}.tiny-base-select .tiny-input .tiny-base-select__caret{fill:var(--tv-BaseSelect-icon-color);font-size:var(--tv-BaseSelect-icon-font-size);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);cursor:pointer}.tiny-base-select .tiny-input .tiny-base-select__caret:hover{fill:var(--tv-BaseSelect-icon-color-hover)}.tiny-base-select .tiny-input .tiny-base-select__caret.is-reverse{-webkit-transform:rotateZ(0);transform:rotateZ(0)}.tiny-base-select .tiny-input .tiny-base-select__limit-txt,.tiny-base-select .tiny-input .tiny-base-select__proportion-txt{color:var(--tv-BaseSelect-suffix-text-color);font-size:var(--tv-BaseSelect-font-size);margin:var(--tv-BaseSelect-suffix-txt-margin)}.tiny-base-select .tiny-input .tiny-base-select__copy{cursor:pointer;margin-right:var(--tv-BaseSelect-suffix-icon-margin-right)}.tiny-base-select .tiny-input .tiny-input__suffix{height:unset}.tiny-base-select .tiny-input .tiny-input__suffix-inner{font-size:0;height:var(--tv-BaseSelect-input-height)}.tiny-base-select .tiny-input .tiny-input__suffix-inner{overflow:hidden}.tiny-base-select .tiny-input.is-disabled .tiny-base-select__caret{fill:var(--tv-BaseSelect-icon-color-disabled);cursor:not-allowed}.tiny-base-select .tiny-input.is-disabled .tiny-input__inner{cursor:not-allowed}.tiny-base-select .tiny-input.is-focus .tiny-input__inner{border-color:var(--tv-BaseSelect-input-border-color-active)}