@cw-devops/bk-magic-vue/lib/ui/select.min.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

:root{--font-size:12px;--icon-size:14px;--extension-size:16px}:root .medium-font{--font-size:12px;--icon-size:16px;--extension-size:20px}:root .large-font{--font-size:12px;--icon-size:20px;--extension-size:22px}:root .bk-select-large,:root .bk-select-popover-large{--font-size:12px}:root .bk-select-popover-small,:root .bk-select-small{--font-size:12px}.bk-select{position:relative;border:1px solid #cbd5e0;border-radius:2px;line-height:30px;color:#63656e;cursor:pointer;background-color:#fff;font-size:12px;font-size:var(--font-size)}.bk-select:focus{border-color:#3a84ff}.bk-select.only-bottom-border{border-color:transparent transparent #c4c6cc}.bk-select.only-bottom-border.is-focus{border-color:transparent transparent #3a84ff;-webkit-box-shadow:none;box-shadow:none}.bk-select.only-bottom-border.is-disabled,.bk-select.only-bottom-border.is-loading,.bk-select.only-bottom-border.is-readonly{border-color:transparent transparent #dcdee5}.bk-select.is-default-trigger.is-unselected:before{position:absolute;height:100%;content:attr(data-placeholder);left:10px;top:0;color:#c3cdd7;pointer-events:none}.bk-select.is-default-trigger.is-unselected.is-disabled:before,.bk-select.is-default-trigger.is-unselected.is-readonly:before{color:#c4c6cc}.bk-select.has-prefix-icon.is-default-trigger.is-unselected:before{left:24px}.bk-select.has-prefix-icon .bk-select-name{padding-left:24px}.bk-select.is-focus{border-color:#3a84ff;-webkit-box-shadow:0 0 4px rgba(58,132,255,.4);box-shadow:0 0 4px rgba(58,132,255,.4)}.bk-select.is-focus .bk-select-angle{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);top:5px}.bk-select.is-disabled{background-color:rgba(203,213,224,.2);cursor:not-allowed;border-color:#cbd5e0}.bk-select.is-disabled .bk-select-name{color:#8797aa}.bk-select.is-disabled .bk-select-angle{color:#c4c6cc}.bk-select.is-loading,.bk-select.is-readonly{background-color:#fafafa;cursor:default;border:1px solid #dcdee5}.bk-select:hover .bk-select-clear{display:block}.bk-select:hover .bk-select-clear+.bk-select-angle{display:none}.bk-select .bk-select-loading{position:absolute;right:9px;top:8px;width:18px;height:18px}.bk-select .bk-select-angle{position:absolute;right:2px;top:4px;color:#cbd5e0;font-size:22px;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.bk-select .bk-select-clear{display:none;position:absolute;right:6px;top:8px;text-align:center;font-size:14px;z-index:100;color:#cbd5e0}.bk-select .bk-select-prefix-icon{position:absolute;left:6px;top:calc(50% - 7px);font-size:14px;font-size:var(--icon-size)}.bk-select .bk-select-name{font-size:12px;color:#081e40;width:100%;height:30px;padding:0 36px 0 10px;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.bk-select .bk-select-name,.bk-select .bk-select-name:active,.bk-select .bk-select-name:hover{outline:none}.bk-select .bk-tooltip.bk-select-dropdown{display:block}.bk-select .bk-tooltip.bk-select-dropdown>.bk-tooltip-ref{display:block}.bk-select-dropdown-content{border:0;border-radius:2px;line-height:30px;background:#fff;color:#63656e;overflow:hidden}.bk-select-search-wrapper{margin:15px 10px;border:1px solid #cbd5e0;border-radius:2px;position:relative;padding:0 5px}.bk-select-search-wrapper .left-icon{position:absolute;font-size:16px;color:#979ba5;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:10px}.bk-select-search-input{width:100%;height:30px;padding:0 10px 0 30px;border:none;font-size:12px;font-size:var(--font-size);outline:0;cursor:text}.bk-select-search-input::-webkit-input-placeholder{font-size:12px;color:#cbd5e0}.bk-select-search-input[focus-within]{border-color:#3a84ff}.bk-select-search-input:focus-within{border-color:#3a84ff}.bk-select-search-input>i{color:#cbd5e0}.bk-options{padding:0;margin:0;overflow-y:auto;list-style:none}.bk-options::-webkit-scrollbar{width:6px;height:6px}.bk-options::-webkit-scrollbar-thumb{min-height:24px;border-radius:3px;background-color:#dcdee5}.bk-options.bk-options-single .bk-option.is-selected{background-color:rgba(58,132,255,.05)}.bk-options.bk-options-single .bk-option.is-highlight,.bk-options.bk-options-single .bk-option:hover{background-color:#eaf3ff}.bk-options .bk-option-group .bk-option-group-name{margin:0 16px;font-size:12px;font-size:var(--font-size);border-bottom:1px solid #dcdee5;color:#979ba5;position:relative}.bk-options .bk-option-group .bk-option-group-name.is-collapse{cursor:pointer;margin:0 15px}.bk-options .bk-option-group .bk-option-group-name .bk-option-group-prefix{width:10px;display:inline-block;text-align:center;line-height:30px}.bk-options .bk-option-group .bk-option-group-name .bk-option-group-prefix.readonly{cursor:not-allowed}.bk-options .bk-option-group .bk-option-group-name .btn-check-all{position:absolute;disabled:inline-block;right:14px;top:2px}.bk-options .bk-option-group .bk-option-group-name .btn-check-all .bk-form-checkbox{margin-right:0!important}.bk-options .bk-group-options{margin:0;padding:0;list-style:none}.bk-options .bk-group-options .bk-option{padding:0 12px}.bk-options .bk-option{color:#081e40;position:relative;cursor:pointer}.bk-options .bk-option.is-selected{color:#3a84ff;background-color:rgba(58,132,255,.05)}.bk-options .bk-option.is-selected:hover{color:#3a84ff}.bk-options .bk-option.is-highlight,.bk-options .bk-option:hover{color:#081e40;background-color:rgba(58,132,255,.1)}.bk-options .bk-option.is-disabled{color:#cbd5e0;cursor:not-allowed;background-color:#fff}.bk-options .bk-option.is-disabled:hover{background-color:#fff}.bk-options .bk-option.is-selected.is-disabled{background-color:#fff;color:#c4c6cc}.bk-options .bk-option.is-selected.is-disabled .bk-option-icon{color:#c4c6cc}.bk-options .bk-option.is-selected.is-disabled:hover{background-color:#fff}.bk-options .bk-option:first-child{margin-top:6px}.bk-options .bk-option:last-child{margin-bottom:6px}.bk-options .bk-option.bk-virtual-option{margin:0}.bk-options .bk-virtual-select .bk-min-nav-slide{width:6px;border-radius:3px;background-color:#dcdee5}.bk-options .bk-option-content{position:relative;padding:0 16px}.bk-options .bk-option-content .bk-option-content-default{font-size:0}.bk-options .bk-option-content .bk-option-icon{position:absolute;right:12px;top:4px;color:#3a84ff;font-size:26px;font-weight:400}.bk-options .bk-option-content .bk-option-icon~.bk-option-name{padding-right:20px}.bk-options .bk-option-content .bk-option-name{vertical-align:middle;font-size:12px;font-size:var(--font-size);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-options .bk-option-content .bk-option-checkbox .bk-checkbox-text{font-size:12px}.bk-options .bk-option-content.allSelected{color:#3a84ff}.bk-select-empty{padding:0 10px;text-align:center}.bk-select-empty,.bk-select-extension{font-size:12px;font-size:var(--font-size)}.bk-select-extension{padding:0 16px;border-radius:0 0 1px 1px;border-top:1px solid #dcdee5;background:#fafbfd}.bk-select-extension i{font-size:16px;font-size:var(--extension-size)}.bk-select-extension:hover{background-color:#f0f1f5}.tippy-tooltip.bk-select-dropdown-theme[data-size=small]{padding:0;-webkit-box-shadow:0 3px 9px 0 rgba(0,0,0,.1);box-shadow:0 3px 9px 0 rgba(0,0,0,.1)}.tippy-tooltip.bk-select-dropdown-theme[data-size=small] .tippy-arrow{display:none}.bk-select-large{line-height:32px}.bk-select-large .bk-select-angle{top:6px}.bk-select-large .bk-select-clear{top:11px}.bk-select-large .bk-select-name{height:32px}.bk-select-small{line-height:28px}.bk-select-small .bk-select-angle{top:2px}.bk-select-small .bk-select-clear{top:8px}.bk-select-small .bk-select-name{height:28px}.bk-select-popover-large .bk-options .bk-option-content .bk-option-name{font-size:12px;font-size:var(--font-size)}.bk-select-tag-container{height:auto;min-height:30px;padding:0 30px 0 10px;overflow:hidden}.bk-select-tag-container.is-fixed-height{height:30px}.bk-select-tag-container.is-focus{height:auto!important;overflow:auto}.bk-select-tag-container.is-large-size{min-height:34px}.bk-select-tag-container.is-large-size.is-fixed-height{height:34px}.bk-select-tag-container.is-large-size .bk-select-tag{height:24px}.bk-select-tag-container.is-large-size .bk-select-overflow-tag{min-height:24px;line-height:24px}.bk-select-tag-container.is-small-size{min-height:24px}.bk-select-tag-container.is-small-size.is-fixed-height{height:24px}.bk-select-tag-container.is-small-size .bk-select-tag{height:20px}.bk-select-tag-container.is-small-size .bk-select-overflow-tag{min-height:20px;line-height:20px}.bk-select-tag-container.is-available .bk-select-tag:hover{color:#3a84ff;background-color:rgba(58,132,255,.1)}.bk-select-tag-container.is-available .icon-close:hover{color:#63656e}.bk-select-tag-container.has-prefix-icon{padding-left:24px}.bk-select-tag-container .bk-select-tag{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;color:#3a84ff;height:22px;line-height:22px;margin:0 6px 0 0;padding:0 2px 0 5px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(58,132,255,.05);border-radius:2px;font-size:12px;font-size:var(--font-size)}.bk-select-tag-container .bk-select-tag .icon-close{margin-left:5px;-webkit-box-flex:18px;-ms-flex:18px 0 0px;flex:18px 0 0;font-size:18px;color:#979ba5}.bk-select-tag-container .bk-select-tag.width-limit-tag{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-select-tag-container .bk-select-tag.width-limit-tag span{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}.bk-select-tag-container .bk-select-overflow-tag{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0 5px;margin:0 6px 0 0;min-width:22px;line-height:22px;font-size:12px;font-size:var(--font-size);text-align:center;border-radius:2px;color:#3a84ff;background:rgba(58,132,255,.05)}.bk-select-tag-container .bk-select-overflow-tag~.bk-select-tag{visibility:hidden;pointer-events:none}.bk-select-bottom-loading{position:relative;text-align:center;bottom:0;height:32px;line-height:25px;width:100%;z-index:777}.bk-select-tag-input{height:22px;max-width:190px;padding:0;margin:4px 5px 4px 0;overflow:hidden;border:none;outline:none}
/*# sourceMappingURL=select.min.css.map */