test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-01 10:47:57 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(theme-chalk): auto menu item height & add css var, close #4864 (#5034)

Browse Source
This commit is contained in:
云游君 2021-12-30 17:28:49 +08:00 committed by GitHub
parent 047dbccf3d
commit bd75d831f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/examples/menu/vertical.vue
View File

@ -1,7 +1,7 @@
<template>
<el-row class="tac">
<el-col :span="12">
<h5>Default colors</h5>
<h5 class="mb-2">Default colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@ -40,7 +40,7 @@
</el-menu>
</el-col>
<el-col :span="12">
<h5>Custom colors</h5>
<h5 class="mb-2">Custom colors</h5>
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"

1
packages/theme-chalk/src/common/var.scss
View File

@ -915,6 +915,7 @@ $menu: map.merge(
'hover-text-color': var(--el-text-color-primary),
'bg-color': var(--el-color-white),
'hover-bg-color': var(--el-color-primary-light-9),
'item-height': 56px,
'item-font-size': var(--el-font-size-base),
'item-hover-fill': var(--el-color-primary-light-9),
'border-color': #e6e6e6,

9
packages/theme-chalk/src/menu.scss
View File

@ -7,8 +7,8 @@
@mixin menu-item {
display: flex;
align-items: center;
height: 56px;
line-height: 56px;
height: var(--el-menu-item-height);
line-height: var(--el-menu-item-height);
font-size: var(--el-menu-item-font-size);
color: var(--el-menu-text-color);
padding: 0 20px;
@ -67,7 +67,7 @@
justify-content: center;
align-items: center;
height: 60px;
height: 100%;
margin: 0;
border-bottom: 2px solid transparent;
color: var(--el-menu-text-color);
@ -102,8 +102,7 @@
}
& .#{$namespace}-sub-menu__title {
height: 60px;
line-height: 60px;
height: 100%;
border-bottom: 2px solid transparent;
color: var(--el-menu-text-color);