@opentiny/vue-theme/dropdown-item/index.css

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

.tiny-dropdown-item{--tv-DropdownItem-font-size:var(--tv-font-size-default, 14px);--tv-DropdownItem-line-height:var(--tv-line-height-number, 1.5);--tv-DropdownItem-text-color:var(--tv-color-text, #191919);--tv-DropdownItem-text-color-active:var(--tv-color-text-active, #1476ff);--tv-DropdownItem-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-DropdownItem-font-weight-checked:var(--tv-font-weight-bold, 600);--tv-DropdownItem-icon-size:var(--tv-icon-size, 16px);--tv-DropdownItem-icon-color:var(--tv-color-icon, #808080);--tv-DropdownItem-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-DropdownItem-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-DropdownItem-padding:0 var(--tv-space-xl, 16px);--tv-DropdownItem-margin-y:var(--tv-space-sm, 4px);--tv-DropdownItem-expand-margin-x:var(--tv-space-md, 8px);--tv-DropdownItem-pre-icon-margin-x:var(--tv-space-sm, 4px);--tv-DropdownItem-content-margin-left:calc(var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-expand-margin-x));--tv-DropdownItem-label-margin-left:calc(var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-pre-icon-margin-x));--tv-DropdownItem-height:var(--tv-size-height-md, 32px);--tv-DropdownItem-height-sm:var(--tv-size-height-sm, 28px);--tv-DropdownItem-height-xs:var(--tv-size-height-mi, 24px);--tv-DropdownItem-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-DropdownItem-border-divider:var(--tv-border-width, 1px) solid var(--tv-color-border-divider, #f0f0f0);list-style:none;font-size:var(--tv-DropdownItem-font-size);height:var(--tv-DropdownItem-height);line-height:var(--tv-DropdownItem-line-height);color:var(--tv-DropdownItem-text-color);cursor:pointer;outline:0;position:relative;word-break:break-all;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-dropdown-item[class*=tiny-]{padding:var(--tv-DropdownItem-padding);margin-bottom:var(--tv-DropdownItem-margin-y)}.tiny-dropdown-item[class*=tiny-]:last-of-type{margin-bottom:0}.tiny-dropdown-item .tiny-svg{font-size:var(--tv-DropdownItem-icon-size);fill:var(--tv-DropdownItem-icon-color)}.tiny-dropdown-item:before{content:'';height:0;display:block;margin:0}.tiny-dropdown-item__wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%}.tiny-dropdown-item__wrap .tiny-dropdown-item--child{position:absolute;right:100%;top:0;display:none}.tiny-dropdown-item__wrap .tiny-dropdown-item__expand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--tv-DropdownItem-expand-margin-x)}.tiny-dropdown-item__wrap .tiny-dropdown-item__expand+.tiny-dropdown-item__content{margin-left:0}.tiny-dropdown-item__wrap .tiny-dropdown-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.tiny-dropdown-item__wrap .tiny-dropdown-item__content .tiny-dropdown-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-dropdown-item__wrap .tiny-dropdown-item__content .tiny-dropdown-item__pre-icon{margin-right:var(--tv-DropdownItem-pre-icon-margin-x)}.tiny-dropdown-item:focus,.tiny-dropdown-item:not(.is-disabled):hover{background-color:var(--tv-DropdownItem-bg-color-hover)}.tiny-dropdown-item:focus>.tiny-dropdown-item__wrap>.tiny-dropdown-item__content .tiny-svg,.tiny-dropdown-item:focus>.tiny-dropdown-item__wrap>.tiny-dropdown-item__expand .tiny-svg,.tiny-dropdown-item:not(.is-disabled):hover>.tiny-dropdown-item__wrap>.tiny-dropdown-item__content .tiny-svg,.tiny-dropdown-item:not(.is-disabled):hover>.tiny-dropdown-item__wrap>.tiny-dropdown-item__expand .tiny-svg{fill:transparent}.tiny-dropdown-item:focus>.tiny-dropdown-item__wrap>.tiny-dropdown-item--child,.tiny-dropdown-item:not(.is-disabled):hover>.tiny-dropdown-item__wrap>.tiny-dropdown-item--child{display:block}.tiny-dropdown-item:not(.is-disabled).has-children:hover{color:var(--tv-DropdownItem-text-color-active);background-color:transparent}.tiny-dropdown-item.is-disabled{cursor:not-allowed;color:var(--tv-DropdownItem-text-color-disabled)}.tiny-dropdown-item.is-disabled>.tiny-dropdown-item__wrap>.tiny-dropdown-item__content svg,.tiny-dropdown-item.is-disabled>.tiny-dropdown-item__wrap>.tiny-dropdown-item__expand svg{fill:var(--tv-DropdownItem-icon-color-disabled)}.tiny-dropdown-item--check-status{color:var(--tv-DropdownItem-text-color-active);font-weight:var(--tv-DropdownItem-font-weight-checked)}.tiny-dropdown-item--divided{position:relative}.tiny-dropdown-item--divided .tiny-dropdown-item__wrap{border-top:var(--tv-DropdownItem-border-divider)}.tiny-dropdown-item--small{height:var(--tv-DropdownItem-height-sm)}.tiny-dropdown-item--mini{height:var(--tv-DropdownItem-height-xs)}.tiny-dropdown-menu[x-placement=bottom-start]:has(.has-children) .tiny-dropdown-menu>li:not(.has-children) .tiny-dropdown-item__content,.tiny-dropdown-menu[x-placement=bottom-start]:has(.has-children)>li:not(.has-children) .tiny-dropdown-item__content,.tiny-dropdown-menu[x-placement=top-start]:has(.has-children) .tiny-dropdown-menu>li:not(.has-children) .tiny-dropdown-item__content,.tiny-dropdown-menu[x-placement=top-start]:has(.has-children)>li:not(.has-children) .tiny-dropdown-item__content{margin-left:0}.tiny-dropdown-menu[x-placement=bottom-start] .tiny-dropdown-item__wrap,.tiny-dropdown-menu[x-placement=top-start] .tiny-dropdown-item__wrap{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.tiny-dropdown-menu[x-placement=bottom-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__expand,.tiny-dropdown-menu[x-placement=top-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__expand{margin-right:0;margin-left:var(--tv-DropdownItem-expand-margin-x)}.tiny-dropdown-menu[x-placement=bottom-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__expand .tiny-svg,.tiny-dropdown-menu[x-placement=top-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__expand .tiny-svg{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.tiny-dropdown-menu[x-placement=bottom-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__content,.tiny-dropdown-menu[x-placement=top-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__content{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.tiny-dropdown-menu[x-placement=bottom-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__content .tiny-dropdown-item__pre-icon,.tiny-dropdown-menu[x-placement=top-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__content .tiny-dropdown-item__pre-icon{margin-left:var(--tv-DropdownItem-pre-icon-margin-x);margin-right:0}.tiny-dropdown-menu[x-placement=bottom-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__content .tiny-dropdown-item__label,.tiny-dropdown-menu[x-placement=top-start] .tiny-dropdown-item__wrap .tiny-dropdown-item__content .tiny-dropdown-item__label{margin-left:0}.tiny-dropdown-menu[x-placement=bottom-start] .tiny-dropdown-item__wrap .tiny-dropdown-item--child,.tiny-dropdown-menu[x-placement=top-start] .tiny-dropdown-item__wrap .tiny-dropdown-item--child{right:unset;left:100%}