@cw-devops/bk-magic-vue/lib/ui/big-tree.css

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

.bk-big-tree{
    overflow:auto
}

.bk-big-tree::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.bk-big-tree::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-big-tree.with-virtual-scroll .bk-big-tree-empty{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }

.bk-big-tree .bk-big-tree-empty{
        text-align:center;
        font-size:14px;
        color:#63656e;
    }

.bk-big-tree--small .bk-big-tree-node .node-content{
            font-size:12px;
        }

.bk-big-tree-node{
    position:relative;
    height:32px;
    padding-left:calc(var(--level) * var(--padding));
    line-height:32px;
    font-size:0;
    cursor:pointer
}

.bk-big-tree-node.has-link-line{
        padding-left:0;
        margin-left:calc(var(--level) * var(--padding))
    }

.bk-big-tree-node.has-link-line:not(.is-root):before{
            content:"";
            position:absolute;
            width:calc(var(--padding) - 8px);
            height:0;
            border-bottom:1px dashed #c3cdd7;
            left:calc((20px/2) - var(--padding));
            top:20px;
            z-index:1;
            pointer-events:none;
        }

.bk-big-tree-node.has-link-line:after{
            position:absolute;
            top:28px;
            left:calc(20px / 2);
            width:0;
            height:calc(var(--line) * 1px - 8px);
            border-left:1px dashed #c3cdd7;
            content:"";
            pointer-events:none;
            z-index:1;
        }

.bk-big-tree-node.has-link-line.is-leaf{
            padding-left:8px;
            margin-left:calc(var(--level) * var(--padding) + (20px - 4px))
        }

.bk-big-tree-node.has-link-line.is-leaf:before{
                width:calc(var(--padding) + (20px/2 - 4px));
                left:calc(0px - var(--padding) - (20px/2 - 4px));
            }

.bk-big-tree-node:hover{
        background-color:#f1f7ff;
    }

.bk-big-tree-node.is-selected{
        background-color:#e1ecff;
    }

.bk-big-tree-node.is-selected .node-icon{
            color:#fff;
            background-color:#3a84ff;
        }

.bk-big-tree-node.is-selected .node-content{
            color:#3a84ff;
        }

.bk-big-tree-node.is-leaf{
        padding-left:calc(var(--level) * var(--padding) + 20px + 2px);
    }

.bk-big-tree-node.is-disabled{
        cursor:not-allowed;
    }

.bk-big-tree-node .node-options{
        height:100%;
    }

.bk-big-tree-node .node-options .node-loading{
            display:inline-block;
            vertical-align:middle;
            width:20px;
            height:20px;
            margin:0 2px 0 0;
            background-image:url("images/spinner.svg");
            background-size:100% 100%;
        }

.bk-big-tree-node .node-options .node-folder-icon{
            display:inline-block;
            vertical-align:middle;
            position:relative;
            width:20px;
            height:20px;
            margin:0 2px 0 0;
            line-height:20px;
            text-align:center;
            font-size:12px;
            color:#979ba5;
            z-index:2
        }

.bk-big-tree-node .node-options .node-folder-icon:hover{
                color:#63656e;
            }

.bk-big-tree-node .node-options .node-checkbox{
            display:inline-block;
            vertical-align:middle;
            position:relative;
            width:16px;
            height:16px;
            margin:0 8px 0 0;
            border:1px solid #979ba5;
            border-radius:2px
        }

.bk-big-tree-node .node-options .node-checkbox.is-checked{
                border-color:#3a84ff;
                background-color:#3a84ff;
                background-clip:border-box
            }

.bk-big-tree-node .node-options .node-checkbox.is-checked:after{
                    content:"";
                    position:absolute;
                    top:1px;
                    left:4px;
                    width:4px;
                    height:8px;
                    border:2px solid #fff;
                    border-left:0;
                    border-top:0;
                    -webkit-transform-origin:center;
                            transform-origin:center;
                    -webkit-transform:rotate(45deg) scaleY(1);
                            transform:rotate(45deg) scaleY(1);
                }

.bk-big-tree-node .node-options .node-checkbox.is-checked.is-disabled{
                    background-color:#dcdee5;
                }

.bk-big-tree-node .node-options .node-checkbox.is-disabled{
                border-color:#dcdee5;
                cursor:not-allowed;
            }

.bk-big-tree-node .node-options .node-checkbox.is-indeterminate{
                border-width:7px 4px;
                border-color:#3a84ff;
                background-color:#fff;
                background-clip:content-box
            }

.bk-big-tree-node .node-options .node-checkbox.is-indeterminate:after{
                    visibility:hidden;
                }

.bk-big-tree-node .node-options .node-icon{
            display:inline-block;
            vertical-align:middle;
            margin:0 8px 0 0;
            font-size:18px;
        }

.bk-big-tree-node .node-content{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:14px;
    }