From deac9dd213f763ff6a89c69081eebb434335b281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Fri, 16 Jul 2021 14:24:25 +0800 Subject: [PATCH] refactor(notification): migrate css var (#2552) --- packages/theme-chalk/src/common/var.scss | 37 +--------- packages/theme-chalk/src/dialog.scss | 2 +- packages/theme-chalk/src/message-box.scss | 2 +- packages/theme-chalk/src/message.scss | 2 +- packages/theme-chalk/src/notification.scss | 82 +++++++++++++--------- packages/theme-chalk/src/var.scss | 4 ++ 6 files changed, 58 insertions(+), 71 deletions(-) diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 9a20337187..50ca7e486e 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -336,8 +336,6 @@ $--message-background-color: #edf2fc !default; $--message-padding: 15px 15px 15px 20px !default; /// color||Color|0 $--message-close-icon-color: $--color-text-placeholder !default; -/// height||Other|4 -$--message-close-size: 16px !default; /// color||Color|0 $--message-close-hover-color: $--color-text-secondary !default; @@ -352,39 +350,8 @@ $--message-danger-font-color: $--color-danger !default; /* Notification -------------------------- */ -$--notification-width: 330px !default; -/// padding||Spacing|3 -$--notification-padding: 14px 26px 14px 13px !default; -$--notification-radius: 8px !default; -$--notification-shadow: $--box-shadow-light !default; -/// color||Color|0 -$--notification-border-color: map.get($--border-color, 'lighter') !default; -$--notification-icon-size: 24px !default; -$--notification-close-font-size: $--message-close-size !default; -$--notification-group-margin-left: 13px !default; -$--notification-group-margin-right: 8px !default; -/// fontSize||Font|1 -$--notification-content-font-size: map.get($--font-size, 'base') !default; -/// color||Color|0 -$--notification-content-color: $--color-text-regular !default; -/// fontSize||Font|1 -$--notification-title-font-size: 16px !default; -/// color||Color|0 -$--notification-title-color: $--color-text-primary !default; - -/// color||Color|0 -$--notification-close-color: $--color-text-secondary !default; -/// color||Color|0 -$--notification-close-hover-color: $--color-text-regular !default; - -/// color||Color|0 -$--notification-success-icon-color: $--color-success !default; -/// color||Color|0 -$--notification-info-icon-color: $--color-info !default; -/// color||Color|0 -$--notification-warning-icon-color: $--color-warning !default; -/// color||Color|0 -$--notification-danger-icon-color: $--color-danger !default; +// refactor with css3 var +// See packages/theme-chalk/src/notification.scss /* Input -------------------------- */ diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss index 3f9a12d5f9..843dad1adb 100644 --- a/packages/theme-chalk/src/dialog.scss +++ b/packages/theme-chalk/src/dialog.scss @@ -45,7 +45,7 @@ border: none; outline: none; cursor: pointer; - font-size: $--message-close-size; + font-size: var(--el-message-close-size); .#{$namespace}-dialog__close { color: $--color-info; diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss index 7dcb92a0ac..a4e300320c 100644 --- a/packages/theme-chalk/src/message-box.scss +++ b/packages/theme-chalk/src/message-box.scss @@ -52,7 +52,7 @@ border: none; outline: none; background: transparent; - font-size: $--message-close-size; + font-size: var(--el-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 1a97579bba..e49de19dbf 100644 --- a/packages/theme-chalk/src/message.scss +++ b/packages/theme-chalk/src/message.scss @@ -88,7 +88,7 @@ transform: translateY(-50%); cursor: pointer; color: $--message-close-icon-color; - font-size: $--message-close-size; + font-size: var(--el-message-close-size); &:focus { outline-width: 0; diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss index 32ff7a4987..1ebdddf49c 100644 --- a/packages/theme-chalk/src/notification.scss +++ b/packages/theme-chalk/src/notification.scss @@ -1,16 +1,39 @@ @import 'mixins/mixins'; @import 'common/var'; +:root { + --el-notification-width: 330px; + --el-notification-padding: 14px 26px 14px 13px; + --el-notification-radius: 8px; + --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-group-margin-left: 13px; + --el-notification-group-margin-right: 8px; + --el-notification-content-font-size: var(--el-font-size-base); + --el-notification-content-color: var(--el-color-text-regular); + --el-notification-title-font-size: 16px; + --el-notification-title-color: var(--el-color-text-primary); + --el-notification-close-color: var(--el-color-text-secondary); + --el-notification-close-hover-color: var(--el-color-text-regular); + + @each $type in (success, info, warning, danger) { + --el-notification-#{$type}-icon-color: var(--el-color-#{$type}); + } +} + @include b(notification) { display: flex; - width: $--notification-width; - padding: $--notification-padding; - border-radius: $--notification-radius; + width: var(--el-notification-width); + padding: var(--el-notification-padding); + border-radius: var(--el-notification-radius); box-sizing: border-box; - border: 1px solid $--notification-border-color; + border: 1px solid var(--el-notification-border-color); position: fixed; - background-color: $--color-white; - box-shadow: $--notification-shadow; + background-color: var(--el-color-white); + box-shadow: var(--el-notification-shadow); transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; overflow-wrap: anywhere; @@ -26,23 +49,23 @@ } @include e(group) { - margin-left: $--notification-group-margin-left; - margin-right: $--notification-group-margin-right; + margin-left: var(--el-notification-group-margin-left); + margin-right: var(--el-notification-group-margin-right); } @include e(title) { font-weight: bold; - font-size: $--notification-title-font-size; - line-height: $--notification-icon-size; - color: $--notification-title-color; + font-size: var(--el-notification-title-font-size); + line-height: var(--el-notification-icon-size); + color: var(--el-notification-title-color); margin: 0; } @include e(content) { - font-size: $--notification-content-font-size; + font-size: var(--el-notification-content-font-size); line-height: 24px; margin: 6px 0 0 0; - color: $--notification-content-color; + color: var(--el-notification-content-color); text-align: justify; p { @@ -51,9 +74,9 @@ } @include e(icon) { - height: $--notification-icon-size; - width: $--notification-icon-size; - font-size: $--notification-icon-size; + height: var(--el-notification-icon-size); + width: var(--el-notification-icon-size); + font-size: var(--el-notification-icon-size); } @include e(closeBtn) { @@ -61,28 +84,21 @@ top: 18px; right: 15px; cursor: pointer; - color: $--notification-close-color; - font-size: $--notification-close-font-size; + color: var(--el-notification-close-color); + font-size: var(--el-notification-close-font-size); &:hover { - color: $--notification-close-hover-color; + color: var(--el-notification-close-hover-color); } } - .#{$namespace}-icon-success { - color: $--notification-success-icon-color; - } - - .#{$namespace}-icon-error { - color: $--notification-danger-icon-color; - } - - .#{$namespace}-icon-info { - color: $--notification-info-icon-color; - } - - .#{$namespace}-icon-warning { - color: $--notification-warning-icon-color; + @each $type in (success, info, warning, error) { + .#{$namespace}-icon-#{$type} { + @if $type == error { + $type: danger; + } + color: var(--el-notification-#{$type}-icon-color); + } } } diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss index 39c73d51cf..d2731520ff 100644 --- a/packages/theme-chalk/src/var.scss +++ b/packages/theme-chalk/src/var.scss @@ -71,4 +71,8 @@ --el-disabled-fill-base: var(--el-background-color-base); --el-disabled-color-base: var(--el-color-text-placeholder); --el-disabled-border-base: var(--el-border-color-light); + + // some var for component, but because they are used in many places, need to be global + // message + --el-message-close-size: 16px; }