test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(alert): replace all css var (#2545)

Browse Source
This commit is contained in:
云游君 2021-07-16 09:00:30 +08:00 committed by GitHub
parent 6e46c23000
commit 47c40708b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
packages/theme-chalk/src/alert.scss
View File

@ -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) {
@each $type in (success, info, warning, error) {
@include m($type) {
// compatiable for danger
@if $type == error {
$type: danger;
}
&.is-light {
background-color: $--alert-success-color;
color: $--color-success;
background-color: var(--el-alert-#{$type}-color);
color: var(--el-color-#{$type});
.#{$namespace}-alert__description {
color: $--color-success;
color: var(--el-color-#{$type});
}
}
&.is-dark {
background-color: $--color-success;
color: $--color-white;
background-color: var(--el-color-#{$type});
color: var(--el-color-white);
}
}
@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;
}
}
&.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: $--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;
}
}

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

@ -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
-------------------------- */