lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🎸 重构layout-classic布局

Browse Source
This commit is contained in:
chenkl
2020-12-17 17:01:13 +08:00
parent 7ede02141e
commit 29d9c98860
11 changed files with 270 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/index.less
View File

@@ -1,7 +1,7 @@
@import '~element-plus/lib/theme-chalk/index.css';
// @import './sidebar.less';
@import './transition.less';
@import './silder.less';
@import './sider.less';
@import './glob.less';
// @import './button.less';
// @import './antdv.less';

108
src/styles/sider.less Normal file
View File

@@ -0,0 +1,108 @@
.app__wrap--Classic {
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
}
.sidebar-container {
background: @menuBg;
.el-menu {
background-color: @menuBg !important;
.el-menu-item,
.el-submenu__title {
color: @menuText !important;
background-color: @menuBg !important;
i {
color: @menuText !important;
}
}
.is-active {
color: @menuActiveText !important;
background-color: @subMenuHover !important;
&>.el-submenu__title {
color: @menuActiveText !important;
}
}
.is-opened {
.el-menu-item {
background-color: @subMenuBg !important;
}
}
.nest-menu {
background-color: @subMenuBg !important;
.el-submenu>.el-submenu__title {
background-color: @subMenuBg !important;
}
.is-active {
background-color: @subMenuHover !important;
}
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: @menuBg !important;
color: @subMenuActiveText !important;
}
}
.el-menu-item:hover {
color: @subMenuActiveText !important;
background-color: @subMenuHover !important;
}
}
.el-menu--collapse {
&>div>.el-submenu {
i {
display: none;
}
}
.is-active {
&>.el-submenu__title {
background-color: @subMenuHover !important;
}
}
}
}
}
.nest-popper-menu {
background: @menuBg;
.el-menu {
background-color: @menuBg !important;
.el-menu-item,
.el-submenu__title {
color: @menuText !important;
background-color: @menuBg !important;
i {
color: @menuText !important;
}
}
.is-active {
color: @menuActiveText !important;
background-color: @subMenuHover !important;
&>.el-submenu__title {
color: @menuActiveText !important;
}
}
.nest-menu {
.is-active {
background-color: @subMenuHover !important;
}
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: @menuBg !important;
color: @subMenuActiveText !important;
}
}
.el-menu-item:hover {
color: @subMenuActiveText !important;
background-color: @subMenuHover !important;
}
}
}

27
src/styles/silder.less
View File

@@ -1,27 +0,0 @@
.ant-layout-sider-collapsed,
.ant-menu-horizontal {
.dark-active-item {
background: @menuDarkActiveBg;
.ant-menu-submenu-title {
color: @menuDarkActiveText;
}
}
.light-active-item {
background: @menuLightActiveBg;
.ant-menu-submenu-title {
color: @menuLightActiveText;
}
}
}
.dark-popup-active-item {
.ant-menu-submenu-title {
color: @menuDarkActiveText;
}
}
.light-popup-active-item {
.ant-menu-submenu-title {
color: @menuLightActiveText;
}
}

12
src/styles/variables.less
View File

@@ -1,25 +1,17 @@
// Silder
@menuText: #bfcbd9;
@menuActiveText: #409EFF;
@menuActiveText: #fff;
@menuActiveBg: #2d8cf0;
@menuBg: #001529;
@subMenuBg: #1f2d3d;
@subMenuHover: #1f2d3d;
@subMenuHover: #2d8cf0;
@subMenuActiveText: #fff;
@menuWidth: 200px;
@menuMinWidth: 64px;
@menuLightActiveText: #1890ff;
@menuLightActiveBg: #e6f7ff;
@menuDarkActiveText: #fff;
@menuDarkActiveBg: #1890ff;
@menuLightBg: #fff;
// topSilder
@topSilderHeight: 50px;