From 4ae485123e471d832e86b02f14c3ab7a9836c5e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Fri, 23 Jul 2021 23:12:45 +0800 Subject: [PATCH] refactor(dialog): migrate css var (#2641) --- packages/theme-chalk/src/common/var.scss | 19 ++---------- packages/theme-chalk/src/dialog.scss | 38 +++++++++++++++--------- packages/theme-chalk/src/drawer.scss | 12 ++++++-- packages/theme-chalk/src/radio.scss | 6 +++- packages/theme-chalk/src/var.scss | 4 +-- 5 files changed, 43 insertions(+), 36 deletions(-) diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index d4d7320f95..5773eeabe7 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -185,11 +185,6 @@ $--font-size: map.merge( $--font-size ); -/// fontWeight|1|Font Weight|1 -$--font-weight-primary: 500 !default; -/// fontLineHeight|1|Line Height|2 -$--font-line-height-primary: 24px !default; - /* Disable base -------------------------- */ $--disabled-fill-base: $--background-color-base !default; @@ -207,8 +202,6 @@ $--disabled-border-base: map.get($--border-color, 'light') !default; -------------------------- */ /// fontSize||Font|1 $--radio-font-size: map.get($--font-size, 'base') !default; -/// fontWeight||Font|1 -$--radio-font-weight: $--font-weight-primary !default; /// color||Color|0 $--radio-font-color: $--color-text-regular !default; $--radio-input-height: 14px !default; @@ -431,16 +424,8 @@ $--button-active-shade-percent: 10% !default; /* Dialog -------------------------- */ -$--dialog-background-color: $--color-white !default; -$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; -/// fontSize||Font|1 -$--dialog-title-font-size: map.get($--font-size, 'large') !default; -/// fontSize||Font|1 -$--dialog-content-font-size: 14px !default; -/// fontLineHeight||LineHeight|2 -$--dialog-font-line-height: $--font-line-height-primary !default; -/// padding||Spacing|3 -$--dialog-padding-primary: 20px !default; +// refactor with css3 var +// See packages/theme-chalk/src/dialog.scss /* Table -------------------------- */ diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss index 72e2c9ef23..3dba0410bc 100644 --- a/packages/theme-chalk/src/dialog.scss +++ b/packages/theme-chalk/src/dialog.scss @@ -4,12 +4,21 @@ @import 'common/popup'; @import './overlay.scss'; +:root { + --el-dialog-background-color: var(--el-color-white); + --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + --el-dialog-title-font-size: var(--el-font-size-large); + --el-dialog-content-font-size: 14px; + --el-dialog-font-line-height: var(--el-font-line-height-primary); + --el-dialog-padding-primary: 20px; +} + @include b(dialog) { position: relative; margin: 0 auto 50px; - background: $--dialog-background-color; - border-radius: $--border-radius-small; - box-shadow: $--dialog-box-shadow; + background: var(--el-dialog-background-color); + border-radius: var(--el-border-radius-small); + box-shadow: var(--el-dialog-box-shadow); box-sizing: border-box; width: 50%; @@ -32,14 +41,14 @@ } @include e(header) { - padding: $--dialog-padding-primary; + padding: var(--el-dialog-padding-primary); padding-bottom: 10px; } @include e(headerbtn) { position: absolute; - top: $--dialog-padding-primary; - right: $--dialog-padding-primary; + top: var(--el-dialog-padding-primary); + right: var(--el-dialog-padding-primary); padding: 0; background: transparent; border: none; @@ -60,20 +69,21 @@ } @include e(title) { - line-height: $--dialog-font-line-height; - font-size: $--dialog-title-font-size; - color: $--color-text-primary; + line-height: var(--el-dialog-font-line-height); + font-size: var(--el-dialog-title-font-size); + color: var(--el-color-text-primary); } @include e(body) { - padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary; - color: $--color-text-regular; - font-size: $--dialog-content-font-size; + padding: calc(var(--el-dialog-padding-primary) + 10px) + var(--el-dialog-padding-primary); + color: var(--el-color-text-regular); + font-size: var(--el-dialog-content-font-size); word-break: break-all; } @include e(footer) { - padding: $--dialog-padding-primary; + padding: var(--el-dialog-padding-primary); padding-top: 10px; text-align: right; box-sizing: border-box; @@ -85,7 +95,7 @@ @include e(body) { text-align: initial; - padding: 25px ($--dialog-padding-primary + 5px) 30px; + padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 30px; } @include e(footer) { diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss index 75bb3da828..226342c892 100644 --- a/packages/theme-chalk/src/drawer.scss +++ b/packages/theme-chalk/src/drawer.scss @@ -71,10 +71,18 @@ $directions: rtl, ltr, ttb, btt; +:root { + --el-drawer-background-color: var( + --el-dialog-background-color, + var(--el-color-white) + ); + --el-drawer-padding-primary: var(--el-dialog-padding-primary, 20px); +} + @include b(drawer) { position: absolute; box-sizing: border-box; - background-color: $--dialog-background-color; + background-color: var(--el-drawer-background-color); display: flex; flex-direction: column; box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), @@ -96,7 +104,7 @@ $directions: rtl, ltr, ttb, btt; color: rgb(114, 118, 123); display: flex; margin-bottom: 32px; - padding: $--dialog-padding-primary; + padding: var(--el-dialog-padding-primary); padding-bottom: 0; & > :first-child { flex: 1; diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss index 3cdfde2d89..a5937887cc 100644 --- a/packages/theme-chalk/src/radio.scss +++ b/packages/theme-chalk/src/radio.scss @@ -5,9 +5,13 @@ @import 'mixins/button'; @import 'common/var'; +:root { + --el-radio-font-weight: var(--el-font-weight-primary); +} + @include b(radio) { color: $--radio-font-color; - font-weight: $--radio-font-weight; + font-weight: var(--el-radio-font-weight); line-height: 1; position: relative; cursor: pointer; diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss index 72dab5b73c..699c0d25e9 100644 --- a/packages/theme-chalk/src/var.scss +++ b/packages/theme-chalk/src/var.scss @@ -62,8 +62,8 @@ @include set-css-var-type('font-size', $type, $--font-size); } - --el-font-weight-primary: #{$--font-weight-primary}; - --el-line-height-primary: #{$--font-line-height-primary}; + --el-font-weight-primary: 500; + --el-font-line-height-primary: 24px; --el-font-color-disabled-base: #bbb; // z-index