@opentiny/vue-theme/dropdown/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{--tv-Dropdown-font-size:var(--tv-font-size-default, 14px);--tv-Dropdown-line-height:var(--tv-line-height-number, 1.5);--tv-Dropdown-text-color:var(--tv-color-text, #191919);--tv-Dropdown-text-color-link:var(--tv-color-text-link, #1476ff);--tv-Dropdown-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-Dropdown-icon-size:var(--tv-icon-size, 16px);--tv-Dropdown-icon-size-only-svg:24px;--tv-Dropdown-icon-margin-x:var(--tv-space-base, 4px);--tv-Dropdown-icon-color:var(--tv-color-icon, #808080);--tv-Dropdown-icon-color-white:var(--tv-color-icon-inverse-tint, #ffffff);--tv-Dropdown-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Dropdown-icon-color-link:var(--tv-color-icon-link, #1476ff);--tv-Dropdown-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-Dropdown-bg-color-only-svg-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Dropdown-border-radius-only-svg-hover:var(--tv-border-radius-sm, 4px);--tv-Dropdown-caret-button-padding-left:var(--tv-space-base, 4px);--tv-Dropdown-caret-button-border-radius:0 var(--tv-border-radius-brand, 999px) var(--tv-border-radius-brand, 999px) 0;--tv-Dropdown-title-button-border-radius:var(--tv-border-radius-brand, 999px) 0 0 var(--tv-border-radius-brand, 999px);--tv-Dropdown-title-button-padding:0px 0px 0px 24px;display:inline-block;position:relative;color:var(--tv-Dropdown-text-color-link);font-size:var(--tv-Dropdown-font-size);line-height:var(--tv-Dropdown-line-height)}.tiny-dropdown__trigger{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-dropdown__trigger .tiny-dropdown__prefix-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--tv-Dropdown-icon-margin-x)}.tiny-dropdown__trigger .tiny-dropdown__suffix-inner{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-Dropdown-icon-margin-x)}.tiny-dropdown__trigger .tiny-dropdown__suffix-inner .tiny-svg{font-size:var(--tv-Dropdown-icon-size)}.tiny-dropdown__trigger:not(.tiny-button) .tiny-svg{fill:var(--tv-Dropdown-icon-color-link)}.tiny-dropdown__trigger.tiny-button--default .tiny-svg{fill:var(--tv-Dropdown-icon-color)}.tiny-dropdown__trigger:not(.tiny-button):not(:has(.tiny-dropdown__title))>.tiny-dropdown__suffix-inner .tiny-svg{font-size:var(--tv-Dropdown-icon-size-only-svg)}.tiny-dropdown__trigger:not(.tiny-button):not(:has(.tiny-dropdown__title))>.tiny-dropdown__suffix-inner:hover{background-color:var(--tv-Dropdown-bg-color-only-svg-hover);border-radius:var(--tv-Dropdown-border-radius-only-svg-hover)}.tiny-dropdown .tiny-button-group{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.tiny-dropdown .tiny-button-group .tiny-dropdown__title-button{padding:var(--tv-Dropdown-title-button-padding);border-right:none;border-radius:var(--tv-Dropdown-title-button-border-radius);min-width:auto}.tiny-dropdown .tiny-button-group .tiny-dropdown__caret-button{padding-left:var(--tv-Dropdown-caret-button-padding-left);position:relative;border-left:none;min-width:24px;border-radius:var(--tv-Dropdown-caret-button-border-radius);margin-left:0}.tiny-dropdown .tiny-button-group .tiny-button--medium+.tiny-button.tiny-button--medium{margin-left:0}.tiny-dropdown .tiny-button-group .tiny-button--small+.tiny-button.tiny-button--small{margin-left:0}.tiny-dropdown .tiny-dropdown-selfdefine:focus:active,.tiny-dropdown .tiny-dropdown-selfdefine:focus:not(.focusing){outline-width:0}.tiny-dropdown:hover{cursor:pointer}.tiny-dropdown__trigger:hover.tiny-button.tiny-button--default:not(.is-disabled) .tiny-svg{fill:var(--tv-Dropdown-icon-color-hover)}.tiny-dropdown .is-disabled{cursor:not-allowed;color:var(--tv-Dropdown-text-color-disabled)}.tiny-dropdown .is-disabled .tiny-svg{fill:var(--tv-Dropdown-icon-color-disabled)}.tiny-dropdown--visible{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transform-origin:center;transform-origin:center}