@use '@styles/core/mixin.scss' as *;
|
|
// 菜单样式变量
|
$menu-height: 42px;
|
$menu-icon-size: 20px;
|
$menu-font-size: 14px;
|
$hover-bg-color: var(--art-gray-200);
|
$popup-menu-height: 40px;
|
$popup-menu-padding: 8px;
|
$popup-menu-margin: 5px;
|
$popup-menu-radius: 6px;
|
|
// 通用菜单项样式
|
@mixin menu-item-base {
|
width: calc(100% - 16px);
|
margin-left: 8px;
|
border-radius: 6px;
|
|
.menu-icon {
|
margin-left: -7px;
|
}
|
}
|
|
// 通用 hover 样式
|
@mixin menu-hover($bg-color) {
|
.el-sub-menu__title:hover,
|
.el-menu-item:not(.is-active):hover {
|
background: $bg-color !important;
|
}
|
}
|
|
// 通用选中样式
|
@mixin menu-active($color, $bg-color, $icon-color: var(--theme-color)) {
|
.el-menu-item.is-active {
|
color: $color !important;
|
background-color: $bg-color;
|
|
.menu-icon {
|
.art-svg-icon {
|
color: $icon-color !important;
|
}
|
}
|
}
|
}
|
|
// 弹窗菜单项样式
|
@mixin popup-menu-item {
|
height: $popup-menu-height;
|
margin-bottom: $popup-menu-margin;
|
border-radius: $popup-menu-radius;
|
|
.menu-icon {
|
margin-right: 5px;
|
}
|
|
&:last-of-type {
|
margin-bottom: 0;
|
}
|
}
|
|
// 主题菜单通用样式（合并 design 和 dark 主题的共同逻辑）
|
@mixin theme-menu-base {
|
.el-sub-menu__title,
|
.el-menu-item {
|
@include menu-item-base;
|
}
|
}
|
|
// 弹窗菜单通用样式
|
@mixin popup-menu-base($hover-bg, $active-color, $active-bg) {
|
.el-menu--popup {
|
padding: $popup-menu-padding;
|
|
.el-sub-menu__title:hover,
|
.el-menu-item:hover {
|
background-color: $hover-bg !important;
|
border-radius: $popup-menu-radius;
|
}
|
|
.el-menu-item {
|
@include popup-menu-item;
|
|
&.is-active {
|
color: $active-color !important;
|
background-color: $active-bg !important;
|
}
|
}
|
|
.el-sub-menu {
|
@include popup-menu-item;
|
|
height: $popup-menu-height !important;
|
|
.el-sub-menu__title {
|
height: $popup-menu-height !important;
|
border-radius: $popup-menu-radius;
|
}
|
}
|
}
|
}
|
|
.layout-sidebar {
|
// ---------------------- Modify default style ----------------------
|
|
// 菜单折叠样式
|
.menu-left-close {
|
.header {
|
.logo {
|
margin: 0 auto;
|
}
|
}
|
}
|
|
// 菜单图标
|
.menu-icon {
|
margin-right: 8px;
|
font-size: $menu-icon-size;
|
}
|
|
// 菜单高度
|
.el-sub-menu__title,
|
.el-menu-item {
|
height: $menu-height !important;
|
margin-bottom: 4px;
|
line-height: $menu-height !important;
|
|
span {
|
font-size: $menu-font-size !important;
|
|
@include ellipsis();
|
}
|
}
|
|
// 右侧箭头
|
.el-sub-menu__icon-arrow {
|
width: 13px !important;
|
font-size: 13px !important;
|
}
|
|
// 菜单折叠
|
.el-menu--collapse {
|
.el-sub-menu.is-active {
|
.el-sub-menu__title {
|
.menu-icon {
|
.art-svg-icon {
|
// 选中菜单图标颜色
|
color: var(--theme-color) !important;
|
}
|
}
|
}
|
}
|
}
|
|
// ---------------------- Design theme menu ----------------------
|
.el-menu-design {
|
@include theme-menu-base;
|
@include menu-active(var(--theme-color), var(--el-color-primary-light-9));
|
@include menu-hover($hover-bg-color);
|
|
.el-sub-menu__icon-arrow {
|
color: var(--art-gray-600);
|
}
|
}
|
|
// ---------------------- Dark theme menu ----------------------
|
.el-menu-dark {
|
@include theme-menu-base;
|
@include menu-active(#fff, #27282d, #fff);
|
@include menu-hover(#0f1015);
|
|
.el-sub-menu__icon-arrow {
|
color: var(--art-gray-400);
|
}
|
}
|
|
// ---------------------- Light theme menu ----------------------
|
.el-menu-light {
|
.el-sub-menu__title,
|
.el-menu-item {
|
.menu-icon {
|
margin-left: 1px;
|
}
|
}
|
|
.el-menu-item.is-active {
|
background-color: var(--el-color-primary-light-9);
|
|
.art-svg-icon {
|
color: var(--theme-color) !important;
|
}
|
|
&::before {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 4px;
|
height: 100%;
|
content: '';
|
background: var(--theme-color);
|
}
|
}
|
|
@include menu-hover($hover-bg-color);
|
|
.el-sub-menu__icon-arrow {
|
color: var(--art-gray-600);
|
}
|
}
|
}
|
|
@media only screen and (width <= 640px) {
|
.layout-sidebar {
|
.el-menu-design {
|
> .el-sub-menu {
|
margin-left: 0;
|
}
|
|
.el-sub-menu {
|
width: 100% !important;
|
}
|
}
|
}
|
}
|
|
// 菜单折叠 hover 弹窗样式（浅色主题）
|
.el-menu--vertical,
|
.el-menu--popup-container {
|
@include popup-menu-base(var(--art-gray-200), var(--art-gray-900), var(--art-gray-200));
|
}
|
|
// 暗黑模式菜单样式
|
.dark {
|
.el-menu--vertical,
|
.el-menu--popup-container {
|
@include popup-menu-base(var(--art-gray-200), var(--art-gray-900), #292a2e);
|
}
|
|
.layout-sidebar {
|
// 图标颜色、文字颜色
|
.menu-icon .art-svg-icon,
|
.menu-name {
|
color: var(--art-gray-800) !important;
|
}
|
|
// 选中的文字颜色跟图标颜色
|
.el-menu-item.is-active {
|
span,
|
.menu-icon .art-svg-icon {
|
color: var(--theme-color) !important;
|
}
|
}
|
|
// 右侧箭头颜色
|
.el-sub-menu__icon-arrow {
|
color: #fff;
|
}
|
}
|
}
|
