From a2e149141182f1cd5b2ec60e07d453024027e6cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Fri, 30 Jul 2021 17:40:22 +0800 Subject: [PATCH] refactor(slider): migrate css var & use sass map for message (#2772) --- package.json | 4 +- packages/theme-chalk/src/common/var.scss | 46 ++++++++++++------- packages/theme-chalk/src/dialog.scss | 4 +- packages/theme-chalk/src/message-box.scss | 4 +- packages/theme-chalk/src/message.scss | 9 ++-- packages/theme-chalk/src/notification.scss | 5 ++- packages/theme-chalk/src/slider.scss | 51 ++++++++++++---------- packages/theme-chalk/src/var.scss | 3 -- yarn.lock | 26 ++++++----- 9 files changed, 87 insertions(+), 65 deletions(-) diff --git a/package.json b/package.json index 70ce82cebf..b2d820c080 100644 --- a/package.json +++ b/package.json @@ -94,8 +94,8 @@ "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.27.3", "rollup-plugin-vue": "^6.0.0", - "sass": "^1.35.1", - "sass-loader": "^10.0.1", + "sass": "^1.36.0", + "sass-loader": "10.1.1", "style-loader": "^1.2.1", "throttle-debounce": "2.3.0", "transliteration": "^2.1.11", diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 3ccd148734..9725d84b99 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -316,8 +316,19 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default; /* Message -------------------------- */ -// refactor with css3 var -// See packages/theme-chalk/src/message.scss +// css3 var in packages/theme-chalk/src/message.scss +$--message: () !default; +$--message: map.merge( + ( + 'min-width': 380px, + 'background-color': #edf2fc, + 'padding': 15px 15px 15px 20px, + 'close-size': 16px, + 'close-icon-color': var(--el-text-color-placeholder), + 'close-hover-color': var(--el-text-color-secondary), + ), + $--message +); /* Notification -------------------------- */ @@ -537,20 +548,23 @@ $--card: map.merge( /* Slider --------------------------*/ -/// color||Color|0 -$--slider-main-background-color: $--color-primary !default; -/// color||Color|0 -$--slider-runway-background-color: map.get($--border-color, 'light') !default; -$--slider-stop-background-color: $--color-white !default; -$--slider-disable-color: var(--el-text-color-placeholder) !default; -$--slider-margin: 16px 0 !default; -$--slider-border-radius: 3px !default; -/// height|1|Other|4 -$--slider-height: 6px !default; -/// height||Other|4 -$--slider-button-size: 20px !default; -$--slider-button-wrapper-size: 36px !default; -$--slider-button-wrapper-offset: -15px !default; +// css3 var in packages/theme-chalk/src/slider.scss +$--slider: () !default; +$--slider: map.merge( + ( + 'main-background-color': var(--el-color-primary), + 'runway-background-color': var(--el-border-color-light), + 'stop-background-color': var(--el-color-white), + 'disable-color': var(--el-text-color-placeholder), + 'margin': 16px 0, + 'border-radius': 3px, + 'height': 6px, + 'button-size': 20px, + 'button-wrapper-size': 36px, + 'button-wrapper-offset': -15px, + ), + $--slider +); /* Menu --------------------------*/ diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss index 6afa684449..ddf3b6d952 100644 --- a/packages/theme-chalk/src/dialog.scss +++ b/packages/theme-chalk/src/dialog.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + @import 'mixins/mixins'; @import 'mixins/utils'; @import 'common/var'; @@ -54,7 +56,7 @@ border: none; outline: none; cursor: pointer; - font-size: var(--el-message-close-size); + font-size: var(--el-message-close-size, map.get($--message, 'close-size')); .#{$namespace}-dialog__close { color: var(--el-color-info); diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss index dde61959c5..edbbdf20b6 100644 --- a/packages/theme-chalk/src/message-box.scss +++ b/packages/theme-chalk/src/message-box.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + @import 'mixins/mixins'; @import 'common/var'; @import 'common/popup'; @@ -67,7 +69,7 @@ border: none; outline: none; background: transparent; - font-size: var(--el-message-close-size); + font-size: var(--el-message-close-size, map.get($--message, 'close-size')); cursor: pointer; .#{$namespace}-message-box__close { diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss index 2ef8db94ad..113b9ccd5d 100644 --- a/packages/theme-chalk/src/message.scss +++ b/packages/theme-chalk/src/message.scss @@ -1,14 +1,11 @@ @use "sass:map"; @import 'mixins/mixins'; +@import 'mixins/var'; @import 'common/var'; :root { - --el-message-min-width: 380px; - --el-message-background-color: #edf2fc; - --el-message-padding: 15px 15px 15px 20px; - --el-message-close-icon-color: var(--el-text-color-placeholder); - --el-message-close-hover-color: var(--el-text-color-secondary); + @include set-component-css-var('message', $--message); @each $type in (success, info, warning, error) { --el-message-#{$type}-font-color: var(--el-color-#{$type}); @@ -86,7 +83,7 @@ transform: translateY(-50%); cursor: pointer; color: var(--el-message-close-icon-color); - font-size: var(--el-message-close-size); + font-size: var(--el-message-close-size, map.get($--message, 'close-size')); &:focus { outline-width: 0; diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss index 72f73f5b77..22afef9873 100644 --- a/packages/theme-chalk/src/notification.scss +++ b/packages/theme-chalk/src/notification.scss @@ -8,7 +8,10 @@ --el-notification-shadow: var(--el-box-shadow-light); --el-notification-border-color: var(--el-border-color-lighter); --el-notification-icon-size: 24px; - --el-notification-close-font-size: var(--el-message-close-size); + --el-notification-close-font-size: var( + --el-message-close-size, + map.get($--message, 'close-size') + ); --el-notification-group-margin-left: 13px; --el-notification-group-margin-right: 8px; diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss index 6dd87d297e..a1018f68e6 100644 --- a/packages/theme-chalk/src/slider.scss +++ b/packages/theme-chalk/src/slider.scss @@ -2,19 +2,24 @@ @import 'mixins/mixins'; @import 'mixins/utils'; +@import 'mixins/var'; @import 'input-number'; @import 'tooltip'; @import 'common/var'; +:root { + @include set-component-css-var('slider', $--slider); +} + @include b(slider) { @include utils-clearfix; @include e(runway) { width: 100%; - height: $--slider-height; - margin: $--slider-margin; - background-color: $--slider-runway-background-color; - border-radius: $--slider-border-radius; + height: var(--el-slider-height); + margin: var(--el-slider-margin); + background-color: var(--el-slider-runway-background-color); + border-radius: var(--el-slider-border-radius); position: relative; cursor: pointer; vertical-align: middle; @@ -28,11 +33,11 @@ cursor: default; .#{$namespace}-slider__bar { - background-color: $--slider-disable-color; + background-color: var(--el-slider-disable-color); } .#{$namespace}-slider__button { - border-color: $--slider-disable-color; + border-color: var(--el-slider-disable-color); } .#{$namespace}-slider__button-wrapper { @@ -84,19 +89,19 @@ } @include e(bar) { - height: $--slider-height; - background-color: $--slider-main-background-color; - border-top-left-radius: $--slider-border-radius; - border-bottom-left-radius: $--slider-border-radius; + height: var(--el-slider-height); + background-color: var(--el-slider-main-background-color); + border-top-left-radius: var(--el-slider-border-radius); + border-bottom-left-radius: var(--el-slider-border-radius); position: absolute; } @include e(button-wrapper) { - height: $--slider-button-wrapper-size; - width: $--slider-button-wrapper-size; + height: var(--el-slider-button-wrapper-size); + width: var(--el-slider-button-wrapper-size); position: absolute; z-index: 1; - top: $--slider-button-wrapper-offset; + top: var(--el-slider-button-wrapper-offset); transform: translateX(-50%); background-color: transparent; text-align: center; @@ -117,11 +122,11 @@ @include e(button) { display: inline-block; - width: $--slider-button-size; - height: $--slider-button-size; + width: var(--el-slider-button-size); + height: var(--el-slider-button-size); vertical-align: middle; - border: solid 2px $--slider-main-background-color; - background-color: $--color-white; + border: solid 2px var(--el-slider-main-background-color); + background-color: var(--el-color-white); border-radius: 50%; box-sizing: border-box; transition: var(--el-transition-duration-fast); @@ -145,10 +150,10 @@ @include e(stop) { position: absolute; - height: $--slider-height; - width: $--slider-height; + height: var(--el-slider-height); + width: var(--el-slider-height); border-radius: var(--el-border-radius-circle); - background-color: $--slider-stop-background-color; + background-color: var(--el-slider-stop-background-color); transform: translateX(-50%); } @@ -170,18 +175,18 @@ @include when(vertical) { position: relative; .#{$namespace}-slider__runway { - width: $--slider-height; + width: var(--el-slider-height); height: 100%; margin: 0 16px; } .#{$namespace}-slider__bar { - width: $--slider-height; + width: var(--el-slider-height); height: auto; border-radius: 0 0 3px 3px; } .#{$namespace}-slider__button-wrapper { top: auto; - left: $--slider-button-wrapper-offset; + left: var(--el-slider-button-wrapper-offset); transform: translateY(50%); } .#{$namespace}-slider__stop { diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss index ea649651d2..c20331eff3 100644 --- a/packages/theme-chalk/src/var.scss +++ b/packages/theme-chalk/src/var.scss @@ -91,9 +91,6 @@ --el-button-disabled-font-color: var(--el-text-color-placeholder); --el-button-disabled-background-color: var(--el-color-white); --el-button-disabled-border-color: var(--el-border-color-light); - - // message - --el-message-close-size: 16px; } /* Transition diff --git a/yarn.lock b/yarn.lock index f817427dcb..57fd98ad02 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8468,9 +8468,10 @@ kleur@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e" -klona@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.3.tgz#98274552c513583ad7a01456a789a2a0b4a2a538" +klona@^2.0.4: + version "2.0.4" + resolved "https://registry.npm.taobao.org/klona/download/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0" + integrity sha1-e7Hjr/sMuGJFR+9+j2cI6i4538A= last-run@^1.1.0: version "1.1.1" @@ -11646,14 +11647,15 @@ sane@^4.0.3: minimist "^1.1.1" walker "~1.0.5" -sass-loader@^10.0.1: - version "10.0.2" - resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.0.2.tgz#c7b73010848b264792dd45372eea0b87cba4401e" +sass-loader@10.1.1: + version "10.1.1" + resolved "https://registry.nlark.com/sass-loader/download/sass-loader-10.1.1.tgz?cache=0&sync_timestamp=1623350053592&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsass-loader%2Fdownload%2Fsass-loader-10.1.1.tgz#4ddd5a3d7638e7949065dd6e9c7c04037f7e663d" + integrity sha1-Td1aPXY455SQZd1unHwEA39+Zj0= dependencies: - klona "^2.0.3" + klona "^2.0.4" loader-utils "^2.0.0" neo-async "^2.6.2" - schema-utils "^2.7.1" + schema-utils "^3.0.0" semver "^7.3.2" sass@^1.26.3: @@ -11663,10 +11665,10 @@ sass@^1.26.3: dependencies: chokidar ">=3.0.0 <4.0.0" -sass@^1.35.1: - version "1.35.1" - resolved "https://registry.nlark.com/sass/download/sass-1.35.1.tgz#90ecf774dfe68f07b6193077e3b42fb154b9e1cd" - integrity sha1-kOz3dN/mjwe2GTB347QvsVS54c0= +sass@^1.36.0: + version "1.36.0" + resolved "https://registry.nlark.com/sass/download/sass-1.36.0.tgz#5912ef9d5d16714171ba11cb17edb274c4bbc07e" + integrity sha1-WRLvnV0WcUFxuhHLF+2ydMS7wH4= dependencies: chokidar ">=3.0.0 <4.0.0"