@opentiny/vue-theme/option/index.css

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

.tiny-option[data-tag=tiny-option]{padding:var(--tv-Option-padding)}.tiny-option{--tv-Option-font-size:var(--tv-font-size-default, 14px);--tv-Option-line-height:var(--tv-line-height-number, 1.5);--tv-Option-text-color:var(--tv-color-text, #191919);--tv-Option-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-Option-text-color-selected:var(--tv-color-text-active, #1476ff);--tv-Option-text-color-highlight:var(--tv-color-text-active, #1476ff);--tv-Option-icon-size:var(--tv-icon-size, 16px);--tv-Option-icon-color-unchecked:var(--tv-color-border, #c2c2c2);--tv-Option-icon-color-checked:var(--tv-color-icon-control-active, #1476ff);--tv-Option-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Option-icon-color-checked-disabled:var(--tv-color-icon-checked-disabled, #dbdbdb);--tv-Option-icon-color-checked-disabled-inverse:var(--tv-color-bg-inverse-disabled, #fff);--tv-Option-icon-color-unchecked-disabled:var(--tv-color-icon-control-disabled, #dbdbdb);--tv-Option-icon-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-Option-height:var(--tv-size-height-md, 32px);--tv-Option-padding:0px var(--tv-space-xl, 16px);--tv-Option-icon-margin-right:var(--tv-space-md, 8px);--tv-Option-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Option-border-color-disabled:var(--tv-color-border-disabled, #dbdbdb);--tv-Option-bg-color-filter:var(--tv-color-bg-gray-2, #e6e6e6);--tv-Option-bg-color-active:var(--tv-color-bg-active-control, #1476ff);--tv-Option-border-color-inverse:var(--tv-color-text-inverse, #ffffff);--tv-Option-unchecked-border-color:var(--tv-color-border, #c2c2c2);--tv-Option-checked-disabled-bg-color:var(--tv-color-icon-checked-disabled, #dbdbdb);--tv-Option-checked-disabled-border-color:var(--tv-color-bg-disabled-control-unactive, #dbdbdb);--tv-Option-icon-inverse-disabled:var(--tv-color-icon-inverse, #ffffff);--tv-Option-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);color:var(--tv-Option-text-color);font-size:var(--tv-Option-font-size);height:var(--tv-Option-height);line-height:var(--tv-Option-line-height);position:relative;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.tiny-option .tiny-svg{font-size:var(--tv-Option-icon-size);margin-right:var(--tv-Option-icon-margin-right)}.tiny-option .tiny-option__checkbox-wrap .tiny-svg,.tiny-option.tiny-option_all .tiny-svg{fill:var(--tv-Option-icon-color-unchecked)}.tiny-option .checked-sur.tiny-svg path:first-child,.tiny-option .halfselect.tiny-svg path:first-child,.tiny-option.selected .tiny-svg path:first-child{fill:var(--tv-Option-icon-color-checked)}.tiny-option .check.tiny-svg path:first-child{fill:transparent}.tiny-option .check.tiny-svg path:nth-child(2){fill:var(--tv-Option-icon-color-unchecked)}.tiny-option .check.tiny-svg:hover path:nth-child(2){fill:var(--tv-Option-icon-color-hover)}.tiny-option-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-option-wrapper.calc-width{width:calc(100% - 24px)}.tiny-option-wrapper.full-width{width:100%}.tiny-option-wrapper .tiny-option-label{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}.tiny-option.hover,.tiny-option:hover{background-color:var(--tv-Option-bg-color-hover)}.tiny-option:not(.tiny-option_all):not(:has(.tiny-option__checkbox-wrap)).selected{color:var(--tv-Option-text-color-selected)}.tiny-option.memorize-highlight{color:var(--tv-Option-text-color-highlight)}.tiny-option.is-disabled{color:var(--tv-Option-text-color-disabled);cursor:not-allowed}.tiny-option.is-disabled .tiny-svg.checked-sur path:first-child,.tiny-option.is-disabled .tiny-svg.halfselect path:first-child{fill:var(--tv-Option-checked-disabled-bg-color)}.tiny-option.is-disabled .tiny-svg.checked-sur path:last-child,.tiny-option.is-disabled .tiny-svg.halfselect path:last-child{fill:var(--tv-Option-icon-color-checked-disabled-inverse)}.tiny-option.is-disabled .tiny-svg.check path:first-child{fill:var(--tv-Option-bg-color-disabled)}.tiny-option.is-disabled .tiny-svg.check path:nth-child(2){fill:var(--tv-Option-icon-color-unchecked-disabled)}