test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(menu): migrate css var (#2642)

Browse Source
This commit is contained in:
云游君 2021-07-23 23:13:08 +08:00 committed by GitHub
parent 4ae485123e
commit 0154b542e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -539,14 +539,8 @@ $--slider-button-wrapper-offset: -15px !default;
/* Menu
--------------------------*/
/// fontSize||Font|1
$--menu-item-font-size: map.get($--font-size, 'base') !default;
/// color||Color|0
$--menu-item-font-color: $--color-text-primary !default;
/// color||Color|0
$--menu-background-color: $--color-white !default;
$--menu-item-hover-fill: map.get($--colors, 'primary', 'light-9') !default;
$--menu-border-color: #e6e6e6 !default;
// refactor with css3 var
// See packages/theme-chalk/src/menu.scss
/* Rate
--------------------------*/

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

@ -4,11 +4,19 @@
@import 'common/transition';
@import 'tooltip';
:root {
--el-menu-item-font-size: var(--el-font-size-base);
--el-menu-item-font-color: var(--el-color-text-primary);
--el-menu-background-color: var(--el-color-white);
--el-menu-item-hover-fill: var(--el-color-primary-light-9);
--el-menu-border-color: #e6e6e6;
}
@mixin menu-item {
height: 56px;
line-height: 56px;
font-size: $--menu-item-font-size;
color: $--menu-item-font-color;
font-size: var(--el-menu-item-font-size);
color: var(--el-menu-item-font-color);
padding: 0 20px;
list-style: none;
cursor: pointer;
@ -30,7 +38,7 @@
&:hover,
&:focus {
outline: none;
background-color: $--menu-item-hover-fill;
background-color: var(--el-menu-item-hover-fill);
}
@include when(disabled) {
@ -41,15 +49,15 @@
}
@include b(menu) {
border-right: solid 1px $--menu-border-color;
border-right: solid 1px var(--el-menu-border-color);
list-style: none;
position: relative;
margin: 0;
padding-left: 0;
background-color: $--menu-background-color;
background-color: var(--el-menu-background-color);
@include utils-clearfix;
&.#{$namespace}-menu--horizontal {
border-bottom: solid 1px $--menu-border-color;
border-bottom: solid 1px var(--el-menu-border-color);
}
@include m(horizontal) {
@ -219,7 +227,7 @@
@include menu-item;
&:hover {
background-color: $--menu-item-hover-fill;
background-color: var(--el-menu-item-hover-fill);
}
}
& .#{$namespace}-menu {