bk-magic-vue/lib/ui/tree.css

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

.bk-loading{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background-color:rgba(255, 255, 255, 0.9);
    z-index:100;
}

.bk-loading .bk-loading-wrapper{
        text-align:center;
        line-height:1;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
    }

.bk-loading-title{
        text-align:center;
        font-size:14px;
        color:#63656e;
        line-height:normal;
        line-height:initial;
        margin-top:5px;
    }

.bk-loading .bk-loading1{
        position:relative;
        width:75px;
        height:14px;
        margin:auto;
        display:inline-block;
    }

.bk-loading .bk-loading1 .point{
            position:absolute;
            top:0;
            width:14px;
            height:14px;
            -webkit-animation-name:scale-animate;
                    animation-name:scale-animate;
            -webkit-animation-duration:.8s;
                    animation-duration:.8s;
            -webkit-animation-iteration-count:infinite;
                    animation-iteration-count:infinite;
            -webkit-animation-direction:normal;
                    animation-direction:normal;
            -webkit-transform:scale(.6);
                    transform:scale(.6);
            border-radius:19px;
        }

.bk-loading .bk-loading1 .point1{
            background-color:#fd6154;
            left:0;
            -webkit-animation-delay:0.1s;
                    animation-delay:0.1s;
        }

.bk-loading .bk-loading1 .point2{
            background-color:#ffb726;
            left:20px;
            -webkit-animation-delay:0.25s;
                    animation-delay:0.25s;
        }

.bk-loading .bk-loading1 .point3{
            background-color:#4cd084;
            left:40px;
            -webkit-animation-delay:0.4s;
                    animation-delay:0.4s;
        }

.bk-loading .bk-loading1 .point4{
            background-color:#57a3f1;
            left:60px;
            -webkit-animation-delay:0.55s;
                    animation-delay:0.55s;
        }

.bk-dot-loading.bk-size-mini, .bk-loading1.bk-size-mini{
        width:30px;
    }

.bk-dot-loading.bk-size-mini .point, .bk-loading1.bk-size-mini .point{
            width:6px;
            height:6px;
        }

.bk-dot-loading.bk-size-mini .point1, .bk-loading1.bk-size-mini .point1{
            left:0;
        }

.bk-dot-loading.bk-size-mini .point2, .bk-loading1.bk-size-mini .point2{
            left:10px;
        }

.bk-dot-loading.bk-size-mini .point3, .bk-loading1.bk-size-mini .point3{
            left:20px;
        }

.bk-dot-loading.bk-size-mini .point4, .bk-loading1.bk-size-mini .point4{
            left:30px;
        }

.bk-dot-loading.bk-size-small, .bk-loading1.bk-size-small{
        width:45px;
    }

.bk-dot-loading.bk-size-small .point, .bk-loading1.bk-size-small .point{
            width:10px;
            height:10px;
        }

.bk-dot-loading.bk-size-small .point1, .bk-loading1.bk-size-small .point1{
            left:0;
        }

.bk-dot-loading.bk-size-small .point2, .bk-loading1.bk-size-small .point2{
            left:15px;
        }

.bk-dot-loading.bk-size-small .point3, .bk-loading1.bk-size-small .point3{
            left:30px;
        }

.bk-dot-loading.bk-size-small .point4, .bk-loading1.bk-size-small .point4{
            left:45px;
        }

.bk-dot-loading.bk-black .point1,
        .bk-dot-loading.bk-black .point2,
        .bk-dot-loading.bk-black .point3,
        .bk-dot-loading.bk-black .point4,
        .bk-loading1.bk-black .point1,
        .bk-loading1.bk-black .point2,
        .bk-loading1.bk-black .point3,
        .bk-loading1.bk-black .point4{
            background:#979ba5;
        }

.bk-dot-loading.bk-primary .point1,
        .bk-dot-loading.bk-primary .point2,
        .bk-dot-loading.bk-primary .point3,
        .bk-dot-loading.bk-primary .point4,
        .bk-loading1.bk-primary .point1,
        .bk-loading1.bk-primary .point2,
        .bk-loading1.bk-primary .point3,
        .bk-loading1.bk-primary .point4{
            background:#3c96ff;
        }

.bk-dot-loading.bk-danger .point1,
        .bk-dot-loading.bk-danger .point2,
        .bk-dot-loading.bk-danger .point3,
        .bk-dot-loading.bk-danger .point4,
        .bk-loading1.bk-danger .point1,
        .bk-loading1.bk-danger .point2,
        .bk-loading1.bk-danger .point3,
        .bk-loading1.bk-danger .point4{
            background:#ff5656;
        }

