样式调整
This commit is contained in:
@@ -1,11 +1,9 @@
|
||||
@use './variables.module.scss' as vars;
|
||||
|
||||
#app {
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: vars.$base-sidebar-width;
|
||||
margin-left: $base-sidebar-width;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -15,7 +13,7 @@
|
||||
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
width: vars.$base-sidebar-width !important;
|
||||
width: $base-sidebar-width !important;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
@@ -24,8 +22,9 @@
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
// -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
// box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
border-right: 1px solid #e4e4e7;
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
@@ -61,7 +60,7 @@
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 10px !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
@@ -89,12 +88,12 @@
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: vars.$base-menu-color-active !important;
|
||||
color: $base-menu-color-active !important;
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: vars.$base-sidebar-width !important;
|
||||
min-width: $base-sidebar-width !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
@@ -103,10 +102,10 @@
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: vars.$base-sub-menu-background;
|
||||
background-color: $base-sub-menu-background;
|
||||
|
||||
&:hover {
|
||||
background-color: vars.$base-sub-menu-hover !important;
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -169,7 +168,7 @@
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-sub-menu {
|
||||
min-width: vars.$base-sidebar-width !important;
|
||||
min-width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
@@ -180,14 +179,14 @@
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: vars.$base-sidebar-width !important;
|
||||
width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-(vars.$base-sidebar-width), 0, 0);
|
||||
transform: translate3d(-$base-sidebar-width, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user