@cw-devops/bk-magic-vue/lib/ui/resize-layout.css

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

.bk-resize-layout{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}

.bk-resize-layout-border{
        border:1px solid #dcdee5;
    }

.bk-resize-layout-collapsed > .bk-resize-layout-aside .bk-resize-layout-aside-content{
                overflow:hidden;
            }

.bk-resize-layout-collapsed > .bk-resize-layout-aside .bk-resize-collapse:before{
                display:inline-block;
                -webkit-transform:rotate(180deg);
                        transform:rotate(180deg);
            }

.bk-resize-layout-left{
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row
    }

.bk-resize-layout-left > .bk-resize-layout-aside{
            border-right:1px solid #dcdee5
        }

.bk-resize-layout-left > .bk-resize-layout-aside:after{
                right:1px;
                top:50%;
                -webkit-transform:translate3d(0, -50%, 0);
                        transform:translate3d(0, -50%, 0);
            }

.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-trigger{
                top:0;
                left:100%;
                width:5px;
                height:100%;
                cursor:col-resize
            }

.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-trigger:hover{
                    background-image:linear-gradient(to left, transparent, transparent 2px, #3a84ff 2px, #3a84ff 3px, transparent 3px, transparent);
                }

.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-collapse{
                left:100%;
                top:50%;
                -webkit-transform:translateY(-50%);
                        transform:translateY(-50%);
            }

.bk-resize-layout-right{
        -webkit-box-orient:horizontal;
        -webkit-box-direction:reverse;
            -ms-flex-direction:row-reverse;
                flex-direction:row-reverse
    }

.bk-resize-layout-right > .bk-resize-layout-aside{
            border-left:1px solid #dcdee5
        }

.bk-resize-layout-right > .bk-resize-layout-aside:after{
                left:1px;
                top:50%;
                -webkit-transform:translate3d(0, -50%, 0);
                        transform:translate3d(0, -50%, 0);
            }

.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-trigger{
                top:0;
                right:100%;
                width:5px;
                height:100%;
                cursor:col-resize
            }

.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-trigger:hover{
                    background-image:linear-gradient(to right, transparent, transparent 2px, #3a84ff 2px, #3a84ff 3px, transparent 3px, transparent);
                }

.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-collapse{
                right:100%;
                top:50%;
                -webkit-transform:translateY(-50%) rotate(180deg);
                        transform:translateY(-50%) rotate(180deg);
            }

.bk-resize-layout-top{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column
    }

.bk-resize-layout-top > .bk-resize-layout-aside{
            border-bottom:1px solid #dcdee5
        }

.bk-resize-layout-top > .bk-resize-layout-aside:after{
                bottom:1px;
                left:50%;
                -webkit-transform:translate3d(-50%, 0, 0) rotate(90deg);
                        transform:translate3d(-50%, 0, 0) rotate(90deg);
            }

.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-trigger{
                left:0;
                top:100%;
                width:100%;
                height:5px;
                cursor:row-resize
            }

.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-trigger:hover{
                    background-image:linear-gradient(to top, transparent, transparent 2px, #3a84ff 2px, #3a84ff 3px, transparent 3px, transparent);
                }

.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-collapse{
                top:100%;
                left:50%;
                margin-top:8px;
                -webkit-transform:translate3d(-50%, -50%, 0) rotate(90deg);
                        transform:translate3d(-50%, -50%, 0) rotate(90deg);
            }

.bk-resize-layout-bottom{
        -webkit-box-orient:vertical;
        -webkit-box-direction:reverse;
            -ms-flex-direction:column-reverse;
                flex-direction:column-reverse
    }

.bk-resize-layout-bottom > .bk-resize-layout-aside{
            border-top:1px solid #dcdee5
        }

.bk-resize-layout-bottom > .bk-resize-layout-aside:after{
                top:1px;
                left:50%;
                -webkit-transform:translate3d(-50%, 0, 0) rotate(90deg);
                        transform:translate3d(-50%, 0, 0) rotate(90deg);
            }

.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-trigger{
                left:0;
                bottom:100%;
                width:100%;
                height:5px;
                cursor:row-resize
            }

.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-trigger:hover{
                    background-image:linear-gradient(to bottom, transparent, transparent 2px, #3a84ff 2px, #3a84ff 3px, transparent 3px, transparent);
                }

.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-collapse{
                bottom:100%;
                left:50%;
                margin-bottom:8px;
                -webkit-transform:translate3d(50%, 50%, 0) rotate(-90deg);
                        transform:translate3d(50%, 50%, 0) rotate(-90deg);
            }

.bk-resize-layout > .bk-resize-layout-aside{
        position:relative
    }

.bk-resize-layout > .bk-resize-layout-aside:after{
            content:'';
            position:absolute;
            width:2px;
            height:2px;
            color:#c4c6cc;
            background:currentColor;
            -webkit-box-shadow:0 4px 0 0 currentColor, 0 8px 0 0 currentColor, 0 -4px 0 0 currentColor, 0 -8px 0 0 currentColor;
                    box-shadow:0 4px 0 0 currentColor, 0 8px 0 0 currentColor, 0 -4px 0 0 currentColor, 0 -8px 0 0 currentColor;
        }

.bk-resize-layout > .bk-resize-layout-aside .bk-resize-layout-aside-content{
            width:100%;
            height:100%;
            overflow:hidden;
        }

.bk-resize-layout > .bk-resize-layout-aside .bk-resize-trigger{
            position:absolute;
            background-color:transparent;
            z-index:3;
        }

.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy{
            visibility:hidden;
            position:absolute;
            pointer-events:none;
            z-index:9999
        }

.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.left,
            .bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.right{
                top:0;
                height:100%;
                border-left:1px dashed #3a84ff;
            }

.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.top,
            .bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.bottom{
                left:0;
                width:100%;
                border-top:1px dashed #3a84ff;
            }

.bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse{
            position:absolute;
            width:16px;
            height:50px;
            line-height:50px;
            border-radius:0px 12px 12px 0px;
            background:#dcdee5;
            text-align:center;
            font-size:20px;
            color:#fff;
            cursor:pointer;
            text-indent:-2px;
            z-index:2
        }

.bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse:hover{
                background:#3a84ff;
            }

.bk-resize-layout > .bk-resize-layout-main{
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
        overflow:hidden;
    }

.bk-resize-layout .bk-resize-mask{
        display:none;
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        z-index:9999;
    }