.bk-dot-loading.bk-warning .point1,
        .bk-dot-loading.bk-warning .point2,
        .bk-dot-loading.bk-warning .point3,
        .bk-dot-loading.bk-warning .point4,
        .bk-loading1.bk-warning .point1,
        .bk-loading1.bk-warning .point2,
        .bk-loading1.bk-warning .point3,
        .bk-loading1.bk-warning .point4{
            background:#ffb848;
        }

.bk-dot-loading.bk-default .point1,
        .bk-dot-loading.bk-default .point2,
        .bk-dot-loading.bk-default .point3,
        .bk-dot-loading.bk-default .point4,
        .bk-loading1.bk-default .point1,
        .bk-loading1.bk-default .point2,
        .bk-loading1.bk-default .point3,
        .bk-loading1.bk-default .point4{
            background:#979BA5;
        }

@keyframes scale-animate{
    0%{
        -webkit-transform:scale(1);
                transform:scale(1);
    }

    100%{
        -webkit-transform:scale(.6);
                transform:scale(.6);
    }
}

@-webkit-keyframes scale-animate{
    0%{
        -webkit-transform:scale(1);
    }

    100%{
        -webkit-transform:scale(.6);
    }
}

.bk-spin-loading,
.bk-loading2{
    width:48px;
    height:48px;
    position:relative;
    margin:auto;
    display:inline-block;
    vertical-align:middle;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
}

.bk-spin-loading .rotate, .bk-loading2 .rotate{
        position:absolute;
        width:6px;
        height:8px;
        -webkit-transform-origin:50% 24px;
                transform-origin:50% 24px;
        border-radius:8px;
        -webkit-transform:scale(0.4);
                transform:scale(0.4);
        -webkit-animation-name:fade;
                animation-name:fade;
        -webkit-animation-duration:1.2s;
                animation-duration:1.2s;
        -webkit-animation-iteration-count:infinite;
                animation-iteration-count:infinite;
        -webkit-animation-direction:normal;
                animation-direction:normal;
    }

.bk-spin-loading.bk-spin-loading-success .rotate, .bk-loading2.bk-spin-loading-success .rotate{
            -webkit-animation-name:fadeSuccess;
                    animation-name:fadeSuccess;
        }

.bk-spin-loading.bk-spin-loading-danger .rotate, .bk-loading2.bk-spin-loading-danger .rotate{
            -webkit-animation-name:fadeDanger;
                    animation-name:fadeDanger;
        }

.bk-spin-loading.bk-spin-loading-warning .rotate, .bk-loading2.bk-spin-loading-warning .rotate{
            -webkit-animation-name:fadeWarning;
                    animation-name:fadeWarning;
        }

.bk-spin-loading.bk-spin-loading-primary .rotate, .bk-loading2.bk-spin-loading-primary .rotate{
            -webkit-animation-name:fadePrimary;
                    animation-name:fadePrimary;
        }

.bk-spin-loading.bk-spin-loading-white .rotate, .bk-loading2.bk-spin-loading-white .rotate{
            -webkit-animation-name:fadeWhite;
                    animation-name:fadeWhite;
        }

.bk-spin-loading .rotate1, .bk-loading2 .rotate1{
        -webkit-animation-delay:0.45s;
                animation-delay:0.45s;
        -webkit-transform:rotate(-90deg);
                transform:rotate(-90deg);
    }

.bk-spin-loading .rotate2, .bk-loading2 .rotate2{
        -webkit-animation-delay:0.6s;
                animation-delay:0.6s;
        -webkit-transform:rotate(-45deg);
                transform:rotate(-45deg);
    }

.bk-spin-loading .rotate3, .bk-loading2 .rotate3{
        -webkit-animation-delay:0.75s;
                animation-delay:0.75s;
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }

.bk-spin-loading .rotate4, .bk-loading2 .rotate4{
        -webkit-animation-delay:0.9s;
                animation-delay:0.9s;
        -webkit-transform:rotate(45deg);
                transform:rotate(45deg);
    }

.bk-spin-loading .rotate5, .bk-loading2 .rotate5{
        -webkit-animation-delay:1.05s;
                animation-delay:1.05s;
        -webkit-transform:rotate(90deg);
                transform:rotate(90deg);
    }

.bk-spin-loading .rotate6, .bk-loading2 .rotate6{
        -webkit-animation-delay:1.2s;
                animation-delay:1.2s;
        -webkit-transform:rotate(135deg);
                transform:rotate(135deg);
    }

.bk-spin-loading .rotate7, .bk-loading2 .rotate7{
        -webkit-animation-delay:1.35s;
                animation-delay:1.35s;
        -webkit-transform:rotate(180deg);
                transform:rotate(180deg);
    }

