mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 20:27:44 +08:00
refactor(alert): replace all css var (#2545)
This commit is contained in:
云游君
GitHub
parent
6e46c23000
commit
47c40708b8
@ -1,14 +1,32 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-alert-padding: 8px 16px;
|
||||
--el-alert-border-radius-base: var(--el-border-radius-base);
|
||||
--el-alert-title-font-size: 13px;
|
||||
--el-alert-description-font-size: 12px;
|
||||
--el-alert-close-font-size: 12px;
|
||||
--el-alert-close-customed-font-size: 13px;
|
||||
|
||||
--el-alert-icon-size: 16px;
|
||||
--el-alert-icon-large-size: 28px;
|
||||
|
||||
@each $type in (success, info, warning, danger) {
|
||||
--el-alert-#{$type}-color: #{map.get($--colors, $type, 'lighter')};
|
||||
}
|
||||
}
|
||||
|
||||
@include b(alert) {
|
||||
width: 100%;
|
||||
padding: $--alert-padding;
|
||||
padding: var(--el-alert-padding);
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: $--alert-border-radius;
|
||||
border-radius: var(--el-alert-border-radius);
|
||||
position: relative;
|
||||
background-color: $--color-white;
|
||||
background-color: var(--el-color-white);
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
@ -17,16 +35,16 @@
|
||||
|
||||
@include when(light) {
|
||||
.#{$namespace}-alert__closebtn {
|
||||
color: $--color-text-placeholder;
|
||||
color: var(--el-color-text-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dark) {
|
||||
.#{$namespace}-alert__closebtn {
|
||||
color: $--color-white;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-white;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,68 +52,27 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
&.is-light {
|
||||
background-color: $--alert-success-color;
|
||||
color: $--color-success;
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-success;
|
||||
@each $type in (success, info, warning, error) {
|
||||
@include m($type) {
|
||||
// compatiable for danger
|
||||
@if $type == error {
|
||||
$type: danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-success;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
&.is-light {
|
||||
background-color: var(--el-alert-#{$type}-color);
|
||||
color: var(--el-color-#{$type});
|
||||
|
||||
@include m(info) {
|
||||
&.is-light {
|
||||
background-color: $--alert-info-color;
|
||||
color: $--color-info;
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-info;
|
||||
color: $--color-white;
|
||||
}
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-info;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(warning) {
|
||||
&.is-light {
|
||||
background-color: $--alert-warning-color;
|
||||
color: $--color-warning;
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-warning;
|
||||
.#{$namespace}-alert__description {
|
||||
color: var(--el-color-#{$type});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-warning;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(error) {
|
||||
&.is-light {
|
||||
background-color: $--alert-danger-color;
|
||||
color: $--color-danger;
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-danger;
|
||||
&.is-dark {
|
||||
background-color: var(--el-color-#{$type});
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-danger;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
@ -104,16 +81,16 @@
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
font-size: $--alert-icon-size;
|
||||
width: $--alert-icon-size;
|
||||
font-size: var(--el-alert-icon-size);
|
||||
width: var(--el-alert-icon-size);
|
||||
@include when(big) {
|
||||
font-size: $--alert-icon-large-size;
|
||||
width: $--alert-icon-large-size;
|
||||
font-size: var(--el-alert-icon-large-size);
|
||||
width: var(--el-alert-icon-large-size);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
font-size: $--alert-title-font-size;
|
||||
font-size: var(--el-alert-title-font-size);
|
||||
line-height: 18px;
|
||||
@include when(bold) {
|
||||
font-weight: bold;
|
||||
@ -121,12 +98,12 @@
|
||||
}
|
||||
|
||||
& .#{$namespace}-alert__description {
|
||||
font-size: $--alert-description-font-size;
|
||||
font-size: var(--el-alert-description-font-size);
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
@include e(closebtn) {
|
||||
font-size: $--alert-close-font-size;
|
||||
font-size: var(--el-alert-close-font-size);
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
@ -135,7 +112,7 @@
|
||||
|
||||
@include when(customed) {
|
||||
font-style: normal;
|
||||
font-size: $--alert-close-customed-font-size;
|
||||
font-size: var(--el-alert-close-customed-font-size);
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,6 +189,7 @@ $--disabled-border-base: map.get($--border-color, 'light') !default;
|
||||
-------------------------- */
|
||||
|
||||
// Checkbox
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/checkbox.scss
|
||||
|
||||
/* Radio
|
||||
@ -301,27 +302,8 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
|
||||
|
||||
/* Alert
|
||||
-------------------------- */
|
||||
$--alert-padding: 8px 16px !default;
|
||||
/// borderRadius||Border|2
|
||||
$--alert-border-radius: $--border-radius-base !default;
|
||||
/// fontSize||Font|1
|
||||
$--alert-title-font-size: 13px !default;
|
||||
/// fontSize||Font|1
|
||||
$--alert-description-font-size: 12px !default;
|
||||
/// fontSize||Font|1
|
||||
$--alert-close-font-size: 12px !default;
|
||||
/// fontSize||Font|1
|
||||
$--alert-close-customed-font-size: 13px !default;
|
||||
|
||||
$--alert-success-color: map.get($--colors, 'success', 'lighter') !default;
|
||||
$--alert-info-color: map.get($--colors, 'info', 'lighter') !default;
|
||||
$--alert-warning-color: map.get($--colors, 'warning', 'lighter') !default;
|
||||
$--alert-danger-color: map.get($--colors, 'danger', 'lighter') !default;
|
||||
|
||||
/// height||Other|4
|
||||
$--alert-icon-size: 16px !default;
|
||||
/// height||Other|4
|
||||
$--alert-icon-large-size: 28px !default;
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/alert.scss
|
||||
|
||||
/* MessageBox
|
||||
-------------------------- */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user