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 /* Menu
--------------------------*/ --------------------------*/
/// fontSize||Font|1 // refactor with css3 var
$--menu-item-font-size: map.get($--font-size, 'base') !default; // See packages/theme-chalk/src/menu.scss
/// 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;
/* Rate /* Rate
--------------------------*/ --------------------------*/

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

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