sliver/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

perf[Style]: optimize the sidebar style to make it better to set (#1568)

Browse source
This commit is contained in:
花裤衩 2019-01-30 12:58:11 +08:00 committed by GitHub
parent 727c1a45dd
commit b44000c9de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/styles/sidebar.scss
View file

@ -58,8 +58,26 @@
width: 100% !important; width: 100% !important;
} }
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: $menuHover !important;
}
}
.is-active>.el-submenu__title { .is-active>.el-submenu__title {
color: #f4f4f5 !important; color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $subMenuHover !important;
}
} }
} }
@ -108,16 +126,6 @@
} }
} }
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
.sidebar-container .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $menuHover !important;
}
}
.el-menu--collapse .el-menu .el-submenu { .el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
} }
@ -150,10 +158,19 @@
} }
} }
// when menu collapsed
.el-menu--vertical { .el-menu--vertical {
&>.el-menu { &>.el-menu {
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
} }
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
&:hover {
// You can use $subMenuHover
background-color: $menuHover !important;
}
}
} }

19
src/styles/variables.scss
View file

@ -9,19 +9,26 @@ $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
//sidebar //sidebar
$menuBg:#304156;
$subMenuBg:#1f2d3d;
$menuHover:#001528;
$menuText:#bfcbd9; $menuText:#bfcbd9;
$menuActiveText:#409EFF; $menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 180px; $sideBarWidth: 180px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
:export { :export {
menuBg: $menuBg;
subMenuBg: $subMenuBg;
menuHover: $menuHover;
menuText: $menuText; menuText: $menuText;
menuActiveText: $menuActiveText; menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth; sideBarWidth: $sideBarWidth;
} }