test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(notification): migrate css var (#2552)

Browse Source
This commit is contained in:
云游君 2021-07-16 14:24:25 +08:00 committed by GitHub
parent 0949006f74
commit deac9dd213
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 58 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/theme-chalk/src/common/var.scss
View File

@ -336,8 +336,6 @@ $--message-background-color: #edf2fc !default;
$--message-padding: 15px 15px 15px 20px !default; $--message-padding: 15px 15px 15px 20px !default;
/// color||Color|0 /// color||Color|0
$--message-close-icon-color: $--color-text-placeholder !default; $--message-close-icon-color: $--color-text-placeholder !default;
/// height||Other|4
$--message-close-size: 16px !default;
/// color||Color|0 /// color||Color|0
$--message-close-hover-color: $--color-text-secondary !default; $--message-close-hover-color: $--color-text-secondary !default;
@ -352,39 +350,8 @@ $--message-danger-font-color: $--color-danger !default;
/* Notification /* Notification
-------------------------- */ -------------------------- */
$--notification-width: 330px !default; // refactor with css3 var
/// padding||Spacing|3 // See packages/theme-chalk/src/notification.scss
$--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;
/* Input /* Input
-------------------------- */ -------------------------- */

2
packages/theme-chalk/src/dialog.scss
View File

@ -45,7 +45,7 @@
border: none; border: none;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
font-size: $--message-close-size; font-size: var(--el-message-close-size);
.#{$namespace}-dialog__close { .#{$namespace}-dialog__close {
color: $--color-info; color: $--color-info;

2
packages/theme-chalk/src/message-box.scss
View File

@ -52,7 +52,7 @@
border: none; border: none;
outline: none; outline: none;
background: transparent; background: transparent;
font-size: $--message-close-size; font-size: var(--el-message-close-size);
cursor: pointer; cursor: pointer;
.#{$namespace}-message-box__close { .#{$namespace}-message-box__close {

2
packages/theme-chalk/src/message.scss
View File

@ -88,7 +88,7 @@
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer; cursor: pointer;
color: $--message-close-icon-color; color: $--message-close-icon-color;
font-size: $--message-close-size; font-size: var(--el-message-close-size);
&:focus { &:focus {
outline-width: 0; outline-width: 0;

82
packages/theme-chalk/src/notification.scss
View File

@ -1,16 +1,39 @@
@import 'mixins/mixins'; @import 'mixins/mixins';
@import 'common/var'; @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) { @include b(notification) {
display: flex; display: flex;
width: $--notification-width; width: var(--el-notification-width);
padding: $--notification-padding; padding: var(--el-notification-padding);
border-radius: $--notification-radius; border-radius: var(--el-notification-radius);
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $--notification-border-color; border: 1px solid var(--el-notification-border-color);
position: fixed; position: fixed;
background-color: $--color-white; background-color: var(--el-color-white);
box-shadow: $--notification-shadow; box-shadow: var(--el-notification-shadow);
transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
bottom 0.3s; bottom 0.3s;
overflow-wrap: anywhere; overflow-wrap: anywhere;
@ -26,23 +49,23 @@
} }
@include e(group) { @include e(group) {
margin-left: $--notification-group-margin-left; margin-left: var(--el-notification-group-margin-left);
margin-right: $--notification-group-margin-right; margin-right: var(--el-notification-group-margin-right);
} }
@include e(title) { @include e(title) {
font-weight: bold; font-weight: bold;
font-size: $--notification-title-font-size; font-size: var(--el-notification-title-font-size);
line-height: $--notification-icon-size; line-height: var(--el-notification-icon-size);
color: $--notification-title-color; color: var(--el-notification-title-color);
margin: 0; margin: 0;
} }
@include e(content) { @include e(content) {
font-size: $--notification-content-font-size; font-size: var(--el-notification-content-font-size);
line-height: 24px; line-height: 24px;
margin: 6px 0 0 0; margin: 6px 0 0 0;
color: $--notification-content-color; color: var(--el-notification-content-color);
text-align: justify; text-align: justify;
p { p {
@ -51,9 +74,9 @@
} }
@include e(icon) { @include e(icon) {
height: $--notification-icon-size; height: var(--el-notification-icon-size);
width: $--notification-icon-size; width: var(--el-notification-icon-size);
font-size: $--notification-icon-size; font-size: var(--el-notification-icon-size);
} }
@include e(closeBtn) { @include e(closeBtn) {
@ -61,28 +84,21 @@
top: 18px; top: 18px;
right: 15px; right: 15px;
cursor: pointer; cursor: pointer;
color: $--notification-close-color; color: var(--el-notification-close-color);
font-size: $--notification-close-font-size; font-size: var(--el-notification-close-font-size);
&:hover { &:hover {
color: $--notification-close-hover-color; color: var(--el-notification-close-hover-color);
} }
} }
.#{$namespace}-icon-success { @each $type in (success, info, warning, error) {
color: $--notification-success-icon-color; .#{$namespace}-icon-#{$type} {
} @if $type == error {
$type: danger;
.#{$namespace}-icon-error { }
color: $--notification-danger-icon-color; color: var(--el-notification-#{$type}-icon-color);
} }
.#{$namespace}-icon-info {
color: $--notification-info-icon-color;
}
.#{$namespace}-icon-warning {
color: $--notification-warning-icon-color;
} }
} }

4
packages/theme-chalk/src/var.scss
View File

@ -71,4 +71,8 @@
--el-disabled-fill-base: var(--el-background-color-base); --el-disabled-fill-base: var(--el-background-color-base);
--el-disabled-color-base: var(--el-color-text-placeholder); --el-disabled-color-base: var(--el-color-text-placeholder);
--el-disabled-border-base: var(--el-border-color-light); --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;
} }