@opentiny/vue-theme/select-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-select-dropdown{--tv-SelectDropdown-text-color:var(--tv-color-text, #191919);--tv-SelectDropdown-font-size:var(--tv-font-size-default, 14px);--tv-SelectDropdown-font-size-tip:var(--tv-font-size-sm, 12px);--tv-SelectDropdown-text-color-tip:var(--tv-color-text-secondary, #595959);--tv-SelectDropdown-line-height:var(--tv-line-height-number, 1.5);--tv-SelectDropdown-border-color-divider:var(--tv-color-border-divider, #f0f0f0);--tv-SelectDropdown-icon-size:var(--tv-icon-size, 16px);--tv-SelectDropdown-icon-color:var(--tv-color-icon, #808080);--tv-SelectDropdown-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-SelectDropdown-icon-color-static:var(--tv-color-icon-control, #191919);--tv-SelectDropdown-border-radius:var(--tv-border-radius-md, 6px);--tv-SelectDropdown-bg-color:var(--tv-color-bg-2, #ffffff);--tv-SelectDropdown-box-shadow:var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));--tv-SelectDropdown-margin-top:var(--tv-space-sm, 4px);--tv-SelectDropdown-padding:var(--tv-space-md, 8px) 0;--tv-SelectDropdown-search-padding:0 var(--tv-space-lg, 12px) 0 20px;--tv-SelectDropdown-search-margin:0px var(--tv-space-xl, 16px) var(--tv-space-md, 8px) var(--tv-space-xl, 16px);--tv-SelectDropdown-search-width:calc(100% - var(--tv-space-xl, 16px) * 2);--tv-SelectDropdown-empty-padding:46px 0;--tv-SelectDropdown-image-margin-bottom:var(--tv-space-md, 8px);--tv-SelectDropdown-empty-img:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');--tv-SelectDropdown-empty-margin:var(--tv-space-md, 8px) 0;position:absolute;z-index:1001;font-size:var(--tv-SelectDropdown-font-size);line-height:var(--tv-SelectDropdown-line-height);color:var(--tv-SelectDropdown-text-color);border-radius:var(--tv-SelectDropdown-border-radius);background-color:var(--tv-SelectDropdown-bg-color);-webkit-box-shadow:var(--tv-SelectDropdown-box-shadow);box-shadow:var(--tv-SelectDropdown-box-shadow);margin-top:var(--tv-SelectDropdown-margin-top);padding:var(--tv-SelectDropdown-padding)}.tiny-select-dropdown .tiny-svg{font-size:var(--tv-SelectDropdown-icon-size);fill:var(--tv-SelectDropdown-icon-color)}.tiny-select-dropdown .tiny-select__top-create{margin:0 8px 4px;height:32px;border-bottom:1px solid var(--tv-SelectDropdown-border-color-divider)}.tiny-select-dropdown .tiny-select__top-create>div{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.tiny-select-dropdown .tiny-select__top-create>div:hover{text-decoration:underline}.tiny-select-dropdown .tiny-select__top-create>div .tiny-svg{margin-right:4px;fill:var(--tv-SelectDropdown-icon-color-static)}.tiny-select-dropdown .tiny-tree{padding:0;max-height:300px;overflow-y:auto}.tiny-select-dropdown .tiny-select-dropdown__search{margin:var(--tv-SelectDropdown-search-margin);width:var(--tv-SelectDropdown-search-width)}.tiny-select-dropdown .tiny-select-dropdown__search:hover .tiny-input__inner:not(:disabled){border-color:var(--tv-SelectDropdown-border-color-divider)}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-input__inner{padding:var(--tv-SelectDropdown-search-padding);border-color:var(--tv-SelectDropdown-border-color-divider)}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-input__suffix{display:none}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-input__suffix-inner{width:auto;height:auto}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-input__prefix{left:0;font-size:0}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-input__prefix .tiny-svg{margin-right:4px}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-input__prefix-inner{width:auto;height:auto}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-icon-close::after{content:'';display:inline-block;height:14px;width:1px;background-color:var(--tv-SelectDropdown-border-color-divider);line-height:100%;vertical-align:middle;margin:0 8px}.tiny-select-dropdown .tiny-select-dropdown__search .tiny-svg:hover{fill:var(--tv-SelectDropdown-icon-color-hover)}.tiny-select-dropdown .tiny-select-dropdown__search+.tiny-scrollbar .tiny-select-dropdown__wrap .tiny-option-group:first-child .tiny-option-group__title{margin-top:0}.tiny-select-dropdown .tiny-recycle-scroller{list-style:none}.tiny-select-dropdown .tiny-recycle-scroller__slot .tiny-select-dropdown__item{margin-bottom:4px}.tiny-select-dropdown .tiny-select-dropdown__wrap{max-height:232px;margin-right:-4px}.tiny-select-dropdown__empty-wrap{margin:var(--tv-SelectDropdown-empty-margin);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.tiny-select-dropdown__empty-wrap .tiny-select-dropdown__empty{padding:var(--tv-SelectDropdown-empty-padding1);text-align:center;color:var(--tv-SelectDropdown-text-color-tip);font-size:var(--tv-SelectDropdown-font-size-tip)}.tiny-select-dropdown__loading{color:var(--tv-SelectDropdown-text-color-tip);margin:var(--tv-SelectDropdown-empty-margin);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.tiny-select-dropdown__loading>.circular{fill:var(--tv-SelectDropdown-icon-color-static)}.tiny-select-dropdown__loading.show-loading-icon{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;padding-left:16px;height:32px}.tiny-select-dropdown .tiny-select-dropdown__empty-images{width:100%;height:100px;margin:0;background:var(--tv-SelectDropdown-empty-img) 50% no-repeat}