mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-21 02:50:11 +08:00
refactor(message-box): migrate css var (#2568)
This commit is contained in:
云游君
GitHub
parent
9744f089f0
commit
e430bd3d49
@ -325,27 +325,8 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
|
||||
|
||||
/* MessageBox
|
||||
-------------------------- */
|
||||
/// color||Color|0
|
||||
$--messagebox-title-color: $--color-text-primary !default;
|
||||
$--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;
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/message-box.scss
|
||||
|
||||
/* Message
|
||||
-------------------------- */
|
||||
|
||||
@ -5,16 +5,31 @@
|
||||
@import 'input';
|
||||
@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) {
|
||||
display: inline-block;
|
||||
width: $--messagebox-width;
|
||||
width: var(--el-messagebox-width);
|
||||
padding-bottom: 10px;
|
||||
vertical-align: middle;
|
||||
background-color: $--color-white;
|
||||
border-radius: $--messagebox-border-radius;
|
||||
background-color: var(--el-color-white);
|
||||
border-radius: var(--el-messagebox-border-radius);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
font-size: $--messagebox-font-size;
|
||||
box-shadow: $--box-shadow-light;
|
||||
font-size: var(--el-messagebox-font-size);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
@ -32,22 +47,22 @@
|
||||
|
||||
@include e(header) {
|
||||
position: relative;
|
||||
padding: $--messagebox-padding-primary;
|
||||
padding: var(--el-messagebox-padding-primary);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: $--messagebox-font-size;
|
||||
font-size: var(--el-messagebox-font-size);
|
||||
line-height: 1;
|
||||
color: $--messagebox-title-color;
|
||||
color: var(--el-messagebox-title-color);
|
||||
}
|
||||
|
||||
@include e(headerbtn) {
|
||||
position: absolute;
|
||||
top: $--messagebox-padding-primary;
|
||||
right: $--messagebox-padding-primary;
|
||||
top: var(--el-messagebox-padding-primary);
|
||||
right: var(--el-messagebox-padding-primary);
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -56,21 +71,21 @@
|
||||
cursor: pointer;
|
||||
|
||||
.#{$namespace}-message-box__close {
|
||||
color: $--color-info;
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
.#{$namespace}-message-box__close {
|
||||
color: $--color-primary;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
padding: 10px $--messagebox-padding-primary;
|
||||
color: $--messagebox-content-color;
|
||||
font-size: $--messagebox-content-font-size;
|
||||
padding: 10px var(--el-messagebox-padding-primary);
|
||||
color: var(--el-messagebox-content-color);
|
||||
font-size: var(--el-messagebox-content-font-size);
|
||||
}
|
||||
|
||||
@include e(container) {
|
||||
@ -81,9 +96,9 @@
|
||||
padding-top: 15px;
|
||||
|
||||
& div.invalid > input {
|
||||
border-color: $--color-danger;
|
||||
border-color: var(--el-color-error);
|
||||
&:focus {
|
||||
border-color: $--color-danger;
|
||||
border-color: var(--el-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -104,20 +119,10 @@
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.#{$namespace}-icon-success {
|
||||
color: $--messagebox-success-color;
|
||||
}
|
||||
|
||||
&.#{$namespace}-icon-info {
|
||||
color: $--messagebox-info-color;
|
||||
}
|
||||
|
||||
&.#{$namespace}-icon-warning {
|
||||
color: $--messagebox-warning-color;
|
||||
}
|
||||
|
||||
&.#{$namespace}-icon-error {
|
||||
color: $--messagebox-danger-color;
|
||||
@each $type in (success, info, warning, error) {
|
||||
&.#{$namespace}-icon-#{$type} {
|
||||
color: var(--el-messagebox-#{$type}-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,8 +136,8 @@
|
||||
}
|
||||
|
||||
@include e(errormsg) {
|
||||
color: $--color-danger;
|
||||
font-size: $--messagebox-error-font-size;
|
||||
color: var(--el-color-error);
|
||||
font-size: var(--el-messagebox-error-font-size);
|
||||
min-height: 18px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@ -182,7 +187,7 @@
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
$padding-horizontal: $--messagebox-padding-primary + 12px;
|
||||
$padding-horizontal: calc(var(--el-messagebox-padding-primary) + 12px);
|
||||
|
||||
padding-left: $padding-horizontal;
|
||||
padding-right: $padding-horizontal;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user