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

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

.bk-navigation{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    width:100vw;
    height:100vh;
}

.bk-navigation-title{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:start;
            -ms-flex-pack:start;
                justify-content:flex-start;
        overflow:hidden;
        padding:0 16px;
        border-bottom:1px solid rgba(255, 255, 255, 0.05);
        height:100%;
        -webkit-box-flex:0;
            -ms-flex:0 0 260px;
                flex:0 0 260px;
    }

.bk-navigation-title .title-icon{
            -webkit-box-flex:0;
                -ms-flex:0 0 28px;
                    flex:0 0 28px;
            font-size:28px;
            color:#96A2B9;
            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-navigation-title .title-desc{
            font-size:16px;
            font-weight:bold;
            color:#96A2B9;
            display:inline-block;
            margin-left:16px;
            line-height:24px;
            overflow:hidden;
            white-space:nowrap;
        }

.bk-navigation-header{
        -webkit-box-flex:0;
            -ms-flex:0 0 52px;
                flex:0 0 52px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        padding-right:24px;
        overflow:hidden;
    }

.bk-navigation-header .header-right{
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
            height:100%;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
        }

.bk-navigation-wrapper{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        position:relative;
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
    }

.bk-navigation-wrapper .navigation-nav{
            width:60px;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-flex:0;
                -ms-flex:0 1 auto;
                    flex:0 1 auto;
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
                -ms-flex-direction:column;
                    flex-direction:column;
            overflow:visible;
            position:relative;
            min-width:0;
            min-height:0;
            z-index:101;
            -webkit-transition:width cubic-bezier(0.4, 0, 0.2, 1) .3s;
            transition:width cubic-bezier(0.4, 0, 0.2, 1) .3s
        }

.bk-navigation-wrapper .navigation-nav:hover{
                cursor:pointer;
            }

.bk-navigation-wrapper .navigation-nav .nav-slider{
                width:60px;
                height:100%;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-flex:1;
                    -ms-flex:1;
                        flex:1;
                -webkit-box-orient:vertical;
                -webkit-box-direction:normal;
                    -ms-flex-direction:column;
                        flex-direction:column;
                -webkit-transition:width cubic-bezier(0.4, 0, 0.2, 1) .3s;
                transition:width cubic-bezier(0.4, 0, 0.2, 1) .3s;
            }

.bk-navigation-wrapper .navigation-nav .nav-slider-list{
                    -webkit-box-flex:1;
                        -ms-flex:1 1 auto;
                            flex:1 1 auto;
                    overflow:auto;
                    padding:12px 0 4px 0;
                    margin:0;
                    max-height:calc(100vh - 100px)
                }

.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar{
                        width:6px;
                        height:5px;
                        display:none
                    }

.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover{
                            -webkit-transition:opacity 340ms ease-out;
                            transition:opacity 340ms ease-out;
                            -webkit-transform:none;
                                    transform:none;
                        }

.bk-navigation-wrapper .navigation-nav .nav-slider-footer{
                    -webkit-box-flex:0;
                        -ms-flex:0 0 56px;
                            flex:0 0 56px;
                    display:-webkit-box;
                    display:-ms-flexbox;
                    display:flex;
                    -webkit-box-align:center;
                        -ms-flex-align:center;
                            align-items:center;
                    -webkit-box-pack:start;
                        -ms-flex-pack:start;
                            justify-content:flex-start;
                    padding-left:14px;
                }

.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon{
                        font-size:14px;
                        color:#63656E;
                        width:32px;
                        height:32px;
                        border-radius:100%;
                        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;
                        -webkit-transform-origin:center center;
                                transform-origin:center center;
                    }

.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg{
                            font-size:16px;
                            -webkit-transition:-webkit-transform cubic-bezier(0.4, 0, 0.2, 1) .3s;
                            transition:-webkit-transform cubic-bezier(0.4, 0, 0.2, 1) .3s;
                            transition:transform cubic-bezier(0.4, 0, 0.2, 1) .3s;
                            transition:transform cubic-bezier(0.4, 0, 0.2, 1) .3s, -webkit-transform cubic-bezier(0.4, 0, 0.2, 1) .3s;
                            height:16px;
                            width:16px;
                            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;
                            -webkit-transform-origin:center center;
                                    transform-origin:center center;
                        }

.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left{
                            color:#96A2B9
                        }

.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover{
                                background:-webkit-gradient(linear, right top, left top, from(rgba(37, 48, 71, 1)), to(rgba(38, 50, 71, 1)));
                                background:linear-gradient(270deg, rgba(37, 48, 71, 1) 0%, rgba(38, 50, 71, 1) 100%);
                                color:#D3D9E4;
                                cursor:pointer;
                            }

.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover{
                            background:-webkit-gradient(linear, right top, left top, from(rgba(222, 224, 234, 1)), to(rgba(234, 236, 242, 1)));
                            background:linear-gradient(270deg, rgba(222, 224, 234, 1) 0%, rgba(234, 236, 242, 1) 100%);
                            color:#3A3C42;
                            cursor:pointer;
                        }

.bk-navigation-wrapper .navigation-container{
            -webkit-box-flex:1;
                -ms-flex:1 1 1px;
                    flex:1 1 1px;
            max-width:calc(100vw - 60px);
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
                -ms-flex-direction:column;
                    flex-direction:column;
            position:relative;
            min-width:0;
            min-height:0;
        }

.bk-navigation-wrapper .navigation-container .container-header{
                background:#fff;
                -ms-flex-preferred-size:60px;
                    flex-basis:60px;
                height:60px;
                width:100%;
                z-index:100;
                -webkit-box-shadow:0px 3px 4px 0px rgba(64, 112, 203, 0.06);
                        box-shadow:0px 3px 4px 0px rgba(64, 112, 203, 0.06);
                border-bottom:1px solid #dcdee5;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-orient:horizontal;
                -webkit-box-direction:normal;
                    -ms-flex-direction:row;
                        flex-direction:row;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                -webkit-box-pack:end;
                    -ms-flex-pack:end;
                        justify-content:flex-end;
                padding:0 24px;
            }

.bk-navigation-wrapper .navigation-container .container-header-title{
                    height:21px;
                    font-size:16px;
                    color:#313238;
                    line-height:21px;
                }

.bk-navigation-wrapper .navigation-container .container-header-sets{
                    display:-webkit-box;
                    display:-ms-flexbox;
                    display:flex;
                    -webkit-box-flex:1;
                        -ms-flex:1 1 auto;
                            flex:1 1 auto;
                    -webkit-box-align:center;
                        -ms-flex-align:center;
                            align-items:center;
                    -webkit-box-pack:end;
                        -ms-flex-pack:end;
                            justify-content:flex-end;
                }

.bk-navigation-wrapper .navigation-container .container-content{
                background:#F5F7FA;
                max-height:calc(100vh - 60px);
                -webkit-box-flex:1;
                    -ms-flex:1;
                        flex:1;
                overflow:auto;
                padding:20px 24px 0;
            }

.bk-navigation-wrapper .navigation-container .container-footer{
                -webkit-box-flex:0;
                    -ms-flex:0 0 auto;
                        flex:0 0 auto;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-orient:horizontal;
                -webkit-box-direction:normal;
                    -ms-flex-direction:row;
                        flex-direction:row;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                -webkit-box-pack:center;
                    -ms-flex-pack:center;
                        justify-content:center;
            }