twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-30 09:24:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update vertical style

Browse Source
This commit is contained in:
xiaoxian521 2021-11-07 16:56:15 +08:00
parent ad2f7358db
commit 0ad3418239
10 changed files with 62 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layout/theme/auroraGreen-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #0b1e15;
$menuHover: #60ac80;
$subMenuBg: #000;
$subMenuHover: #60ac80;
$subMenuActiveBg: #60ac80;
$navTextColor: #7a80b4;
$menuText: #7a80b4;
$sidebarLogo: #112f21;
$menuTitleHover: #fff;
$menuActiveBefore: #60ac80;

7
src/layout/theme/default-vars.scss
View File

@ -6,18 +6,19 @@
// 暗雅（默认）
// 菜单选中后字体样式
$subMenuActiveText: #f4f4f5 !default;
$subMenuActiveText: #fff !default;
//菜单背景
$menuBg: #001529 !default;
// 鼠标覆盖到菜单时的背景
$menuHover: #4091f7 !default;
// 子菜单背景
$subMenuBg: #0f0303 !default;
// 鼠标覆盖子菜单时的背景
$subMenuHover: #4091f7 !default;
// 有无子集的激活菜单背景
$subMenuActiveBg: #4091f7 !default;
$navTextColor: #fff !default;
$menuText: rgba(254, 254, 254, 0.65) !default;
// logo背景颜色
$sidebarLogo: #002140 !default;
// 鼠标覆盖到菜单时的字体颜色
$menuTitleHover: #fff !default;
$menuActiveBefore: #4091f7 !default;

3
src/layout/theme/dusk-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #2a0608;
$menuHover: #e13c39;
$subMenuBg: #000;
$subMenuHover: #e13c39;
$subMenuActiveBg: #e13c39;
$navTextColor: red;
$menuText: rgba(254, 254, 254, 0.651);
$sidebarLogo: #42090c;
$menuTitleHover: #fff;
$menuActiveBefore: #e13c39;

5
src/layout/theme/light-vars.scss
View File

@ -3,8 +3,9 @@ $subMenuActiveText: #409eff;
$menuBg: #fff;
$menuHover: #e0ebf6;
$subMenuBg: #fff;
$subMenuHover: #e0ebf6;
$subMenuActiveBg: #e0ebf6;
$navTextColor: #7a80b4;
$menuText: #7a80b4;
$sidebarLogo: #fff;
$menuTitleHover: #7a80b4;
$menuTitleHover: #000;
$menuActiveBefore: #4091f7;

3
src/layout/theme/mingQing-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #032121;
$menuHover: #59bfc1;
$subMenuBg: #000;
$subMenuHover: #59bfc1;
$subMenuActiveBg: #59bfc1;
$navTextColor: #7a80b4;
$menuText: #7a80b4;
$sidebarLogo: #053434;
$menuTitleHover: #fff;
$menuActiveBefore: #59bfc1;

3
src/layout/theme/pink-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #28081a;
$menuHover: #d84493;
$subMenuBg: #000;
$subMenuHover: #d84493;
$subMenuActiveBg: #d84493;
$navTextColor: #7a80b4;
$menuText: #7a80b4;
$sidebarLogo: #3f0d29;
$menuTitleHover: #fff;
$menuActiveBefore: #d84493;

3
src/layout/theme/saucePurple-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #130824;
$menuHover: #693ac9;
$subMenuBg: #000;
$subMenuHover: #693ac9;
$subMenuActiveBg: #693ac9;
$navTextColor: #7a80b4;
$menuText: #7a80b4;
$sidebarLogo: #1f0c38;
$menuTitleHover: #fff;
$menuActiveBefore: #693ac9;

3
src/layout/theme/volcano-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #2b0e05;
$menuHover: #e85f33;
$subMenuBg: #0f0603;
$subMenuHover: #e85f33;
$subMenuActiveBg: #e85f33;
$navTextColor: #fff;
$menuText: rgba(254, 254, 254, 0.65);
$sidebarLogo: #441708;
$menuTitleHover: #fff;
$menuActiveBefore: #e85f33;

