double-ui-vue/es/drop-trigger/style.css

基于vue框架的ui库

.d-drop-trigger{position:relative;display:inline-flex;justify-content:space-between;align-items:flex-start;border:1px solid var(--grey-400);border-radius:4px;width:120px;font-size:0;transition:border-color .3s}.d-drop-trigger-active{cursor:pointer}.d-drop-trigger-active:hover{border-color:var(--blue-500)}.d-drop-trigger-active:active{border-color:var(--blue-600)}.d-drop-trigger-disabled{background-color:var(--grey-200);cursor:not-allowed}.d-drop-trigger-disabled .d-drop-trigger-caption{color:var(--grey-400)}.d-drop-trigger-disabled .d-drop-trigger-icon svg path{fill:var(--grey-400)}.d-drop-trigger-disabled .d-drop-trigger-label{cursor:not-allowed}.d-drop-trigger-disabled .d-drop-trigger-label .d-drop-trigger-selected .d-drop-trigger-selected-m,.d-drop-trigger-disabled .d-drop-trigger-label .d-drop-trigger-selected .d-drop-trigger-selected-m-c{color:var(--grey-400)}.d-drop-trigger-normal{height:32px}.d-drop-trigger-tag{min-height:32px;max-height:84px}.d-drop-trigger-text-overflow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.d-drop-trigger-main{padding-left:8px;width:calc(100% - 30px)}.d-drop-trigger-main-normal{height:30px}.d-drop-trigger-caption{display:inline-block;max-width:98px;height:30px;line-height:30px;color:var(--grey-600);font-size:14px}.d-drop-trigger-label{position:relative;display:inline-block;width:100%;height:30px;overflow:hidden;cursor:pointer}.d-drop-trigger-label-pl{padding-left:8px}.d-drop-trigger-placeholder{display:block;width:100%;height:30px;line-height:30px;font-size:14px;color:var(--grey-400)}.d-drop-trigger-selected{display:flex;width:100%;height:30px;line-height:30px}.d-drop-trigger-selected-m{display:block;width:100%;height:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--grey-900);transition:color .3s}.d-drop-trigger-selected-s{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.d-drop-trigger-selected-m-c{padding-left:4px;padding-right:4px;color:var(--blue-500);font-size:14px}.d-drop-trigger-selected-focus .d-drop-trigger-selected-m,.d-drop-trigger-selected-focus .d-drop-trigger-selected-m-c,.d-drop-trigger-selected-focus .d-drop-trigger-selected-s{color:var(--grey-400)}.d-drop-trigger-input{position:absolute;left:0;top:0;outline:none;background:none;border:0;width:100%;height:30px;font-size:14px;color:var(--grey-900)}.d-drop-trigger-input-readonly{cursor:pointer}.d-drop-trigger-main-tag{display:inline-flex;min-height:30px}.d-drop-trigger-main-tag-box{min-height:28px;max-height:82px;overflow-x:hidden;overflow-y:auto}.d-drop-trigger-tag-list{display:inline-flex;align-items:flex-start;flex-wrap:wrap;padding-top:4px;width:100%;min-height:28px}.d-drop-trigger-tag-list-item{display:inline-flex;align-items:center;margin-right:4px;margin-bottom:4px;padding-left:4px;background-color:var(--grey-200);height:22px;line-height:22px}.d-drop-trigger-tag-list-item .d-drop-trigger-tag-list-text{font-size:14px;color:var(--grey-900);cursor:text}.d-drop-trigger-tag-list-item .d-drop-trigger-tag-list-svg{width:22px;height:22px;text-align:center}.d-drop-trigger-tag-list-item .d-drop-trigger-tag-list-svg svg{vertical-align:middle;width:10px;height:10px;font-size:0}.d-drop-trigger-tag-list-item .d-drop-trigger-tag-list-svg svg path{transition:fill .3s}.d-drop-trigger-tag-list-item .d-drop-trigger-tag-list-svg-normal:hover path{fill:var(--blue-500)}.d-drop-trigger-tag-list-item .d-drop-trigger-tag-list-svg-disabled{cursor:not-allowed}.d-drop-trigger-icon{width:30px;height:30px}.d-drop-trigger-icon-clear:hover .d-drop-trigger-tgl{display:none}.d-drop-trigger-icon-clear:hover .d-drop-trigger-del{display:block}.d-drop-trigger-svg{display:block;padding-top:7px;width:100%;height:100%;text-align:center;transition:transform .3s}.d-drop-trigger-svg svg{vertical-align:middle;width:16px;height:16px;font-size:0}.d-drop-trigger-svg svg path{transition:fill .3s}.d-drop-trigger-del{display:none}.d-drop-trigger-del svg:hover path{fill:var(--blue-500)}.d-drop-trigger-tgl{display:block}.d-drop-trigger-tgl-open{transform:rotate(180deg)}.p-trigger-error{border-color:var(--red-500)}.p-trigger-error-text{position:absolute;left:0;top:36px;line-height:14px;font-size:14px;color:var(--red-500)}.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-popover-tip{position:absolute;display:inline-block;padding-top:8px;border-radius:4px;max-width:480px;z-index:700;font-size:0}.d-popover-tip .d-popover-tip-triangle{position:absolute;left:50%;border-style:solid;width:0;height:0}.d-popover-tip-split{background-color:var(--theme)}.d-popover-tip-split.d-popover-tip-top .d-popover-tip-triangle{border-color:var(--theme) transparent transparent transparent}.d-popover-tip-split.d-popover-tip-bottom .d-popover-tip-triangle{border-color:transparent transparent var(--theme) transparent}.d-popover-tip-words{background-color:var(--popover-tip-bg)}.d-popover-tip-words.d-popover-tip-top .d-popover-tip-triangle{border-color:var(--popover-tip-bg) transparent transparent transparent}.d-popover-tip-words.d-popover-tip-bottom .d-popover-tip-triangle{border-color:transparent transparent var(--popover-tip-bg) transparent}.d-popover-tip-top{filter:drop-shadow(var(--box-shadow-triangle-bottom))}.d-popover-tip-top .d-popover-tip-triangle{bottom:-6px;border-width:6px 6px 0 6px}.d-popover-tip-bottom{filter:drop-shadow(var(--box-shadow-triangle-top))}.d-popover-tip-bottom .d-popover-tip-triangle{top:-6px;border-width:0 6px 6px 6px}.d-popover-tip-content{display:inline-flex;flex-wrap:wrap;padding-left:4px;padding-right:8px;max-width:480px;max-height:184px;overflow-x:hidden;overflow-y:auto}.d-popover-tip-content-item{margin-left:4px;margin-bottom:8px;padding-left:4px;padding-right:4px;background-color:var(--grey-100);border-radius:2px;max-width:100%;overflow:hidden;white-space:nowrap}.d-popover-tip-content-item .d-popover-tip-item-text{display:inline-block;width:100%;line-height:24px;color:var(--grey-900);font-size:14px}.d-popover-tip-content-item-before{position:relative}.d-popover-tip-content-item-before:before{position:absolute;top:0;left:0;display:inline-block;background-color:var(--grey-100);border-radius:2px;width:20px;height:24px;content:"...";color:var(--grey-900);font-size:14px;text-align:center;z-index:1}.d-popover-tip-content-words{display:inline-block;padding-left:4px;padding-bottom:8px;width:100%;line-height:24px;color:var(--theme);font-size:14px}