#app { .main-container { height: calc(100% - 80px); transition: margin-left 0.28s; margin-left: $sideBarWidth; } .sidebar-container { transition: width 0.28s; width: $sideBarWidth !important; height: calc(100% - #{$headerHeight}); position: fixed; font-size: 0px; top: $headerHeight; bottom: 0; left: 0; z-index: 80; background-color: $subMenuBg; // overflow: hidden; .horizontal-collapse-transition { transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; } .scrollbar-wrapper { overflow-x: hidden !important; // overflow-y: auto; margin-right: 0 !important; height: 90vh; &::-webkit-scrollbar { display: none; } } a { display: inline-block; width: 100%; overflow: hidden; } .svg-icon { margin-right: 10px; } .sub-el-icon { margin-right: 12px; margin-left: -2px; } .el-menu { background-color: transparent !important; border: none; height: 100%; width: 100% !important; } // menu hover .el-menu--collapse .el-submenu__title, .el-menu--collapse .submenu-title-noDropdown { margin-left: 0px !important; } // 有子级 .el-submenu__title { // margin-left: 13px; // padding-left: 10px !important; color: $menuText; background-color: transparent !important; border-bottom: 1px solid $sliderBorderColor; &:hover { color: $subMenuActiveText !important; background-color: $menuHover !important; .svg-icon, i, span { color: $subMenuActiveText !important; } } } // 没有子级 .submenu-title-noDropdown { color: $menuText; border-bottom: 1px solid $sliderBorderColor; &:hover { background-color: $subMenuHover !important; } // border-radius: 6px; // padding-left: 10px !important; b &:hover { color: $menuActiveText !important; background-color: $subMenuHover !important; .svg-icon { color: #1ea6f8 !important; } i { color: #1ea6f8 !important; } } } .submenu-title-noDropdown.is-active, .el-submenu__title.is-active { color: $menuActiveText; background-color: $menuHover !important; .svg-icon { color: #1ea6f8 !important; } i { color: #1ea6f8 !important; } } .submenu-title-noDropdown, .el-submenu__title { font-weight: 600; font-size: $sideBarFontSize; // margin: 0 10px; // border-radius: 6px; >i { color: $subMenuActiveText !important; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); margin-right: 10px; } .svg-icon { font-size: 18px; } } .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow { transform: rotateZ(0deg) !important; -webkit-transform: rotateZ(0deg) !important; -moz-transform: rotateZ(0deg) !important; -ms-transform: rotateZ(0deg) !important; -o-transform: rotateZ(0deg) !important; } .is-active>.el-submenu__title { color: #fff !important; } & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { &.is-active { background-color: $subMenuHover !important; color: $menuActiveText !important; border-bottom: 1px solid $sliderBorderColor; } &:hover { background-color: $subMenuHover !important; color: $menuActiveText !important; border-bottom: 1px solid $sliderBorderColor; } min-width: 130px !important; background-color: transparent !important; font-weight: 600; font-size: $sideBarFontSize; // margin: 0 10px; // border-radius: 6px; span { margin-left: 5px; } } } .hideSidebar { .sidebar-container { width: 54px !important; } .main-container { margin-left: 54px; } .submenu-title-noDropdown { padding: 0 !important; position: relative; .el-tooltip { padding: 0 !important; .svg-icon { margin-left: 16px; } .sub-el-icon { margin-left: 19px; } } } .el-submenu { overflow: hidden; &>.el-submenu__title { padding: 0 !important; .svg-icon { margin-left: 16px; } .sub-el-icon { margin-left: 19px; } .el-submenu__icon-arrow { display: none; } } } .el-menu--collapse { .el-submenu { &>.el-submenu__title { &>span { height: 0; width: 0; overflow: hidden; visibility: hidden; display: inline-block; } } } } } .el-menu--collapse .el-menu .el-submenu { min-width: $sideBarWidth !important; } // mobile responsive .mobile { .main-container { margin-left: 0px; } .sidebar-container { transition: transform 0.28s; width: $sideBarWidth !important; } &.hideSidebar { .sidebar-container { pointer-events: none; transition-duration: 0.3s; transform: translate3d(-$sideBarWidth, 0, 0); } } } .withoutAnimation { .main-container, .sidebar-container { transition: none; } } } // when menu collapsed .el-menu--vertical { &>.el-menu { .svg-icon { margin-right: 16px; } .sub-el-icon { margin-right: 12px; margin-left: -2px; } } .nest-menu .el-submenu>.el-submenu__title, .el-menu-item { // width: calc(100% - 12px); // border-top-right-radius: 8px; // border-bottom-right-radius: 8px; font-weight: 600 !important; font-size: 15px !important; background-color: $menuHover !important; color: $menuText !important; &:hover { background-color: $subMenuHover !important; opacity: .9; .svg-icon, i, span { color: $menuText; } } } // the scroll bar appears when the subMenu is too long >.el-menu--popup { max-height: 100vh; overflow-y: auto; background-color: #32ACFE !important; border-top-right-radius: 8px; border-bottom-right-radius: 8px; min-width: 140px; padding: 12px 0; &::-webkit-scrollbar-track-piece { background: #d3dce6; } &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-thumb { background: #99a9bf; border-radius: 20px; } } }