wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化主题色配置

Browse Source
This commit is contained in:
不做码农
2022-04-29 19:58:58 +08:00
parent c2296f54de
commit b431f01c44
8 changed files with 111 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/index.scss
-3
View File
@@ -202,9 +202,6 @@ div:focus {
.w100 {
width: 100%;
}
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.pull-right {
float: right !important;
src/assets/styles/sidebar.scss
+23 -26
View File
@@ -1,16 +1,15 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: $base-sidebar-width;
transition: margin-left 0.28s;
margin-left: var(--base-sidebar-width);
position: relative;
}
// 展开sidebar状态设置svg-icon边距
.openSidebar .layout-sidebar__container .svg-icon {
margin-right: 5px;
}
// 展开sidebar状态设置svg-icon边距
.openSidebar .layout-sidebar__container .svg-icon {
margin-right: 5px;
}
.hideSidebar {
.layout-sidebar__container {
width: 54px !important;
@@ -31,21 +30,23 @@
.el-sub-menu {
overflow: hidden;
&>.el-sub-menu__title {
& > .el-sub-menu__title {
.el-sub-menu__icon-arrow {
display: none;
}
}
}
// 折叠状态下
.el-menu--collapse {
[class^=el-icon] {
[class^='el-icon'] {
width: auto;
font-size: medium;
margin-right: 0;
}
.el-sub-menu {
&>.el-sub-menu__title {
&>span {
& > .el-sub-menu__title {
& > span {
height: 0;
width: 0;
overflow: hidden;
@@ -58,7 +59,7 @@
}
.el-menu--collapse .el-menu .el-sub-menu {
min-width: $base-sidebar-width !important;
min-width: var(--base-sidebar-width);
}
// mobile responsive
@@ -68,21 +69,18 @@
}
.layout-sidebar__container {
transition: transform .28s;
width: $base-sidebar-width !important;
transition: transform 0.28s;
width: var(--base-sidebar-width) !important;
}
&.hideSidebar {
.layout-sidebar__container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$base-sidebar-width, 0, 0);
display: none;
}
}
}
.withoutAnimation {
.main-container,
.layout-sidebar__container {
transition: none;
@@ -92,17 +90,16 @@
// when menu collapsed
.el-menu--vertical {
.nest-menu .el-sub-menu>.el-sub-menu__title,
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $base-sub-menu-hover !important;
// 缩小状态下选中背景
// background-color: var(--base-sub-menu-hover) !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
@@ -119,4 +116,4 @@
border-radius: 20px;
}
}
}
}
src/assets/styles/variables.module.scss
+48 -55
View File
@@ -1,69 +1,62 @@
// base color
$blue: #324157;
$light-blue: #3A71A8;
$red: #C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow: #FEC171;
$panGreen: #30B08F;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;
:root {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
--base-menu-background: #304156;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
}
// 默认菜单主题风格
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-logo-title-color: #ffffff;
$base-topBar-background: #ffffff;
:root {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
--base-menu-background: #ffffff;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
--base-sidebar-width: 210px;
}
/***默认主题颜色配置***/
[data-theme='theme-light'] {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
// 菜单背景
--base-menu-background: #ffffff;
// logo部分文字颜色
--base-logo-title-color: #001529;
// 顶部导航栏背景色
--base-topBar-background: #ffffff;
//缩小状态下子菜单选中颜色
--base-sub-menu-hover: #ccc;
// el-ement ui 设置
}
/***深色主题颜色配置***/
[data-theme='theme-dark'] {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
--base-menu-background: #304156;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
//缩小状态下子菜单选中颜色
--base-sub-menu-hover: #000;
// el-ement ui 设置
--el-fill-color-blank: #304156;
--el-text-color-primary: #ffffff;
}
$menuHover:#263445;
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;
//https://github.com/ElemeFE/element/issues/12951
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;
$base-sidebar-width: 210px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
/* js中import， import variables from '@/assets/styles/variables.module.scss'
template中使用 eg：variables.menuColor
*/
:export {
menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color;
menuColorActive: $base-menu-color-active;
menuBackground: $base-menu-background;
menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color;
// primaryColor: $--color-primary;
// successColor: $--color-success;
// dangerColor: $--color-danger;
// infoColor: $--color-info;
// warningColor: $--color-warning;
}
// :export {
// }