sidebar.scss 2.44 KB
Newer Older
Pan's avatar
Pan committed
1 2 3 4
#app {
  // 主体区域
  .main-container {
    min-height: 100%;
Pan's avatar
Pan committed
5
    transition: margin-left .28s;
Pan's avatar
Pan committed
6
    margin-left: 180px;
7
    position: relative;
Pan's avatar
Pan committed
8
  }
9
  // 侧边栏
Pan's avatar
Pan committed
10
  .sidebar-container {
11
    transition: width 0.28s;
Pan's avatar
Pan committed
12
    width: 180px !important;
Pan's avatar
Pan committed
13 14
    height: 100%;
    position: fixed;
Pan's avatar
Pan committed
15
    font-size: 0px;
Pan's avatar
Pan committed
16 17 18 19
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
Pan's avatar
Pan committed
20
    overflow: hidden;
21 22 23 24 25 26 27 28 29 30 31 32 33
    //reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }
    .scrollbar-wrapper {
      height: calc(100% + 15px);
      .el-scrollbar__view {
        height: 100%;
      }
    }
    .is-horizontal {
      display: none;
    }
Pan's avatar
Pan committed
34 35 36
    a {
      display: inline-block;
      width: 100%;
37
      overflow: hidden;
Pan's avatar
Pan committed
38 39 40 41 42 43
    }
    .svg-icon {
      margin-right: 16px;
    }
    .el-menu {
      border: none;
44
      height: 100%;
Pan's avatar
Pan committed
45
      width: 100% !important;
Pan's avatar
Pan committed
46 47 48
    }
  }
  .hideSidebar {
Pan's avatar
Pan committed
49 50
    .sidebar-container {
      width: 36px !important;
Pan's avatar
Pan committed
51 52 53 54 55
    }
    .main-container {
      margin-left: 36px;
    }
    .submenu-title-noDropdown {
Pan's avatar
Pan committed
56
      padding-left: 10px !important;
Pan's avatar
Pan committed
57
      position: relative;
Pan's avatar
Pan committed
58 59
      .el-tooltip {
        padding: 0 10px !important;
Pan's avatar
Pan committed
60 61 62
      }
    }
    .el-submenu {
63
      overflow: hidden;
Pan's avatar
Pan committed
64
      &>.el-submenu__title {
Pan's avatar
Pan committed
65
        padding-left: 10px !important;
Pan's avatar
Pan committed
66 67 68 69 70
        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }
71 72 73 74 75 76 77 78 79 80 81 82 83
    .el-menu--collapse {
      .el-submenu {
        &>.el-submenu__title {
          &>span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
Pan's avatar
Pan committed
84
  }
85 86
  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
  .sidebar-container .el-submenu .el-menu-item {
Pan's avatar
Pan committed
87 88
    min-width: 180px !important;
    background-color: $subMenuBg !important;
Pan's avatar
Pan committed
89
    &:hover {
Pan's avatar
Pan committed
90
      background-color: $menuHover !important;
Pan's avatar
Pan committed
91 92
    }
  }
Pan's avatar
Pan committed
93 94
  .el-menu--collapse .el-menu .el-submenu {
    min-width: 180px !important;
Pan's avatar
Pan committed
95
  }
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118

  //适配移动端
  .mobile {
    .main-container {
      margin-left: 0px;
    }
    .sidebar-container {
      transition: transform .28s;
      width: 180px !important;
    }
    &.hideSidebar {
      .sidebar-container {
        transition-duration: 0.3s;
        transform: translate3d(-180px, 0, 0);
      }
    }
  }
  .withoutAnimation {
    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
Pan's avatar
Pan committed
119
}