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

refactor(message-box): migrate css var (#2568)

Browse Source
This commit is contained in:
云游君 2021-07-19 19:38:44 +08:00 committed by GitHub
parent 9744f089f0
commit e430bd3d49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -325,27 +325,8 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
/* MessageBox /* MessageBox
-------------------------- */ -------------------------- */
/// color||Color|0 // refactor with css3 var
$--messagebox-title-color: $--color-text-primary !default; // See packages/theme-chalk/src/message-box.scss
$--messagebox-width: 420px !default;
$--messagebox-border-radius: 4px !default;
/// fontSize||Font|1
$--messagebox-font-size: map.get($--font-size, 'large') !default;
/// fontSize||Font|1
$--messagebox-content-font-size: map.get($--font-size, 'base') !default;
/// color||Color|0
$--messagebox-content-color: $--color-text-regular !default;
/// fontSize||Font|1
$--messagebox-error-font-size: 12px !default;
$--messagebox-padding-primary: 15px !default;
/// color||Color|0
$--messagebox-success-color: $--color-success !default;
/// color||Color|0
$--messagebox-info-color: $--color-info !default;
/// color||Color|0
$--messagebox-warning-color: $--color-warning !default;
/// color||Color|0
$--messagebox-danger-color: $--color-danger !default;
/* Message /* Message
-------------------------- */ -------------------------- */

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

@ -5,16 +5,31 @@
@import 'input'; @import 'input';
@import 'overlay'; @import 'overlay';
:root {
--el-messagebox-title-color: var(--el-color-text-primary);
--el-messagebox-width: 420px;
--el-messagebox-border-radius: 4px;
--el-messagebox-font-size: var(--el-font-size-large);
--el-messagebox-content-font-size: var(--el-font-size-base);
--el-messagebox-content-color: var(--el-color-text-regular);
--el-messagebox-error-font-size: 12px;
--el-messagebox-padding-primary: 15px;
@each $type in (success, info, warning, error) {
--el-messagebox-#{$type}-color: var(--el-color-#{$type});
}
}
@include b(message-box) { @include b(message-box) {
display: inline-block; display: inline-block;
width: $--messagebox-width; width: var(--el-messagebox-width);
padding-bottom: 10px; padding-bottom: 10px;
vertical-align: middle; vertical-align: middle;
background-color: $--color-white; background-color: var(--el-color-white);
border-radius: $--messagebox-border-radius; border-radius: var(--el-messagebox-border-radius);
border: 1px solid var(--el-border-color-lighter); border: 1px solid var(--el-border-color-lighter);
font-size: $--messagebox-font-size; font-size: var(--el-messagebox-font-size);
box-shadow: $--box-shadow-light; box-shadow: var(--el-box-shadow-light);
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
backface-visibility: hidden; backface-visibility: hidden;
@ -32,22 +47,22 @@
@include e(header) { @include e(header) {
position: relative; position: relative;
padding: $--messagebox-padding-primary; padding: var(--el-messagebox-padding-primary);
padding-bottom: 10px; padding-bottom: 10px;
} }
@include e(title) { @include e(title) {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
font-size: $--messagebox-font-size; font-size: var(--el-messagebox-font-size);
line-height: 1; line-height: 1;
color: $--messagebox-title-color; color: var(--el-messagebox-title-color);
} }
@include e(headerbtn) { @include e(headerbtn) {
position: absolute; position: absolute;
top: $--messagebox-padding-primary; top: var(--el-messagebox-padding-primary);
right: $--messagebox-padding-primary; right: var(--el-messagebox-padding-primary);
padding: 0; padding: 0;
border: none; border: none;
outline: none; outline: none;
@ -56,21 +71,21 @@
cursor: pointer; cursor: pointer;
.#{$namespace}-message-box__close { .#{$namespace}-message-box__close {
color: $--color-info; color: var(--el-color-info);
} }
&:focus, &:focus,
&:hover { &:hover {
.#{$namespace}-message-box__close { .#{$namespace}-message-box__close {
color: $--color-primary; color: var(--el-color-primary);
} }
} }
} }
@include e(content) { @include e(content) {
padding: 10px $--messagebox-padding-primary; padding: 10px var(--el-messagebox-padding-primary);
color: $--messagebox-content-color; color: var(--el-messagebox-content-color);
font-size: $--messagebox-content-font-size; font-size: var(--el-messagebox-content-font-size);
} }
@include e(container) { @include e(container) {
@ -81,9 +96,9 @@
padding-top: 15px; padding-top: 15px;
& div.invalid > input { & div.invalid > input {
border-color: $--color-danger; border-color: var(--el-color-error);
&:focus { &:focus {
border-color: $--color-danger; border-color: var(--el-color-error);
} }
} }
} }
@ -104,20 +119,10 @@
padding-right: 12px; padding-right: 12px;
} }
&.#{$namespace}-icon-success { @each $type in (success, info, warning, error) {
color: $--messagebox-success-color; &.#{$namespace}-icon-#{$type} {
} color: var(--el-messagebox-#{$type}-color);
}
&.#{$namespace}-icon-info {
color: $--messagebox-info-color;
}
&.#{$namespace}-icon-warning {
color: $--messagebox-warning-color;
}
&.#{$namespace}-icon-error {
color: $--messagebox-danger-color;
} }
} }
@ -131,8 +136,8 @@
} }
@include e(errormsg) { @include e(errormsg) {
color: $--color-danger; color: var(--el-color-error);
font-size: $--messagebox-error-font-size; font-size: var(--el-messagebox-error-font-size);
min-height: 18px; min-height: 18px;
margin-top: 2px; margin-top: 2px;
} }
@ -182,7 +187,7 @@
} }
@include e(content) { @include e(content) {
$padding-horizontal: $--messagebox-padding-primary + 12px; $padding-horizontal: calc(var(--el-messagebox-padding-primary) + 12px);
padding-left: $padding-horizontal; padding-left: $padding-horizontal;
padding-right: $padding-horizontal; padding-right: $padding-horizontal;