From 3f4e0f6f33a9471d9b0f0d0404c6e1cc37286c87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Tue, 27 Jul 2021 09:02:46 +0800 Subject: [PATCH] refactor: migrate tree/popup/form/timeline-item css var (#2697) --- packages/theme-chalk/src/common/popup.scss | 9 ++++-- packages/theme-chalk/src/common/var.scss | 23 +++++-------- packages/theme-chalk/src/form.scss | 6 +++- packages/theme-chalk/src/timeline-item.scss | 36 +++++++++------------ packages/theme-chalk/src/tree.scss | 20 ++++++++---- 5 files changed, 48 insertions(+), 46 deletions(-) diff --git a/packages/theme-chalk/src/common/popup.scss b/packages/theme-chalk/src/common/popup.scss index 9c7d3cf8f4..b9bac2212d 100644 --- a/packages/theme-chalk/src/common/popup.scss +++ b/packages/theme-chalk/src/common/popup.scss @@ -1,6 +1,11 @@ @import './var.scss'; @import '../mixins/mixins'; +:root { + --el-popup-modal-background-color: var(--el-color-black); + --el-popup-modal-opacity: 0.5; +} + .v-modal-enter { animation: v-modal-in var(--el-transition-duration-fast) ease; } @@ -31,8 +36,8 @@ top: 0; width: 100%; height: 100%; - opacity: $--popup-modal-opacity; - background: $--popup-modal-background-color; + opacity: var(--el-popup-modal-opacity); + background: var(--el-popup-modal-background-color); } @include b(popup-parent) { diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index a52b21b903..0968bfc8ae 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -453,10 +453,8 @@ $--button-active-shade-percent: 10% !default; /* Popup -------------------------- */ -/// color||Color|0 -$--popup-modal-background-color: $--color-black !default; -/// opacity||Other|1 -$--popup-modal-opacity: 0.5 !default; +// refactor with css3 var +// See packages/theme-chalk/src/popup.scss /* Popover -------------------------- */ @@ -475,12 +473,8 @@ $--popup-modal-opacity: 0.5 !default; /* Tree -------------------------- */ -/// color||Color|0 -$--tree-node-hover-background-color: $--background-color-base !default; -/// color||Color|0 -$--tree-font-color: var(--el-text-color-regular) !default; -/// color||Color|0 -$--tree-expand-icon-color: var(--el-text-color-placeholder) !default; +// refactor with css3 var +// See packages/theme-chalk/src/tree.scss /* Dropdown -------------------------- */ @@ -600,9 +594,8 @@ $--loading-fullscreen-spinner-size: 50px !default; /* Timeline --------------------------*/ -$--timeline-node-size-normal: 12px !default; -$--timeline-node-size-large: 14px !default; -$--timeline-node-color: map.get($--border-color, 'light') !default; +// refactor with css3 var +// See packages/theme-chalk/src/timeline-item.scss /* Backtop --------------------------*/ @@ -628,8 +621,8 @@ $--backtop-hover-background-color: map.get( /* Form -------------------------- */ -/// fontSize||Font|1 -$--form-label-font-size: map.get($--font-size, 'base') !default; +// refactor with css3 var +// See packages/theme-chalk/src/form.scss /* Avatar --------------------------*/ diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss index 413e93f810..9a8bef5e88 100644 --- a/packages/theme-chalk/src/form.scss +++ b/packages/theme-chalk/src/form.scss @@ -2,6 +2,10 @@ @import 'mixins/utils'; @import 'common/var'; +:root { + --el-form-label-font-size: var(--el-font-size-base); +} + @include b(form) { @include m(label-left) { & .#{$namespace}-form-item__label { @@ -93,7 +97,7 @@ @include e(label) { flex: 0 0 auto; text-align: right; - font-size: $--form-label-font-size; + font-size: var(--el-form-label-font-size); color: var(--el-text-color-regular); line-height: 40px; padding: 0 12px 0 0; diff --git a/packages/theme-chalk/src/timeline-item.scss b/packages/theme-chalk/src/timeline-item.scss index 1b0cd10ce8..3de1a63ae9 100644 --- a/packages/theme-chalk/src/timeline-item.scss +++ b/packages/theme-chalk/src/timeline-item.scss @@ -1,6 +1,12 @@ @import 'mixins/mixins'; @import 'common/var'; +:root { + --el-timeline-node-size-normal: 12px; + --el-timeline-node-size-large: 14px; + --el-timeline-node-color: var(--el-border-color-light); +} + @include b(timeline-item) { position: relative; padding-bottom: 20px; @@ -15,17 +21,17 @@ position: absolute; left: 4px; height: 100%; - border-left: 2px solid $--timeline-node-color; + border-left: 2px solid var(--el-timeline-node-color); } @include e(icon) { - color: $--color-white; + color: var(--el-color-white); font-size: var(--el-font-size-small); } @include e(node) { position: absolute; - background-color: $--timeline-node-color; + background-color: var(--el-timeline-node-color); border-radius: 50%; display: flex; justify-content: center; @@ -33,29 +39,17 @@ @include m(normal) { left: -1px; - width: $--timeline-node-size-normal; - height: $--timeline-node-size-normal; + width: var(--el-timeline-node-size-normal); + height: var(--el-timeline-node-size-normal); } @include m(large) { left: -2px; - width: $--timeline-node-size-large; - height: $--timeline-node-size-large; + width: var(--el-timeline-node-size-large); + height: var(--el-timeline-node-size-large); } - @include m(primary) { - background-color: var(--el-color-primary); - } - @include m(success) { - background-color: var(--el-color-success); - } - @include m(warning) { - background-color: var(--el-color-warning); - } - @include m(danger) { - background-color: var(--el-color-danger); - } - @include m(info) { - background-color: var(--el-color-info); + @each $type in (primary, success, warning, danger, info) { + background-color: var(--el-color-#{$type}); } } diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss index 653e4be286..735f04ad31 100644 --- a/packages/theme-chalk/src/tree.scss +++ b/packages/theme-chalk/src/tree.scss @@ -3,11 +3,17 @@ @import 'common/transition'; @import 'checkbox'; +:root { + --el-tree-node-hover-background-color: var(--el-background-color-base); + --el-tree-font-color: var(--el-text-color-regular); + --el-tree-expand-icon-color: var(--el-text-color-placeholder); +} + @include b(tree) { position: relative; cursor: default; - background: $--color-white; - color: $--tree-font-color; + background: var(--el-color-white); + color: var(--el-tree-font-color); @include e(empty-block) { position: relative; @@ -41,7 +47,7 @@ &:focus { /* focus */ > .#{$namespace}-tree-node__content { - background-color: $--tree-node-hover-background-color; + background-color: var(--el-tree-node-hover-background-color); } } @@ -65,7 +71,7 @@ margin-right: 8px; } &:hover { - background-color: $--tree-node-hover-background-color; + background-color: var(--el-tree-node-hover-background-color); } .#{$namespace}-tree.is-dragging & { @@ -83,7 +89,7 @@ @include e(expand-icon) { cursor: pointer; - color: $--tree-expand-icon-color; + color: var(--el-tree-expand-icon-color); font-size: 12px; transform: rotate(0deg); @@ -106,7 +112,7 @@ @include e(loading-icon) { margin-right: 8px; font-size: var(--el-font-size-base); - color: $--tree-expand-icon-color; + color: var(--el-tree-expand-icon-color); } & > .#{$namespace}-tree-node__children { @@ -122,5 +128,5 @@ .#{$namespace}-tree--highlight-current .#{$namespace}-tree-node.is-current > .#{$namespace}-tree-node__content { - background-color: mix($--color-white, $--color-primary, 92%); + background-color: var(--el-color-primary-light-9); }