113 lines
3.0 KiB
SCSS
113 lines
3.0 KiB
SCSS
.left-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: $--left-menu-background-color-base;
|
|
|
|
.el-menu-item .nz-icon, .el-submenu .nz-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
width: 24px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
>.el-menu:not(.el-menu--collapse) {
|
|
width: 240px;
|
|
}
|
|
>.el-menu.menu-list {
|
|
height: calc(100% - 110px);
|
|
background-color: $--left-menu-background-color-base;
|
|
border-right: none;
|
|
overflow: auto;
|
|
.el-menu {
|
|
background-color: $--left-menu-background-color-base;
|
|
}
|
|
>.el-submenu.is-active .el-submenu__title {
|
|
background-color: $--left-menu-background-color-active !important;
|
|
}
|
|
.el-submenu.is-active>.el-submenu__title, .el-submenu.is-active>.el-submenu__title>i {
|
|
color: white !important;
|
|
}
|
|
.el-submenu.is-opened .el-menu-item:not(.is-active), .el-submenu.is-opened .el-submenu__title {
|
|
background-color: $--left-menu-background-color-open !important;
|
|
}
|
|
.is-opened.is-active{
|
|
background-color: $--left-menu-background-color-open !important;
|
|
}
|
|
.el-submenu.is-active:not(.is-opened)>.el-submenu__title{
|
|
border-left: 3px $--color-primary solid;
|
|
}
|
|
.el-menu-item.is-active {
|
|
background-color: $--left-menu-background-color-active !important;
|
|
border-left: 3px $--color-primary solid;
|
|
}
|
|
.el-menu-item, .el-submenu__title {
|
|
height: 46px;
|
|
line-height: 46px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
border-left: 3px $--left-menu-background-color-active solid;
|
|
}
|
|
.el-submenu__icon-arrow {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 20px;
|
|
}
|
|
}
|
|
|
|
/*---滚动条默认显示样式--*/
|
|
>.el-menu::-webkit-scrollbar-thumb {
|
|
background-color: lighten($--background-color-base, .1);
|
|
border-radius: 2px;
|
|
border: none;
|
|
}
|
|
/*---鼠标点击滚动条显示样式--*/
|
|
>.el-menu::-webkit-scrollbar-thumb:hover {
|
|
background-color: $--background-color-base;
|
|
border-radius: 2px;
|
|
}
|
|
/*---滚动条大小--*/
|
|
>.el-menu::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 14px;
|
|
}
|
|
>.el-menu.header-logo {
|
|
border-right: none;
|
|
>.el-menu-item {
|
|
padding: 13px 0 0 18px !important;
|
|
height: 50px;
|
|
border-right: 1px solid $--left-menu-background-color-base;
|
|
box-sizing: border-box;
|
|
background-color: $--left-menu-background-color-base !important;
|
|
|
|
.logo {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
|
|
img {
|
|
box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
|
|
}
|
|
|
|
.system-name {
|
|
padding-left: 5px;
|
|
color: white;
|
|
font-size: 12px;
|
|
letter-spacing: 0;
|
|
line-height: 34px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-menu--popup.el-menu--popup-right-start {
|
|
background-color: $--background-color-empty;
|
|
.el-menu-item:hover {
|
|
background-color: $--background-color-base;
|
|
}
|
|
.el-menu-item.is-active {
|
|
background-color: $--background-color-base;
|
|
}
|
|
}
|