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

refactor(result): migrate css var (#2637)

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

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

@ -721,16 +721,8 @@ $--descriptions-item-bordered-label-background: #fafafa !default;
/* Result
-------------------------- */
$--result-padding: 40px 30px !default;
$--result-icon-font-size: 64px !default;
$--result-title-font-size: 20px !default;
$--result-title-margin-top: 20px !default;
$--result-subtitle-margin-top: 10px !default;
$--result-extra-margin-top: 30px !default;
$--result-info-color: $--color-info !default;
$--result-success-color: $--color-success !default;
$--result-warning-color: $--color-warning !default;
$--result-danger-color: $--color-danger !default;
// refactor with css3 var
// See packages/theme-chalk/src/result.scss
/* Break-point
--------------------------*/

51
packages/theme-chalk/src/result.scss
View File

@ -1,6 +1,21 @@
@import 'mixins/mixins';
@import 'common/var';
$types: success, warning, danger, info, error;
:root {
--el-result-padding: 40px 30px;
--el-result-icon-font-size: 64px;
--el-result-title-font-size: 20px;
--el-result-title-margin-top: 20px;
--el-result-subtitle-margin-top: 10px;
--el-result-extra-margin-top: 30px;
@each $type in $types {
--el-result-#{$type}-color: var(--el-color-#{$type});
}
}
@include b(result) {
display: flex;
justify-content: center;
@ -8,54 +23,44 @@
flex-direction: column;
text-align: center;
box-sizing: border-box;
padding: $--result-padding;
padding: var(--el-result-padding);
@include e(icon) {
svg {
width: $--result-icon-font-size;
height: $--result-icon-font-size;
width: var(--el-result-icon-font-size);
height: var(--el-result-icon-font-size);
}
}
@include e(title) {
margin-top: $--result-title-margin-top;
margin-top: var(--el-result-title-margin-top);
p {
margin: 0;
font-size: $--result-title-font-size;
color: $--color-text-primary;
font-size: var(--el-result-title-font-size);
color: var(--el-color-text-primary);
line-height: 1.3;
}
}
@include e(subtitle) {
margin-top: $--result-subtitle-margin-top;
margin-top: var(--el-result-subtitle-margin-top);
p {
margin: 0;
font-size: var(--el-font-size-base);
color: $--color-text-regular;
color: var(--el-color-text-regular);
line-height: 1.3;
}
}
@include e(extra) {
margin-top: $--result-extra-margin-top;
margin-top: var(--el-result-extra-margin-top);
}
.icon-success {
fill: $--result-success-color;
}
.icon-error {
fill: $--result-danger-color;
}
.icon-info {
fill: $--result-info-color;
}
.icon-warning {
fill: $--result-warning-color;
@each $type in $types {
.icon-#{$type} {
fill: var(--el-result-#{$type}-color);
}
}
}