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> <template>
<el-row class="tac"> <el-row class="tac">
<el-col :span="12"> <el-col :span="12">
<h5>Default colors</h5> <h5 class="mb-2">Default colors</h5>
<el-menu <el-menu
default-active="2" default-active="2"
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
@ -40,7 +40,7 @@
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<h5>Custom colors</h5> <h5 class="mb-2">Custom colors</h5>
<el-menu <el-menu
active-text-color="#ffd04b" active-text-color="#ffd04b"
background-color="#545c64" 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), 'hover-text-color': var(--el-text-color-primary),
'bg-color': var(--el-color-white), 'bg-color': var(--el-color-white),
'hover-bg-color': var(--el-color-primary-light-9), 'hover-bg-color': var(--el-color-primary-light-9),
'item-height': 56px,
'item-font-size': var(--el-font-size-base), 'item-font-size': var(--el-font-size-base),
'item-hover-fill': var(--el-color-primary-light-9), 'item-hover-fill': var(--el-color-primary-light-9),
'border-color': #e6e6e6, 'border-color': #e6e6e6,

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

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