mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-30 11:16:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(message): migrate css var (#2560)

Browse Source
This commit is contained in:
云游君 2021-07-19 14:33:22 +08:00 committed by GitHub
parent 425567ec3b
commit a08a6c5670
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -346,22 +346,8 @@ $--messagebox-danger-color: $--color-danger !default;
/* Message
-------------------------- */
$--message-min-width: 380px !default;
$--message-background-color: #edf2fc !default;
$--message-padding: 15px 15px 15px 20px !default;
/// color||Color|0
$--message-close-icon-color: $--color-text-placeholder !default;
/// color||Color|0
$--message-close-hover-color: $--color-text-secondary !default;
/// color||Color|0
$--message-success-font-color: $--color-success !default;
/// color||Color|0
$--message-info-font-color: $--color-info !default;
/// color||Color|0
$--message-warning-font-color: $--color-warning !default;
/// color||Color|0
$--message-danger-font-color: $--color-danger !default;
// refactor with css3 var
// See packages/theme-chalk/src/message.scss
/* Notification
-------------------------- */

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

@ -3,21 +3,35 @@
@import 'mixins/mixins';
@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-color-text-placeholder);
--el-message-close-hover-color: var(--el-color-text-secondary);
@each $type in (success, info, warning, danger) {
--el-message-#{$type}-font-color: var(--el-color-#{$type});
}
}
@include b(message) {
min-width: $--message-min-width;
min-width: var(--el-message-min-width);
box-sizing: border-box;
border-radius: $--border-radius-base;
border-width: $--border-width-base;
border-style: $--border-style-base;
border-radius: var(--el-border-radius-base);
border-width: var(--el-border-width-base);
border-style: var(--el-border-style-base);
border-color: var(--el-border-color-lighter);
position: fixed;
left: 50%;
top: 20px;
transform: translateX(-50%);
background-color: $--message-background-color;
background-color: var(--el-message-background-color);
transition: opacity 0.3s, transform 0.4s, top 0.4s;
background-color: var(--el-message-background-color);
transition: opacity var(--el-transition-duration), transform 0.4s, top 0.4s;
overflow: hidden;
padding: $--message-padding;
padding: var(--el-message-padding);
display: flex;
align-items: center;
@ -37,34 +51,22 @@
@include m(info) {
.#{$namespace}-message__content {
color: $--message-info-font-color;
color: var(--el-message-info-font-color);
}
}
@include m(success) {
background-color: map.get($--colors, 'success', 'lighter');
border-color: map.get($--colors, 'success', 'light');
@each $type in (success, info, warning, error) {
@include m($type) {
@if $type == error {
$type: danger;
}
.#{$namespace}-message__content {
color: $--message-success-font-color;
}
}
background-color: map.get($--colors, $type, 'lighter');
border-color: map.get($--colors, $type, 'light');
@include m(warning) {
background-color: map.get($--colors, 'warning', 'lighter');
border-color: map.get($--colors, 'warning', 'light');
.#{$namespace}-message__content {
color: $--message-warning-font-color;
}
}
@include m(error) {
background-color: map.get($--colors, 'danger', 'lighter');
border-color: map.get($--colors, 'danger', 'light');
.#{$namespace}-message__content {
color: $--message-danger-font-color;
.#{$namespace}-message__content {
color: var(--el-message-#{$type}-font-color);
}
}
}
@ -87,31 +89,24 @@
right: 15px;
transform: translateY(-50%);
cursor: pointer;
color: $--message-close-icon-color;
color: var(--el-message-close-icon-color);
font-size: var(--el-message-close-size);
&:focus {
outline-width: 0;
}
&:hover {
color: $--message-close-hover-color;
color: var(--el-message-close-hover-color);
}
}
& .#{$namespace}-icon-success {
color: $--message-success-font-color;
}
& .#{$namespace}-icon-error {
color: $--message-danger-font-color;
}
& .#{$namespace}-icon-info {
color: $--message-info-font-color;
}
& .#{$namespace}-icon-warning {
color: $--message-warning-font-color;
@each $type in (success, info, warning, error) {
& .#{$namespace}-icon-#{$type} {
@if $type == error {
$type: danger;
}
color: var(--el-message-#{$type}-font-color);
}
}
}