javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(avatar): migrate css var (#2601)

Browse Source
This commit is contained in:
云游君
2021-07-21 22:51:41 +08:00
committed by GitHub
parent 6a7b9a4d8b
commit 912cb45e11
3 changed files with 36 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/theme-chalk/src/avatar.scss
View File

@@ -1,17 +1,28 @@
@import 'mixins/mixins';
@import 'common/var';
:root {
--el-avatar-font-color: #fff;
--el-avatar-background-color: #c0c4cc;
--el-avatar-text-font-size: 14px;
--el-avatar-icon-font-size: 18px;
--el-avatar-border-radius: var(--el-border-radius-base);
--el-avatar-large-size: 40px;
--el-avatar-medium-size: 36px;
--el-avatar-small-size: 28px;
}
@include b(avatar) {
display: inline-block;
box-sizing: border-box;
text-align: center;
overflow: hidden;
color: $--avatar-font-color;
background: $--avatar-background-color;
width: $--avatar-large-size;
height: $--avatar-large-size;
line-height: $--avatar-large-size;
font-size: $--avatar-text-font-size;
color: var(--el-avatar-font-color);
background: var(--el-avatar-background-color);
width: var(--el-avatar-large-size);
height: var(--el-avatar-large-size);
line-height: var(--el-avatar-large-size);
font-size: var(--el-avatar-text-font-size);
> img {
display: block;
@@ -24,28 +35,18 @@
}
@include m(square) {
border-radius: $--avatar-border-radius;
border-radius: var(--el-avatar-border-radius);
}
@include m(icon) {
font-size: $--avatar-icon-font-size;
font-size: var(--el-avatar-icon-font-size);
}
@include m(large) {
width: $--avatar-large-size;
height: $--avatar-large-size;
line-height: $--avatar-large-size;
}
@include m(medium) {
width: $--avatar-medium-size;
height: $--avatar-medium-size;
line-height: $--avatar-medium-size;
}
@include m(small) {
width: $--avatar-small-size;
height: $--avatar-small-size;
line-height: $--avatar-small-size;
@each $size in (small, medium, large) {
@include m($size) {
width: var(--el-avatar-#{$size}-size);
height: var(--el-avatar-#{$size}-size);
line: var(--el-avatar-#{$size}-size);
}
}
}

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

@@ -720,22 +720,8 @@ $--form-label-font-size: map.get($--font-size, 'base') !default;
/* Avatar
--------------------------*/
/// color||Color|0
$--avatar-font-color: #fff !default;
/// color||Color|0
$--avatar-background-color: #c0c4cc !default;
/// fontSize||Font Size|1
$--avatar-text-font-size: 14px !default;
/// fontSize||Font Size|1
$--avatar-icon-font-size: 18px !default;
/// borderRadius||Border|2
$--avatar-border-radius: $--border-radius-base !default;
/// size|1|Avatar Size|3
$--avatar-large-size: 40px !default;
/// size|1|Avatar Size|3
$--avatar-medium-size: 36px !default;
/// size|1|Avatar Size|3
$--avatar-small-size: 28px !default;
// refactor with css3 var
// See packages/theme-chalk/src/avatar.scss
/* Empty
-------------------------- */

12
packages/theme-chalk/src/skeleton-item.scss
View File

@@ -1,6 +1,12 @@
@import 'mixins/mixins';
@import 'common/var';
:root {
@each $size in (small, medium, large) {
--el-skeleton-avatar-#{$size}-size: var(--el-avatar-#{$size}-size);
}
}
@mixin circle-size($size) {
width: $size;
height: $size;
@@ -18,14 +24,14 @@
@include e(circle) {
border-radius: 50%;
@include circle-size($--avatar-medium-size);
@include circle-size(var(--el-skeleton-avatar-medium-size));
@include m(lg) {
@include circle-size($--avatar-large-size);
@include circle-size(var(--el-skeleton-avatar-large-size));
}
@include m(md) {
@include circle-size($--avatar-small-size);
@include circle-size(var(--el-skeleton-avatar-small-size));
}
}