@opentiny/vue-theme/selected-box/index.css

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

.tiny-selected-box{--tv-SelectedBox-text-color:var(--tv-color-text, #191919);--tv-SelectedBox-font-size:var(--tv-font-size-default, 14px);--tv-SelectedBox-line-height:var(--tv-line-height-number, 1.5);--tv-SelectedBox-bg-color:var(--tv-color-bg-secondary, #fff);--tv-SelectedBox-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-SelectedBox-icon-color:var(--tv-color-icon, #808080);--tv-SelectedBox-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-SelectedBox-icon-size:var(--tv-icon-size, 16px);--tv-SelectedBox-list-padding:var(--tv-space-md, 8px) 0;--tv-SelectedBox-text-color-empty:var(--tv-color-text-secondary, #595959);--tv-SelectedBox-text-color-clear:var(--tv-color-icon-link, #1476ff);--tv-SelectedBox-header-height:var(--tv-size-height-md, 32px);--tv-SelectedBox-header-padding:0px var(--tv-space-lg, 12px);--tv-SelectedBox-header-border:var(--tv-border-width, 1px) solid var(--tv-color-border-divider, #f0f0f0);--tv-SelectedBox-item-padding:5.5px var(--tv-space-lg, 12px);--tv-SelectedBox-item-right-height:calc(var(--tv-SelectedBox-line-height, 1.5) * var(--tv-SelectedBox-font-size, 14px));--tv-SelectedBox-item-right-width:24px;--tv-SelectedBox-item-aux-text-color:var(--tv-color-text-weaken, #808080);height:100%;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:var(--tv-SelectedBox-header-height) auto;background-color:var(--tv-SelectedBox-bg-color);font-size:var(--tv-SelectedBox-font-size);line-height:var(--tv-SelectedBox-line-height);color:var(--ti-selected-text-color)}.tiny-selected-box .tiny-selected-box__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--tv-SelectedBox-header-padding);border-bottom:var(--tv-SelectedBox-header-border);height:var(--tv-SelectedBox-header-height)}.tiny-selected-box .tiny-selected-box__header .tiny-selected-box__header-select{max-width:8rem}.tiny-selected-box .tiny-selected-box__header .tiny-selected-box__header-select .tiny-selected-box__header-select-label{cursor:pointer}.tiny-selected-box .tiny-selected-box__header .tiny-selected-box__header-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tv-SelectedBox-text-color-clear)}.tiny-selected-box .tiny-selected-box__header .tiny-selected-box__header-right>:not([hidden])~:not([hidden]){margin-right:0;margin-left:.5rem}.tiny-selected-box .tiny-selected-box__header .tiny-selected-box__header-right .tiny-selected-box__header-right-label{cursor:pointer}.tiny-selected-box .tiny-selected-box__list{overflow-x:hidden;overflow-y:auto;padding:var(--tv-SelectedBox-list-padding)}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item{cursor:pointer;padding:var(--tv-SelectedBox-item-padding)}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item:hover{background-color:var(--tv-SelectedBox-bg-color-hover)}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid{display:grid;grid-template-columns:auto var(--tv-SelectedBox-item-right-width)}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-left{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-left .tiny-selected-box__item-grid-left-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-left .tiny-selected-box__item-grid-left-label .tiny-selected-box__item-grid-left-label-pri{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-left .tiny-selected-box__item-grid-left-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-left .tiny-selected-box__item-grid-left-text .tiny-selected-box__item-grid-left-text-aux{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tv-SelectedBox-item-aux-text-color);position:relative}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;fill:var(--tv-SelectedBox-icon-color);height:var(--tv-SelectedBox-item-right-height)}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-right .tiny-svg{font-size:var(--tv-SelectedBox-icon-size)}.tiny-selected-box .tiny-selected-box__list .tiny-selected-box__item .tiny-selected-box__item-grid .tiny-selected-box__item-grid-right:hover{fill:var(--tv-SelectedBox-icon-color-hover)}.tiny-selected-box .tiny-selected-box__list-empty{text-align:center;color:var(--tv-SelectedBox-text-color-empty)}.tiny-selected-box .tiny-selected-box__list-empty>div{margin-top:50%}.tiny-selected-box .tiny-selected-box__list--inverse{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-style:solid;text-decoration-style:solid;-webkit-text-decoration-color:var(--tv-SelectedBox-text-color);text-decoration-color:var(--tv-SelectedBox-text-color)}.tiny-selected-box .tiny-selected-box__popover{display:none}