@import '~@/assets/style/public.scss';

$color: #409EFF;

// 默认主题
.layout-main {
  &.default {
    height: 100vh;
    width: 100vw;
    background-color: $color-bg;
    // [全局设置]
    // 关闭所有卡片的阴影
    .el-card {
      box-shadow: none;
      &:hover {
        box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
      }
    }
    // [布局]
    .el-header {
      padding: 0px;
      .logo-group {
        transition: width .3s;
        float: left;
        text-align: center;
        img {
          height: 60px;
        }
      }
      .toggle-sidemenu-btn {
        float: left;
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        cursor: pointer;
        i {
          font-size: 20px;
          color: $color-text-normal;
          margin-top: 4px;
          &:hover {
            color: $color-primary;
          }
        }
      }
      // 顶栏菜单
      .el-menu {
        float: left;
        border-bottom: none;
        background-color: transparent;
        .el-menu-item {
          border-bottom: none;
          border-top: 2px solid $color-bg;
          &:hover {
            background-color: transparent;
          }
          &.is-active {
            border-bottom: none;
            border-top: 2px solid $color;
            background-color: transparent;
          }
        }
      }
      // 顶栏右侧的按钮
      .btn-group {
        float: right;
        height: 60px;
        display: flex;
        align-items: center;
        .btn-text {
          color: $color-text-normal;
        }
        .el-dropdown {
          user-select: none;
          cursor: pointer;
        }
      }
    }
    // 顶栏下面
    .el-container {
      // 侧边栏
      .el-aside {
        transition: width .3s;
        overflow: inherit;
        .dd-side-menu-empty {
          background-color: rgba(#000, .03);
          margin: $margin;
          margin-top: 0px;
          border-radius: 4px;
          line-height: 100px;
          text-align: center;
          color: $color-text-sub;
        }
        .el-menu {
          background-color: $color-bg;
          border-right: none;
          &.el-menu--collapse {
            .el-submenu {
              .el-menu {
                background-color: #FFF;
              }
            }
          }
          .el-menu-item {
            &:focus {
              background-color: $color-bg;
            }
            &:hover {
              background-color: $color-bg;
            }
          }
          .el-submenu__title {
            &:hover {
              background-color: $color-bg;
            }
          }
        }
      }
      .el-main {
        padding: 0px;
        position: relative;
      }
    }
  }
}