kingdot/lib/theme/Select.css

A UI Components Library For Vue

.kd-select,.kd-select-input[readonly]{cursor:pointer}.kd-select-large{min-height:36px}.kd-select-large .kd-select-input-inner{height:36px}.kd-select-large .kd-select-tags-item{margin:5px 0 5px 8px}.kd-select-small{min-height:28px}.kd-select-small .kd-select-input-inner{height:28px}.kd-select-small .kd-select-tags-item{margin:3px 0 3px 8px}.kd-select-mini{min-height:26px}.kd-select-mini .kd-select-input-inner{height:26px}.kd-select-mini .kd-select-tags-item{margin:2px 0 2px 8px}.kd-select{position:relative;display:inline-block;width:300px;border-radius:4px;background:#222a41;color:#fff}.kd-select.kd-select-fluid{width:100%}.kd-select-clear-hover :hover .kd-select-arrow-icon{display:none}.kd-select-clear-hover :hover .kd-select-clear-icon{display:block}.kd-select-clear-hover :hover .kd-select-clear-icon:hover{color:#8d919b}.kd-select-input{position:relative;border:1px solid #8d919b;padding:0 32px 0 16px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:12px;transition:all .2s}.kd-select-active .kd-select-input,.kd-select-input:hover{border:1px solid #557dfc}.kd-select-input-text{line-height:30px;display:inline-block}.kd-select-input-inner{display:inline-block;width:100%;padding:0;height:30px;line-height:30px;font-size:12px;border:none;color:#8d919b;background:#222a41}.kd-select-clear-icon{display:none}.kd-select-arrow-icon,.kd-select-clear-icon{position:absolute;right:10px;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;color:#ccc}.kd-select-arrow-icon-rotate{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.kd-select-input-wrap{-ms-flex:1;flex:1}.kd-select-multiple{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 32px 0 0}.kd-select-multiple .kd-select-input-wrap{margin-left:10px;min-width:10px}.kd-select-tags{width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.kd-select-tags li{float:left}.kd-select-tags-content{display:contents}.kd-select-tags-item{background:#525c77;height:20px;border-radius:4px;padding:0 8px;margin:5px 0 5px 8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:1px solid #e9e9eb;box-sizing:border-box}.kd-select-tags-item .kd-select-tag-label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.kd-select-tag-close{display:inline-block;margin-left:8px;width:20px;height:20px;line-height:20px;vertical-align:middle;text-align:center;border-radius:50%;background:#ccc;color:#828dac;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}.kd-select-disabled,.kd-select-input-disabled{background:#2f374f;cursor:not-allowed}.kd-select-disabled .kd-select-input:hover{border-color:#8d919b}.kd-select-input-disabled{color:#4f576e}.kd-select-no-data{height:32px;line-height:32px;text-align:center;color:#ccc}.kd-select-dropdown{white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-height:290px;overflow-y:auto;background:#2c324d;color:#fff}.kd-select-optimize{position:relative}.kd-select-optimize .kd-select-lists,.kd-select-optimize .kd-select-phantom{position:absolute;left:0;top:0;right:0}.kd-select-optimize .kd-select-phantom{z-index:-1}.kd-option-group-item{display:inline-block;height:32px;line-height:32px;color:#b2b2b2;padding:0 16px;font-size:12px}.kd-option-group .kd-option{padding:0 32px}.kd-tooltip-light .kd-dropdown-tooltip .kd-tooltip-inner{background:#2c324d}.kd-tooltip-light[data-popper-placement^=top] .kd-dropdown-tooltip .kd-tooltip-arrow{border-top-color:#2c324d}.kd-tooltip-light[data-popper-placement^=bottom] .kd-dropdown-tooltip .kd-tooltip-arrow{border-bottom-color:#2c324d}