7
src/layout/theme/yellow-vars.scss
View File

@ -1,11 +1,12 @@
// 黄色
$subMenuActiveText: #fff;
$subMenuActiveText: #d25f00;
$menuBg: #2b2503;
$menuHover: #f6da4d;
$subMenuBg: #0f0603;
$subMenuHover: #f6da4d;
$subMenuActiveBg: #f6da4d;
$navTextColor: #fff;
$menuText: rgba(254, 254, 254, 0.65);
$sidebarLogo: #443b05;
$menuTitleHover: #443b05;
$menuTitleHover: #fff;
$menuActiveBefore: #f6da4d;

73
src/style/sidebar.scss
View File

@ -134,7 +134,7 @@
.submenu-title-noDropdown,
.el-sub-menu__title {
&:hover {
background-color: $menuHover !important;
background-color: transparent;
}
}
@ -157,10 +157,16 @@
font-size: 12px;
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
}
&:hover {
background-color: $subMenuHover !important;
}
// 无子集的激活菜单背景
.is-active.submenu-title-noDropdown.outer-most {
background: $subMenuActiveBg;
}
// 有子集的激活菜单背景
.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
}
@ -182,9 +188,9 @@
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: $menuHover;
}
// &:hover {
// background: transparent;
// }
i {
font-size: 30px;
@ -291,7 +297,7 @@
background: $menuBg;
&:hover {
background-color: $menuHover !important;
// background-color: transparent !important;
}
}
@ -312,6 +318,10 @@
}
}
// .is-active.submenu-title-noDropdown.outer-most {
// background: transparent;
// }
// vertical菜单折叠
.el-menu--vertical {
.el-menu--popup {
@ -322,10 +332,6 @@
font-size: 12px;
margin-left: 10px;
}
&:hover {
background-color: $subMenuHover;
}
}
.el-sub-menu__title {
@ -359,7 +365,7 @@
background-color: $subMenuBg !important;
&:hover {
background-color: $menuHover !important;
// background-color: transparent !important;
}
}
@ -378,11 +384,8 @@
color: $subMenuActiveText !important;
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
background-color: $menuHover !important;
}
.el-menu-item.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
.el-menu-item,
@ -413,10 +416,6 @@
font-size: 12px;
margin-left: 10px;
}
&:hover {
background-color: $subMenuHover;
}
}
.el-sub-menu__title {
@ -440,9 +439,9 @@
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $menuHover !important;
}
// &:hover {
// background-color: transparent !important;
// }
}
& > .el-menu {
@ -465,12 +464,12 @@
color: $subMenuActiveText !important;
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
background-color: $menuHover !important;
}
}
// .nest-menu .el-sub-menu > .el-sub-menu__title,
// .el-menu-item {
// &:hover {
// background-color: transparent !important;
// }
// }
}
.el-scrollbar__wrap {
@ -491,7 +490,7 @@
left: 5px;
width: 3px;
height: 100%;
background-color: #1890ff !important;
background-color: $menuActiveBefore;
content: "";
clear: both;
-webkit-transition: all 0.2s ease-in-out;
@ -507,7 +506,7 @@
left: 5px;
width: 3px;
height: 100%;
background-color: #1890ff !important;
background-color: $menuActiveBefore;
content: "";
clear: both;
-webkit-transition: all 0.2s ease-in-out;
@ -602,8 +601,10 @@ body[layout="vertical"] {
}
}
// 菜单折叠
.el-menu--collapse {
margin-left: -5px; //需优化的地方
margin-left: -5px;
.el-sub-menu {
& > .el-sub-menu__title {
& > span {
@ -615,6 +616,10 @@ body[layout="vertical"] {
}
}
}
.submenu-title-noDropdown {
background: transparent !important;
}
}
}
}