.bk-spin-loading .rotate8, .bk-loading2 .rotate8{
        -webkit-animation-delay:1.5s;
                animation-delay:1.5s;
        -webkit-transform:rotate(-135deg);
                transform:rotate(-135deg);
    }

.bk-spin-loading.bk-spin-loading-large, .bk-loading2.bk-spin-loading-large{
        width:68px;
        height:68px;
    }

.bk-spin-loading.bk-spin-loading-large .rotate, .bk-loading2.bk-spin-loading-large .rotate{
            width:10px;
            height:12px;
            border-radius:12px;
            -webkit-transform-origin:50% 34px;
                    transform-origin:50% 34px;
        }

.bk-spin-loading.bk-spin-loading-small, .bk-loading2.bk-spin-loading-small{
        width:32px;
        height:32px;
    }

.bk-spin-loading.bk-spin-loading-small .rotate, .bk-loading2.bk-spin-loading-small .rotate{
            width:4px;
            height:5px;
            border-radius:5px;
            -webkit-transform-origin:50% 16px;
                    transform-origin:50% 16px;
        }

.bk-spin-loading.bk-spin-loading-mini, .bk-loading2.bk-spin-loading-mini{
        width:16px;
        height:16px;
    }

.bk-spin-loading.bk-spin-loading-mini .rotate, .bk-loading2.bk-spin-loading-mini .rotate{
            width:2px;
            height:3px;
            border-radius:3px;
            -webkit-transform-origin:50% 8px;
                    transform-origin:50% 8px;
        }

@keyframes fade{
    0%{
        background-color:#39424e;
    }

    100%{
        background-color:transparent;
    }
}

