mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues 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;
/// 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
-------------------------- */

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

@ -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;

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

@ -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 {

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

@ -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;

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

@ -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);
}
}
}

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

@ -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;
}