double-ui-vue/es/dropdown/style.css

基于vue框架的ui库

.selectDownUpExtend-enter-active{-webkit-animation:selectDownUpExtend .3s;animation:selectDownUpExtend .3s}.selectDownUpExtend-leave-active{animation:selectDownUpExtend .3s reverse}.selectDownUpExtendTop-enter-active{-webkit-animation:selectDownUpExtendTop .3s;animation:selectDownUpExtendTop .3s}.selectDownUpExtendTop-leave-active{animation:selectDownUpExtendTop .3s reverse}@-webkit-keyframes selectDownUpExtend{0%{transform:translate3d(0,-8px,0);opacity:0;pointer-events:none}to{transform:translateZ(0);opacity:1;pointer-events:auto}}@keyframes selectDownUpExtend{0%{transform:translate3d(0,-8px,0);opacity:0;pointer-events:none}to{transform:translateZ(0);opacity:1;pointer-events:auto}}@-webkit-keyframes selectDownUpExtendTop{0%{transform:translate3d(0,8px,0);opacity:0;pointer-events:none}to{transform:translateZ(0);opacity:1;pointer-events:auto}}@keyframes selectDownUpExtendTop{0%{transform:translate3d(0,8px,0);opacity:0;pointer-events:none}to{transform:translateZ(0);opacity:1;pointer-events:auto}}.d-drop{display:inline-block;vertical-align:middle;font-size:0;text-align:left}.d-drop .d-drop-title{display:flex;align-items:center;cursor:pointer}.d-drop .d-drop-title .d-drop-title-content{font-size:14px;transition:color .3s}.d-drop .d-drop-title .d-drop-triangle{width:16px;height:16px;line-height:1}.d-drop .d-drop-title .d-drop-triangle svg{transition:transform .3s}.d-drop .d-drop-title .d-drop-triangle svg path{transition:fill .3s}.d-drop .d-drop-title .d-drop-triangle-rotate svg{transform:rotate(180deg)}.d-drop:hover .d-drop-title-content{color:var(--blue-500)}.d-drop:hover .d-drop-triangle path{fill:var(--blue-500)}.d-drop-show{position:relative}.d-drop-show:after{content:"";position:absolute;left:0;top:0;z-index:10;display:inline-block;opacity:0;width:100%;height:100%;cursor:pointer}.d-drop-show .d-drop-title-content{color:var(--blue-500)}.d-drop-show .d-drop-triangle path{fill:var(--blue-500)}.d-drop-disabled .d-drop-title{cursor:not-allowed}.d-drop-light .d-drop-title{color:var(--grey-900)}.d-drop-dark .d-drop-title{color:var(--white)}.d-drop-dark .d-drop-triangle svg path{fill:var(--blue-500)}.d-drop-content{position:absolute;display:inline-block;outline:none;padding-top:8px;padding-bottom:8px;border-radius:4px;box-shadow:var(--box-shadow-bottom);min-width:120px;z-index:700;font-size:0;pointer-events:none}.d-drop-content-top-arrow{filter:drop-shadow(var(--box-shadow-triangle-top))}.d-drop-content-top-arrow:before{position:absolute;top:-6px;right:12px;content:"";border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent var(--white) transparent;width:0;height:0}.d-drop-content-bottom-arrow{filter:drop-shadow(var(--box-shadow-triangle-bottom))}.d-drop-content-bottom-arrow:after{position:absolute;bottom:-6px;right:12px;content:"";border-style:solid;border-width:6px 6px 0 6px;border-color:var(--white) transparent transparent transparent;width:0;height:0}.d-drop-option{width:100%;overflow-x:hidden;overflow-y:auto;min-height:54px;contain:paint}.d-drop-option .d-drop-option-item{padding-left:12px;padding-right:12px;width:100%;height:38px;font-size:14px;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:background-color .3s}.d-drop-option .d-drop-option-item .d-drop-option-svg{margin-right:8px}.d-drop-option .d-drop-option-item .d-drop-option-svg svg{vertical-align:middle}.d-drop-option .d-drop-option-item span{vertical-align:middle;line-height:38px}.d-drop-option .d-drop-option-item span .d-drop-option-svg svg path{fill:var(--blue-500)}.d-drop-option .d-drop-option-item.d-drop-option-disable{cursor:not-allowed}.d-drop-search{position:relative;display:block;padding-left:12px;padding-right:12px;padding-bottom:8px;width:100%;height:40px}.d-drop-search .d-drop-input{outline:none;padding-left:12px;padding-right:30px;background:none;border:1px solid var(--grey-400);border-radius:4px;width:100%;height:100%;font-size:14px;color:var(--grey-900)}.d-drop-search .d-drop-clear{position:absolute;right:13px;top:1px;width:30px;height:30px;line-height:30px;text-align:center;cursor:pointer}.d-drop-search .d-drop-clear:hover path{fill:var(--blue-500)}.d-drop-search .d-drop-clear svg{width:16px;height:16px;font-size:0;vertical-align:middle}.d-drop-search .d-drop-clear svg path{transition:fill .3s}.d-drop-search-shadow{box-shadow:var(--box-shadow-bottom)}.d-drop-content-light{background-color:var(--theme);border:1px solid var(--grey-300)}.d-drop-content-light .d-drop-option-item{color:var(--grey-900)}.d-drop-content-light .d-drop-option-item:hover{background-color:var(--hover-color-grey)}.d-drop-content-light .d-drop-option-item.d-drop-option-selected{color:var(--blue-500);background-color:var(--blue-50)}.d-drop-content-light .d-drop-option-item.d-drop-option-disable{color:var(--grey-400)}.d-drop-content-dark{background-color:var(--blue-900);border:1px solid var(--blue-500)}.d-drop-content-dark .d-drop-option-item{color:var(--white)}.d-drop-content-dark .d-drop-option-item:hover{background-color:var(--blue-800)}.d-drop-content-dark .d-drop-option-item.d-drop-option-selected{color:var(--blue-50);background-color:var(--blue-700)}.d-drop-content-dark .d-drop-option-item.d-drop-option-disable{color:var(--blue-200)}