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

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

.search-select-wrap{position:relative;overflow:inherit;z-index:9;height:30px}.search-select-wrap .bk-search-select{background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:12px;min-height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;border:1px solid #c4c6cc;border-radius:2px;outline:none;resize:none;-webkit-transition:border .2s linear;transition:border .2s linear;overflow:hidden;color:#63656e;-ms-flex-wrap:wrap;flex-wrap:wrap}.search-select-wrap .bk-search-select.is-focus{border-color:#3c96ff!important;background:#fff!important;color:#3c96ff;overflow:auto}.search-select-wrap .bk-search-select .search-prefix{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.search-select-wrap .bk-search-select .search-input{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;padding:0 2px;text-align:left;overflow:visible;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:26px;margin-top:4px;-webkit-transition:max-height .3s cubic-bezier(.4,0,.2,1);transition:max-height .3s cubic-bezier(.4,0,.2,1)}.search-select-wrap .bk-search-select .search-input-chip{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-width:99%;display:inline-block;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;color:#63656e;margin:0 0 4px 6px;padding-left:8px;position:relative;background:#f0f1f5;border-radius:2px;line-height:22px}.search-select-wrap .bk-search-select .search-input-chip.hidden-chip{visibility:hidden}.search-select-wrap .bk-search-select .search-input-chip:hover{background:#dcdee5}.search-select-wrap .bk-search-select .search-input-chip:hover .chip-clear{color:#63656e}.search-select-wrap .bk-search-select .search-input-chip .chip-name{display:inline-block;margin-right:20px;word-break:break-all}.search-select-wrap .bk-search-select .search-input-chip .chip-clear{color:#979ba5;position:absolute;right:3px;line-height:normal;display:inline-block;top:4px;text-align:center;cursor:pointer;font-size:14px}.search-select-wrap .bk-search-select .search-input-input{position:relative;padding:0 10px;color:#63656e;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;border:none;height:100%;min-width:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-4px}.search-select-wrap .bk-search-select .search-input-input .div-input{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:20px;padding:5px 0;height:30px;word-break:break-all}.search-select-wrap .bk-search-select .search-input-input .div-input:focus{outline:none}.search-select-wrap .bk-search-select .search-input-input .input-before:before{content:attr(data-placeholder);color:#c4c6cc;padding-left:2px}.search-select-wrap .bk-search-select .search-input-input .input-after:after{content:attr(data-tips);color:#c4c6cc;padding-left:2px}.search-select-wrap .bk-search-select .search-select-wrap .bk-search-select .search-nextfix{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;height:100%}.search-select-wrap .bk-search-select .search-nextfix,.search-select-wrap .bk-search-select .search-select-wrap .bk-search-select .search-nextfix{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.search-select-wrap .bk-search-select .search-nextfix{color:#c4c6cc}.search-select-wrap .bk-search-select .search-nextfix .search-clear{color:#c4c6cc;font-size:14px;width:12px;height:12px;margin-right:6px}.search-select-wrap .bk-search-select .search-nextfix .search-clear:hover{cursor:pointer;color:#979ba5}.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon{margin-right:8px;font-size:16px;-webkit-transition:color .2s linear;transition:color .2s linear}.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon:hover{cursor:pointer;color:#3c96ff}.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon.is-focus{border-color:#3c96ff!important;background:#fff!important;color:#3c96ff}.search-select-wrap .bk-search-select::-webkit-scrollbar{width:3px;height:5px}.search-select-wrap .bk-search-select::-webkit-scrollbar-thumb{border-radius:20px;background:#e6e9ea;-webkit-box-shadow:inset 0 0 6px hsla(0,0%,80%,.3);box-shadow:inset 0 0 6px hsla(0,0%,80%,.3)}.search-select-wrap .bk-select-tips{color:#ea3636;font-size:12px;margin-top:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:16px}.search-select-wrap .bk-select-tips .select-tips{font-size:16px;margin-right:5px;width:16px;height:16px}
/*# sourceMappingURL=search-select.min.css.map */