center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

style: 完善sider侧边菜单样式

Browse Source
This commit is contained in:
fit2cloud-chenyw 2021-10-11 10:45:17 +08:00
parent 158b3a1e29
commit 3a84a9e204
1 changed files with 12 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/styles/sidebar.scss
View File

@ -71,42 +71,25 @@
.submenu-title-noDropdown:not(.is-active), .el-submenu__title { .submenu-title-noDropdown:not(.is-active), .el-submenu__title {
color: var(--SiderTextColor); color: var(--SiderTextColor);
&:hover { &:hover {
background-color: var(--MenuHovorBG) !important; background-color: var(--MenuHovorBG, #ecf5ff) !important;
color: var(--TextActive); color: var(--TextActive, #409EFF);
} }
&:focus { &:focus {
background-color: var(--MenuActiveBG) !important; background-color: var(--MenuActiveBG, #ecf5ff) !important;
color: var(--TextActive); color: var(--TextActive, #409EFF);
} }
} }
.submenu-title-noDropdown.is-active { .submenu-title-noDropdown.is-active {
background-color: var(--MenuActiveBG) !important; background-color: var(--MenuActiveBG, #ecf5ff) !important;
color: var(--TextActive); color: var(--TextActive, #409EFF);
} }
.is-active > .el-submenu__title { .is-active > .el-submenu__title {
background-color: var(--MenuActiveBG) !important; background-color: var(--MenuActiveBG, #ecf5ff) !important;
color: var(--TextActive); color: var(--TextActive, #409EFF);
} }
/* .nest-menu {
.el-menu-item:not(.is-active) {
min-width: $sideBarWidth !important;
background-color: var(--SiderBG) !important;
color: var(--SiderTextColor);
&:hover {
color: var(--TextActive) !important;
}
&:focus {
background-color: var(--SiderBG) !important;
color: var(--TextActive) !important;
}
}
.el-menu-item.is-active {
color: var(--TextActive) !important;
}
} */
& .nest-menu .el-submenu > .el-submenu__title, & .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
@ -114,7 +97,7 @@
background-color: var(--SiderBG) !important; background-color: var(--SiderBG) !important;
color: var(--SiderTextColor); color: var(--SiderTextColor);
&:hover { &:hover {
background-color: var(--MenuHovorBG) !important; background-color: var(--MenuHovorBG, #ecf5ff) !important;
color: var(--TextActive) !important; color: var(--TextActive) !important;
} }
} }
@ -123,7 +106,7 @@
& .el-submenu .is-active.el-menu-item { & .el-submenu .is-active.el-menu-item {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
background-color: var(--SiderBG) !important; background-color: var(--SiderBG) !important;
color: var(--TextActive); color: var(--TextActive, #409EFF);
} }
@ -190,24 +173,7 @@
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
} }
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation { .withoutAnimation {