// 首页样式
@import "app.less";
//头部
.index{
    width: 100%;
}
.ms-admin-header {
    display: flex;
    padding: 0;
    background-color: @themeColor;
    height: @headHeight !important;
    //头部menu
    .ms-admin-header-menu {
        background-color: @themeColor;
        width: auto;
        border-bottom: none;
        position: relative;
        &>.ms-admin-menu-item>*,
        &>.ms-admin-menu-item {
            .ms-line-height(@headHeight) !important;
            background-color: @themeColor !important;
            color: rgba(255, 255, 255, 0.65) !important;
            border-bottom: none !important;
            font-size: 1em;
            &:hover {
                color: #fff !important;
            }
            &.is-active {
                color: #fff !important;
            }
        }
        // 快捷菜单
        .ms-admin-shortcut-menu{
            user-select: none;
            outline: none;
            padding-left: 20px;
            width: 100%;
            min-width: 500px;
            min-height: 200px;
            background-color:#fff !important; 
            height: auto;
            flex-wrap: wrap;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 9;
            background: #ffffff;
            border:1px solid @borderColor;
            box-shadow: 2px 3px 5px 0.1px rgba(0,0,0,.1);
            >li{
                margin: 0;
                // min-width: 100px;
                // text-align: center;
                margin-right: 20px;
                text-align: left;
                display: -webkit-inline-box;
                display: inline-block;
                .ms-line-height(50px);
                .ms-font(@defalutSize, @defalutColor, normal);
                &:hover{
                    cursor: pointer;
                    color: @themeColor;
                }
            }
            // 更多图标
            i{
                position: absolute;
                top: 18px;
                right: 19px;
                .ms-font(@defalutSize, @defalutColor, normal);
                &:hover{
                    cursor: pointer;
                }
            }
        }
    }
}

//logo
.ms-admin-logo {
    min-width: 200px;
    width: 200px;
    .ms-align-center;
    overflow: hidden;
    &>img {
        padding: @listPadding 0 @listPadding 20px;
        width: 80px;
    }
    &>div {
        .ms-align-center;
        img {
            margin-top: -10px;
            margin-left: 3px;
        }
        span {
            margin-top: -7px;
            position: absolute;
            margin-left: 6px;
            font-size: 12px;
        }
    }
    .iconfont {
        color: #fff;
        margin-left: auto;
        margin-right: @listPadding;
        cursor: pointer;
    }
}

//头部右侧mstore
.ms-admin-mstore {
    margin-left: auto;
    min-width: 200px;
    .ms-align-center;
    justify-content: flex-end;
    padding: 0;
    .ms-admin-mstore-icon {
        min-width: @headHeight;
        .ms-width-height(@headHeight);
        background-color: #0080FF;
        .ms-flex(center);
        align-items: center;
        cursor: pointer;
        .iconfont {
            color: #fff;
        }
    }
}

//头部登录
.ms-admin-login {
    .ms-align-center;
    &>span {
        width: 120px;
        padding: 0 20px;
        height: @headHeight;
        .ms-align-center;
        cursor: pointer;
        outline: none;
        img {
            border-radius: 50%;
            .ms-width-height(20px);
            margin-right: 8px;
        }
        span {
            color: #fff;
        }
    }
    .active {
        background: #fff;
        span {
            color: @titleColor;
        }
    }
}

//下拉菜单
.ms-admin-login-down {
    width: 120px;
    border: none;
    .ms-margin-padding(0) !important;
    border-radius: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    &>.popper__arrow {
        display: none;
    }
}
//左侧菜单
.ms-admin-menu-aside{
    width: 200px !important;
    overflow: visible;
    .ms-admin-menu {
        .ms-width-height(200px, 100%);
        position: relative;
        .el-menu--inline {
            .is-active {
                border-left: 2px solid @themeColor;
            }
        }
        // 左侧收缩按钮
        .ms-menu-expand{
            transform: rotate(270deg);
            position: absolute;
            right: -34px;
            top: 50%;
            z-index:999;
            cursor: pointer;
            // 收缩
            i{
                .ms-font(14px,#333);
                position: absolute;
                transform: rotate(90deg);
                top: 5px;
                right: 43%;
            }
            &::before{
                border-color: transparent transparent #eee;
                border-style: none solid solid;
                border-width: 0 30px 22px;
                content: "";
                display: block;
                height: 0;
                left: -10px;
                width: 30px;
            }
        }
        .ms-menu-expand-active{
            transform: rotate(90deg);
            transition: all .3 ease;
            right: -56px;
        }
    }
    // 激活状态
    .ms-admin-menu-active{
        .ms-width-height(60px, 100%);
    }
}
.ms-admin-menu-aside-active{
    width: 60px !important;
}

//身体
.ms-admin-container {
    height: ~'calc(100vh - 60px)';
    &>.ms-admin-main {
        padding: 0;
        background-color: #fff;
        //选项卡
        .ms-admin-tabs {
            height: 100%;
            .el-tabs__content{
                height: 100%;
                .el-tab-pane{
                    height: 100%;
                }
            }
            .el-tabs__nav-scroll {
                background: #fafafa;
                .el-tabs__nav {
                    border-left: none;
                    border-radius: 0;
                }
            }
        }
        // 嵌套iframe
        iframe{
            .ms-width-height(100%);
            border: none !important;
        }
    }
}