bk-magic-vue
Version:
基于蓝鲸 Magicbox 和 Vue 的前端组件库
3 lines (2 loc) • 7.27 kB
CSS
.bk-cascade{position:relative;border:1px solid #c4c6cc;border-radius:2px;line-height:30px;font-size:12px;color:#63656e;cursor:pointer}.bk-cascade.is-default-trigger.is-unselected:before{position:absolute;height:100%;content:attr(data-placeholder);left:11px;top:0;color:#c3cdd7;pointer-events:none}.bk-cascade.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-cascade.is-focus .bk-cascade-angle{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.bk-cascade: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-cascade.is-disabled{background-color:#fafafa;color:#c4c6cc;cursor:not-allowed}.bk-cascade.is-custom-trigger{border:none;-webkit-box-shadow:none;box-shadow:none}.bk-cascade.is-loading,.bk-cascade.is-readonly{background-color:#fafafa;cursor:default}.bk-cascade:hover .bk-cascade-clear{display:block}.bk-cascade .bk-cascade-loading{position:absolute;right:9px;top:8px;width:18px;height:18px}.bk-cascade .bk-cascade-angle{position:absolute;right:2px;top:4px;color:#979ba5;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-cascade .bk-cascade-clear{display:none;position:absolute;right:6px;top:8px;width:14px;height:14px;line-height:14px;background-color:#c4c6cc;border-radius:50%;text-align:center;font-size:14px;color:#fff;z-index:100}.bk-cascade .bk-cascade-clear:before{display:block;-webkit-transform:scale(.7);transform:scale(.7)}.bk-cascade .bk-cascade-clear:hover{background-color:#979ba5}.bk-cascade .bk-cascade-name{height:30px;padding:0 36px 0 11px;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-cascade .bk-tooltip.bk-cascade-dropdown{display:block}.bk-cascade .bk-tooltip.bk-cascade-dropdown>.bk-tooltip-ref{display:block}.bk-cascade-dropdown-content{border:1px solid #dcdee5;border-radius:2px;line-height:32px;background:#fff;color:#63656e;overflow:hidden}.bk-cascade-search-input{width:100%;height:32px;border:none;font-size:12px;outline:0;cursor:text}.bk-cascade-search-input::-webkit-input-placeholder{color:#c3cdd7}.bk-cascade-options{padding:0;list-style:none;overflow-y:auto}.bk-cascade-options::-webkit-scrollbar{width:6px;height:6px}.bk-cascade-options::-webkit-scrollbar-thumb{min-height:24px;border-radius:3px;background-color:#dcdee5}.bk-cascade-options.bk-options-single .bk-option.is-highlight,.bk-cascade-options.bk-options-single .bk-option:hover{background-color:#eaf3ff}.bk-cascade-options.bk-options-single .bk-option.is-selected{background-color:#f4f6fa}.bk-cascade-options .bk-option-group .bk-option-group-name{margin:0 16px;border-bottom:1px solid #dcdee5;color:#979ba5}.bk-cascade-options .bk-group-options{margin:0;padding:0;list-style:none}.bk-cascade-options .bk-group-options .bk-option{padding:0 12px}.bk-cascade-options .bk-option{position:relative;cursor:pointer}.bk-cascade-options .bk-option.is-highlight,.bk-cascade-options .bk-option:hover{color:#3a84ff;background-color:#eaf3ff}.bk-cascade-options .bk-option.is-disabled{color:#c4c6cc;cursor:not-allowed;background-color:#fff}.bk-cascade-options .bk-option.is-selected{color:#3a84ff;background-color:#f4f6fa}.bk-cascade-options .bk-option.is-selected.is-disabled{background-color:#fff;color:#c4c6cc}.bk-cascade-options .bk-option.is-selected.is-disabled .bk-option-icon{color:#c4c6cc}.bk-cascade-options .bk-option-content{position:relative;padding:0 16px}.bk-cascade-options .bk-option-content .bk-option-content-default{font-size:0}.bk-cascade-options .bk-option-content .bk-option-name{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:12px}.bk-cascade-options .bk-option-content .bk-option-icon{position:absolute;right:12px;top:12px;color:#3a84ff;font-size:12px;font-weight:700}.bk-cascade-empty{padding:0 10px;font-size:12px}.bk-cascade-extension{font-size:12px;padding:0 16px;border-radius:0 0 1px 1px;border-top:1px solid #dcdee5;background:#fafbfd}.bk-cascade-extension i{font-size:12px}.bk-cascade-extension:hover{background-color:#f0f1f5}.tippy-tooltip.bk-cascade-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-cascade-dropdown-theme[data-size=small] .tippy-arrow{display:none}.bk-cacade-search{border:none}.bk-cascade-panel{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.bk-cascade-panel .bk-cascade-panel-ul{float:left;height:100%;padding:0;margin:0;list-style:none;overflow-y:auto}.bk-cascade-panel .bk-cascade-panel-ul::-webkit-scrollbar{width:6px;height:6px}.bk-cascade-panel .bk-cascade-panel-ul::-webkit-scrollbar-thumb{min-height:24px;border-radius:3px;background-color:#dcdee5}.bk-cascade-panel .bk-cascade-border{border-right:1px solid #dcdee5}.bk-cascade-panel .bk-option{position:relative}.bk-cascade-panel .bk-option .bk-cascade-right{position:absolute;top:6px;right:5px;font-size:20px;color:#979ba5}.bk-cascade-panel .bk-option:first-of-type{margin-top:4px}.bk-cascade-panel .bk-option:last-of-type{margin-bottom:4px}.bk-cascade-panel .is-multiple{background-color:#fff}.bk-option-none{display:block;font-size:12px;line-height:32px;text-align:center;color:#63656e}.bk-cascade-search{height:calc(100% - 36px)}.bk-option-content{position:relative}.bk-option-content .bk-cascade-check{position:absolute;top:0;left:16px}.bk-option-content .bk-margin-left{margin-left:26px}.bk-cascade-tag-list{padding:5px 36px 0 10px;min-height:30px}.bk-cascade-tag-list:after{display:block;clear:both;content:"";font-size:0;height:0;visibility:hidden}.bk-cascade-tag-list .bk-cascade-tag-item{display:inline-block;cursor:pointer;position:relative;margin:0 6px 5px 0;border-radius:2px;float:left;height:22px;line-height:22px;overflow:hidden;background-color:#f0f1f5}.bk-cascade-tag-list .bk-cascade-tag-item:hover{background-color:#dcdee5}.bk-cascade-tag-list .bk-cascade-tag-item:hover .remove-key{color:#63656e}.bk-cascade-tag-list .bk-cascade-item-name{color:#63656e;font-size:12px;border:none;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2px;padding:0 5px;min-height:21px;line-height:19px;word-break:break-all;max-width:150px;overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.bk-cascade-tag-list .remove-key{position:absolute;width:18px;height:16px;top:3px;right:4px;display:inline-block;text-align:center}.bk-cascade-tag-list .remove-key .icon-close{color:#979ba5;position:absolute;top:0;left:0;display:inline-block;text-align:center;cursor:pointer;font-size:18px}.bk-button-icon-loading{position:relative;top:2px;color:#3a84ff}.bk-button-icon-loading .loading{width:14px;height:14px;border:2px solid;border-right:2px solid #fff;border-radius:50%;-webkit-animation:button-icon-loading 1s linear infinite;animation:button-icon-loading 1s linear infinite;margin:-7px auto 0;display:inline-block}
/*# sourceMappingURL=cascade.min.css.map */