@-webkit-keyframes fade{
    0%{
        background-color:#39424e;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeSuccess{
    0%{
        background-color:#2dcb56;
    }

    100%{
        background-color:transparent;
    }
}

@-webkit-keyframes fadeSuccess{
    0%{
        background-color:#2dcb56;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadePrimary{
    0%{
        background-color:#3c96ff;
    }

    100%{
        background-color:transparent;
    }
}

@-webkit-keyframes fadePrimary{
    0%{
        background-color:#3c96ff;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeDanger{
    0%{
        background-color:#ff5656;
    }

    100%{
        background-color:transparent;
    }
}

@-webkit-keyframes fadeDanger{
    0%{
        background-color:#ff5656;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeWarning{
    0%{
        background-color:#ffb848;
    }

    100%{
        background-color:transparent;
    }
}

@-webkit-keyframes fadeWarning{
    0%{
        background-color:#ffb848;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeWhite{
    0%{
        background-color:rgb(255, 255, 255);
    }

    100%{
        background-color:transparent;
    }
}

@-webkit-keyframes fadeWhite{
    0%{
        background-color:rgb(255, 255, 255);
    }

    100%{
        background-color:transparent;
    }
}

.bk-loading-box,
.bk-loading{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background-color:rgba(255, 255, 255, 0.9);
    z-index:100;
}

.bk-loading-box .bk-loading-wrapper, .bk-loading .bk-loading-wrapper{
        text-align:center;
        line-height:1;
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%, -50%);
                transform:translate(-50%, -50%);
    }

.bk-loading-box-title, .bk-loading-title{
        text-align:center;
        font-size:14px;
        color:#63656e;
        line-height:normal;
        line-height:initial;
        margin-top:5px;
    }

@keyframes fade{
    0%{
        background-color:#39424e;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeSuccess{
    0%{
        background-color:#30d878;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadePrimary{
    0%{
        background-color:#3c96ff;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeDanger{
    0%{
        background-color:#ff5656;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeWarning{
    0%{
        background-color:#ffb400;
    }

    100%{
        background-color:transparent;
    }
}

@keyframes fadeWhite{
    0%{
        background-color:white;
    }

    100%{
        background-color:transparent;
    }
}

@-webkit-keyframes animate{
    0%{
        -webkit-transform:scale(.5);
                transform:scale(.5)
    }

    100%{
        -webkit-transform:scale(.3);
                transform:scale(.3)
    }
}

@keyframes animate{
    0%{
        -webkit-transform:scale(.5);
                transform:scale(.5)
    }

    100%{
        -webkit-transform:scale(.3);
                transform:scale(.3)
    }
}

.bk-default-loading{
    display:inline-block;
}

.bk-default-loading .bk-loading-wrapper{
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        position:absolute;
        width:100%;
        height:100%;
        left:unset;
        top:0;
        transform:unset;
        -webkit-transform:unset;
        background:inherit;
        padding:0 25%
    }

.bk-default-loading .bk-loading-wrapper :nth-child(1){
            margin:unset;
          }

.fade-enter-active,
.fade-leave-active{
    -webkit-transition:opacity .2s;
    transition:opacity .2s;
}

.fade-enter,
.fade-leave-to{
    opacity:0
}

.bk-tree{
    font-size:14px;
    -webkit-transition:.3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out;
    transition:.3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out;
}

.bk-tree .expand-enter-active{
        -webkit-transition:all 3s ease;
        transition:all 3s ease;
        height:50px;
        overflow:hidden;
    }

.bk-tree .expand-leave-active{
        -webkit-transition:all 3s ease;
        transition:all 3s ease;
        height:0px;
        overflow:hidden;
    }

.bk-tree .expand-enter,
    .bk-tree .bk-tree .expand-leave{
        height:0;
        opacity:0;
    }

.bk-tree ul{
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        list-style-type:none;
        text-align:left;
        padding-left:16px;
    }

.bk-tree li{
        position:relative;
        margin:0;
        list-style:none;
        list-style-type:none;
        text-align:left
    }

.bk-tree li.leaf{
            padding-left:16px;
        }

.bk-tree .tree-drag-node{
        line-height:32px;
    }

.bk-tree .tree-drag-node .tree-expanded-icon{
            position:relative;
            color:#c0c4cc;
            cursor:pointer;
        }

.bk-tree .tree-drag-node .tree-node{
            display:inline-block;
            height:32px;
            font-size:0;
        }

.bk-tree .loading{
        width:14px;
        height:14px;
        display:inline-block;
        top:-5px;
    }

.bk-tree .node-title{
        display:inline-block;
        margin-left:5px;
        border-radius:3px;
        font-size:14px;
        cursor:pointer;
    }

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

.bk-tree .node-icon{
        display:inline-block;
        font-size:14px;
    }

.bk-tree .bk-form-checkbox{
        position:relative;
        display:inline-block;
        vertical-align:middle;
        width:14px;
        height:14px;
        border:1px solid #979ba5;
        border-radius:2px;
    }

.bk-tree .bk-form-checkbox input[type=checkbox]{
            display:none;
        }

.bk-tree .bk-form-checkbox:focus{
            border-color:#3c96ff;
            outline:none;
        }

.bk-tree .bk-form-checkbox--indeterminate{
            border-color:#3a84ff;
            background-color:#3a84ff;
            background-clip:content-box
        }

.bk-tree .bk-form-checkbox--indeterminate::after{
                content:'';
                display:block;
                width:8px;
                height:2px;
                background-color:#fff;
                position:absolute;
                top:50%;
                left:50%;
                -webkit-transform:translate(-50%, -50%);
                        transform:translate(-50%, -50%);
                border-radius:2px;
            }

.bk-tree .bk-form-checkbox--checked{
            border-color:#3a84ff;
            background-color:#3a84ff;
            background-clip:border-box
        }

.bk-tree .bk-form-checkbox--checked::after{
                content:"";
                position:absolute;
                top:0;
                left:3px;
                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-tree .bk-form-checkbox--disabled{
            border-color:#dcdee5;
            background-color:#dcdee5;
            cursor:not-allowed;
        }

.bk-tree .bk-form-checkbox--disabled.bk-tree .bk-form-checkbox--disabled--indeterminate ::after{
                background-color:#fafbfd;
            }

.bk-tree .bk-form-checkbox--disabled.bk-tree .bk-form-checkbox--disabled--checked ::after{
                border-color:#fafbfd;
            }

.bk-tree > ul{
    padding-left:0
}

.bk-has-border-tree li:before{
        content:'';
        left:-8px;
        position:absolute;
        right:auto;
        border-width:1px;
        border-left:1px dashed #c3cdd7;
        bottom:50px;
        height:100%;
        left:-10px;
        top:-11px;
        width:1px;
    }

.bk-has-border-tree li:after{
        content:'';
        left:-10px;
        position:absolute;
        right:auto;
        border-width:1px;
        border-top:1px dashed #c3cdd7;
        height:20px;
        top:16px;
        width:12px;
    }

.bk-has-border-tree li:last-child::before{
        height:26px;
    }

.bk-has-border-tree li.leaf:after{
        content:'';
        left:-10px;
        position:absolute;
        right:auto;
        border-width:1px;
        border-top:1px dashed #c3cdd7;
        height:20px;
        top:15px;
        width:24px;
    }

.bk-has-border-tree li.single:before{
        top:-10px;
    }

.bk-has-border-tree li.single:after{
        top:16px;
    }

.bk-has-border-tree li.leaf.single:after{
        top:16px;
    }

.bk-has-border-tree > li.tree-first-node:before{
    top:17px;
}

.bk-has-border-tree > li.tree-second-node:before{
    top:4px;
}

.bk-has-border-tree > li.tree-first-node.tree-only-node::before{
    border-left:none;
}

.bk-has-border-tree > li.tree-only-node:after{
    border-top:none;
}