bk-vue-cec/lib/ui/version-detail.css

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

.bk-version{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:-23px -24px -16px;
}

.bk-version-left{
        -webkit-box-flex:0;
            -ms-flex:0 0 180px;
                flex:0 0 180px;
        background-color:#FAFBFD;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        font-size:12px;
        position:relative;
    }

.bk-version-left .left-fill{
            height:20px;
            -webkit-box-flex:0;
                -ms-flex:0 0 20px;
                    flex:0 0 20px;
            border-right:1px solid #DCDEE5
        }

.bk-version-left .left-fill.fill-top{
                margin-top:-10px;
            }

.bk-version-left .left-fill.fill-bottom{
                margin-bottom:-10px;
            }

.bk-version-left .left-list{
            border-top:1px solid #DCDEE5;
            border-bottom:1px solid #DCDEE5;
            overflow-y:hidden;;
            display:-webkit-box;;
            display:-ms-flexbox;;
            display:flex;
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
                -ms-flex-direction:column;
                    flex-direction:column;
            width:100%;
            margin:0;
            padding:0;
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
        }

.bk-version-left .left-list-item{
                -webkit-box-flex:0;
                    -ms-flex:0 0 54px;
                        flex:0 0 54px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-orient:vertical;
                -webkit-box-direction:normal;
                    -ms-flex-direction:column;
                        flex-direction:column;
                -webkit-box-pack:center;
                    -ms-flex-pack:center;
                        justify-content:center;
                padding:0 15px 0 30px;
                position:relative;
                border-bottom:1px solid #DCDEE5
            }

.bk-version-left .left-list-item:hover{
                    cursor:pointer;
                    background-color:#FFFFFF;
                }

.bk-version-left .left-list-item.border-after::after{
                        content:' ';
                        width:1px;
                        background:#DCDEE5;
                        position:absolute;
                        top:0;
                        bottom:0;
                        right:0;
                    }

.bk-version-left .left-list-item .item-title{
                    color:#63656E;
                    font-size:16px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    font-weight:600;
                }

.bk-version-left .left-list-item .item-date{
                    color:#979BA5;
                }

.bk-version-left .left-list-item .item-current{
                    position:absolute;
                    right:20px;
                    top:8px;
                    background-color:rgba(0,109,255,0.85098);
                    border-radius:2px;
                    width:58px;
                    height:20px;
                    display:-webkit-box;
                    display:-ms-flexbox;
                    display:flex;
                    -webkit-box-align:center;
                        -ms-flex-align:center;
                            align-items:center;
                    -webkit-box-pack:center;
                        -ms-flex-pack:center;
                            justify-content:center;
                    color:#FFFFFF;
                }

.bk-version-left .left-list-item.item-active::before{
                        content:" ";
                        position:absolute;
                        top:0px;
                        bottom:0px;
                        left:0;
                        width:6px;
                        background-color:#006DFF;
                    }

.bk-version-left .left-list-item.item-active{
                    background-color:#FFFFFF;
                }

.bk-version-left .left-list-item.item-active .item-title{
                        color:#313238;
                    }

.bk-version-left .left-list-item.item-active .item-date{
                        color:#63656E;
                    }

.bk-version-left .left-list-fill{
                -webkit-box-flex:1;
                    -ms-flex:1;
                        flex:1;
                border-right:1px solid #DCDEE5;
            }

.bk-version-left .left-list-loading{
                -webkit-box-flex:0;
                    -ms-flex:0 0 40px;
                        flex:0 0 40px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                -webkit-box-pack:center;
                    -ms-flex-pack:center;
                        justify-content:center;
                border-right:1px solid #DCDEE5;
                border-bottom:1px solid #DCDEE5;
            }

.bk-version-left .left-list-loading .bk-loading-wrapper{
                    display:-webkit-box;
                    display:-ms-flexbox;
                    display:flex;
                    -webkit-box-align:center;
                        -ms-flex-align:center;
                            align-items:center;
                    -webkit-box-pack:center;
                        -ms-flex-pack:center;
                            justify-content:center;
                }

.bk-version-left .left-list:hover{
                overflow-y:auto;
                margin-right:-6px;
            }

.bk-version-left .left-list::-webkit-scrollbar{
                width:6px;
                height:6px;
                background:rgba(0, 0, 0, .1);
            }

.bk-version-left .left-list::-webkit-scrollbar-thumb{
                border-radius:6px;
                height:100px;
                background:#C4C6CC;
                -webkit-box-shadow:inset 0 0 6px rgba(204, 204, 204, 0.3);
                        box-shadow:inset 0 0 6px rgba(204, 204, 204, 0.3);
            }

.bk-version-left .resize-line{
            position:absolute;
            top:-10px;
            bottom:-10px;
            right:-6px;
            width:13px;
            padding:0 6px;
            z-index:9999;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
                -ms-flex-direction:column;
                    flex-direction:column;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center
        }

.bk-version-left .resize-line:before, .bk-version-left .resize-line:after{
                content:' ';
                width:0;
                height:0;
                border:5px solid transparent;
                margin:0 0 0 1px;
            }

.bk-version-left .resize-line .drag-content{
                -webkit-box-flex:1;
                    -ms-flex:1;
                        flex:1;
                margin:-5px 0;
                width:1px;
                background-color:transparent;
            }

.bk-version-left .resize-line:hover .drag-content, .bk-version-left .resize-line:active .drag-content{
                    background-color:#006DFF;
                }

.bk-version-left .resize-line:hover:before, .bk-version-left .resize-line:active:before{
                    border-top-color:#006DFF;
                }

.bk-version-left .resize-line:hover:after, .bk-version-left .resize-line:active:after{
                    border-bottom-color:#006DFF;
                }

.bk-version-right{
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
        padding:10px 30px 50px 45px;
        overflow:auto;
    }

.bk-version-right::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

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

.version-detail-dialog .bk-dialog-tool .bk-dialog-close{
    right:10px;
}