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

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

.navigation-menu-item{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-flex:0;
            -ms-flex:0 0 40px;
                flex:0 0 40px;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        width:100%;
        min-width:100%;
        color:#C4C6CC;
        font-size:14px;
        height:40px;
        margin:2px 0;
        padding-right:12px;
        padding-left:22px;
        overflow:hidden;
        white-space:nowrap;
        text-decoration:none;
    }

.navigation-menu-item-icon.bk-icon{
            font-size:16px;
            min-width:38px;
            text-align:left;
        }

.navigation-menu-item-default{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-flex:0;
                -ms-flex:0 0 auto;
                    flex:0 0 auto;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center;
            width:16px;
            height:16px;
            margin-right:22px;
        }

.navigation-menu-item-default-icon{
                width:3px;
                height:3px;
                display:inline-block;
                background:#63656e;
                border-radius:50%;
            }

.navigation-menu-item-name{
            color:#C4C6CC;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
            padding-right:22px;
        }

.navigation-menu-item[group]{
            margin-bottom:11px;
            overflow:visible;
            position:relative
        }

.navigation-menu-item[group]:after{
                content:" ";
                height:1px;
                position:absolute;
                bottom:-8px;
                background:rgba(255, 255, 255, 0.06);
                left:15px;
                right:15px;
                z-index:100;
            }

.navigation-menu-item[group].group-theme:after{
                    background:#F0F1F5;
                }

.navigation-menu-item.is-disabled{
            cursor:not-allowed;
            opacity:.3;
        }

.navigation-sbmenu{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
        -ms-flex:0 0 auto;
            flex:0 0 auto;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -webkit-box-align:start;
        -ms-flex-align:start;
            align-items:flex-start;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    white-space:nowrap;
    width:100%;
    color:#c4c6cc;
    font-size:14px;
    overflow:hidden;
}

.navigation-sbmenu-title{
        min-height:40px;
        margin:2px 0;
        position:relative;
        padding-right:17px;
        padding-left:22px;
        width:100%;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
    }

.navigation-sbmenu-title-icon.bk-icon{
            font-size:16px;
            min-width:38px;
            text-align:left;
        }

.navigation-sbmenu-title-content{
            -webkit-box-flex:1;
                -ms-flex:1 1 auto;
                    flex:1 1 auto;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
        }

.navigation-sbmenu-title-arrow{
            font-size: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-transition:-webkit-transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
            transition:-webkit-transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
            transition:transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
            transition:transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s, -webkit-transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
        }

.navigation-sbmenu-content{
        width:100%;
    }

.navigation-sbmenu-content .navigation-menu-item{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-flex:0;
            -ms-flex:0 0 40px;
                flex:0 0 40px;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        width:100%;
        min-width:100%;
        color:#63656e;
        font-size:14px;
        height:40px;
        margin:2px 0;
        padding-right:12px;
        padding-left:22px;
        overflow:hidden;
        white-space:nowrap;
        text-decoration:none;
    }

.navigation-sbmenu-content .navigation-menu-item-icon.bk-icon{
            font-size:16px;
            min-width:38px;
            text-align:left;
        }

.navigation-sbmenu-content .navigation-menu-item-default{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-flex:0;
                -ms-flex:0 0 auto;
                    flex:0 0 auto;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center;
            width:16px;
            height:16px;
            margin-right:22px;
        }

.navigation-sbmenu-content .navigation-menu-item-default-icon{
                width:3px;
                height:3px;
                display:inline-block;
                background:#63656e;
                border-radius:50%;
            }

.navigation-sbmenu-content .navigation-menu-item-name{
            color:#8f929b;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
            padding-right:22px;
        }

.navigation-sbmenu-content .navigation-menu-item[group]{
            margin-bottom:11px;
            overflow:visible;
            position:relative
        }

.navigation-sbmenu-content .navigation-menu-item[group]:after{
                content:" ";
                height:1px;
                position:absolute;
                bottom:-8px;
                background:rgba(255, 255, 255, 0.06);
                left:15px;
                right:15px;
                z-index:100;
            }

.navigation-sbmenu-content .navigation-menu-item[group].group-theme:after{
                    background:#F0F1F5;
                }

.navigation-sbmenu-content .navigation-menu-item.is-disabled{
            cursor:not-allowed;
            opacity:.3;
        }

.navigation-sbmenu[group]{
        margin-bottom:11px;
        overflow:visible;
        position:relative
    }

.navigation-sbmenu[group]:after{
            content:" ";
            height:1px;
            position:absolute;
            bottom:-8px;
            background:rgba(255, 255, 255, 0.05);
            left:18px;
            right:18px;
            z-index:100;
        }

.navigation-sbmenu .collapse-transition{
        -webkit-transition:0.3s height ease-in-out;
        transition:0.3s height ease-in-out;
    }