|
@@ -1,11 +1,12 @@
|
|
|
+@import "mixins";
|
|
|
:root {
|
|
|
--el-menu-item-height: 42px;
|
|
|
--el-menu-sub-item-height: 42px;
|
|
|
--el-menu-hover-bg-color: transparent;
|
|
|
}
|
|
|
-$active_bg: var(--el-color-primary);
|
|
|
+$active_color: var(--el-menu-active-color);
|
|
|
|
|
|
-.layout-menu-wrap, .layout-menu-popper-wrap {
|
|
|
+.layout-menu-wrap, .layout-menu-popper-wrap, .layout-wrap--columns {
|
|
|
|
|
|
&.el-menu--collapse {
|
|
|
.menu-icon {
|
|
@@ -23,7 +24,8 @@ $active_bg: var(--el-color-primary);
|
|
|
.el-sub-menu {
|
|
|
&.is-active {
|
|
|
& > .el-sub-menu__title {
|
|
|
- color: var(--el-menu-active-color);
|
|
|
+
|
|
|
+ color: $active_color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -31,298 +33,44 @@ $active_bg: var(--el-color-primary);
|
|
|
.el-sub-menu__title {
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
- .el-menu-item.is-active::before {
|
|
|
- background-color: $active_bg;
|
|
|
+ .el-menu-item.is-active {
|
|
|
+ color: $active_color;
|
|
|
+ &::before {
|
|
|
+ background-color: $active_color;
|
|
|
+ }
|
|
|
}
|
|
|
.el-menu-item:hover {
|
|
|
&::before {
|
|
|
- background-color: $active_bg;
|
|
|
+ background-color: $active_color;
|
|
|
}
|
|
|
}
|
|
|
.el-sub-menu__title:hover {
|
|
|
&::before {
|
|
|
- background-color: $active_bg;
|
|
|
+ background-color: $active_color;
|
|
|
}
|
|
|
}
|
|
|
- .el-menu-item::before,
|
|
|
- .el-sub-menu__title::before {
|
|
|
- z-index: auto;
|
|
|
- content: "";
|
|
|
- background-color: #0000;
|
|
|
- opacity: 0.08;
|
|
|
- position: absolute;
|
|
|
- left: 8px;
|
|
|
- right: 8px;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- pointer-events: none;
|
|
|
- border-radius: 3px;
|
|
|
- transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
|
|
+ .el-menu-item,
|
|
|
+ .el-sub-menu__title {
|
|
|
+ @include hover-bg-opacity(8px, $active_color);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- .main-container {
|
|
|
- min-height: 100%;
|
|
|
- height: 100%;
|
|
|
- transition: margin-left 0.28s;
|
|
|
- margin-left: $sideBarWidth;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .sidebar-container {
|
|
|
- transition: width 0.28s;
|
|
|
- width: $sideBarWidth !important;
|
|
|
- background-color: var(--el-menu-bg-color);
|
|
|
- height: 100%;
|
|
|
- position: fixed;
|
|
|
- font-size: 0px;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1001;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 2px 0 8px #1d23290d;
|
|
|
-
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- .el-scrollbar__bar.is-vertical {
|
|
|
- right: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-scrollbar {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &.has-logo {
|
|
|
- .el-scrollbar {
|
|
|
- height: calc(100% - 50px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .is-horizontal {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- a {
|
|
|
- display: inline-block;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
|
|
|
- .menu-icon {
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-el-icon {
|
|
|
- margin-right: 12px;
|
|
|
- margin-left: -2px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu {
|
|
|
- border: none;
|
|
|
- height: 100%;
|
|
|
- width: 100% !important;
|
|
|
- .el-sub-menu {
|
|
|
- &.is-active {
|
|
|
- .el-sub-menu__title {
|
|
|
- color: var(--el-menu-active-color);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- !*$active_1: var(--el-menu-active-color);
|
|
|
- $active_bg: desaturate(rgba(0, 0, 0, .90), 1%);
|
|
|
-
|
|
|
-
|
|
|
- $active_bg: var(--el-color-primary);
|
|
|
- .el-menu-item,
|
|
|
- .el-sub-menu__title {
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- .el-menu-item.is-active::before {
|
|
|
- background-color: $active_bg;
|
|
|
- }
|
|
|
- .el-menu-item:hover {
|
|
|
- &::before {
|
|
|
- background-color: $active_bg;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-sub-menu__title:hover {
|
|
|
- &::before {
|
|
|
- background-color: $active_bg;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-menu-item::before,
|
|
|
- .el-sub-menu__title::before {
|
|
|
- z-index: auto;
|
|
|
- content: "";
|
|
|
- background-color: #0000;
|
|
|
- opacity: 0.08;
|
|
|
- position: absolute;
|
|
|
- left: 8px;
|
|
|
- right: 8px;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- pointer-events: none;
|
|
|
- border-radius: 3px;
|
|
|
- transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- !*.submenu-title-noDropdown,
|
|
|
- .el-sub-menu__title {
|
|
|
- &:hover {
|
|
|
-
|
|
|
- }
|
|
|
- }*!
|
|
|
-
|
|
|
- !*.is-active > .el-sub-menu__title {
|
|
|
- color: // $subMenuActiveText !important;
|
|
|
- }*!
|
|
|
-
|
|
|
- & .nest-menu .el-sub-menu > .el-sub-menu__title,
|
|
|
- & .el-sub-menu .el-menu-item {
|
|
|
- min-width: $sideBarWidth !important;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .hideSidebar {
|
|
|
- .sidebar-container {
|
|
|
- width: 54px !important;
|
|
|
- .svg-icon {
|
|
|
- margin-right: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .main-container {
|
|
|
- margin-left: 54px;
|
|
|
- }
|
|
|
-
|
|
|
- .submenu-title-noDropdown {
|
|
|
- padding: 0 !important;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .el-tooltip {
|
|
|
- padding: 0 !important;
|
|
|
-
|
|
|
- .svg-icon {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-el-icon {
|
|
|
- margin-left: 19px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-sub-menu {
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- & > .el-sub-menu__title {
|
|
|
- padding: 0 !important;
|
|
|
-
|
|
|
- !*.svg-icon {
|
|
|
- margin-left: 20px;
|
|
|
- }*!
|
|
|
-
|
|
|
- .sub-el-icon {
|
|
|
- margin-left: 19px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-sub-menu__icon-arrow {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu--collapse {
|
|
|
- .el-sub-menu {
|
|
|
- & > .el-sub-menu__title {
|
|
|
- & > span {
|
|
|
- height: 0;
|
|
|
- width: 0;
|
|
|
- overflow: hidden;
|
|
|
- visibility: hidden;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu--collapse .el-menu .el-sub-menu {
|
|
|
- min-width: $sideBarWidth !important;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-}*/
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
|
|
|
.layout-menu-popper-wrap.el-menu--vertical,
|
|
|
.layout-menu-popper-wrap.el-menu--horizontal {
|
|
|
-
|
|
|
+
|
|
|
|
|
|
& > .el-menu {
|
|
|
|
|
|
margin-right: 16px;
|
|
|
}*/
|
|
|
- .sub-el-icon {
|
|
|
- margin-right: 12px;
|
|
|
- margin-left: -2px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- .el-menu-item {
|
|
|
- &:hover {
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }*/
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
> .el-menu--popup {
|
|
|
max-height: 100vh;
|
|
|
-
|
|
|
+ overflow-y: auto;
|
|
|
& > li:first-child {
|
|
|
margin-top: 0;
|
|
|
}
|