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