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
-------------------------- */ -------------------------- */
$--result-padding: 40px 30px !default; // refactor with css3 var
$--result-icon-font-size: 64px !default; // See packages/theme-chalk/src/result.scss
$--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;
/* Break-point /* Break-point
--------------------------*/ --------------------------*/

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

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