github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Avatar: Update theme config var (#16202) 

* change css var

* avatar theme config

* refine style
pull/16214/head
luckyCao 2019-06-24 18:36:12 +08:00 committed by Zhi Cun
parent 002adf462f
commit c97f376cf6
3 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/components/theme/components-preview.vue
View File

@ -29,6 +29,11 @@
.el-avatar:not(:last-child) { .el-avatar:not(:last-child) {
margin-right: 20px; margin-right: 20px;
} }
.avatar-demo {
display: flex;
align-items: center;
}
} }
</style> </style>
<template> <template>
@ -359,10 +364,13 @@
</el-collapse> </el-collapse>
</el-row> </el-row>
<h4>Avatar</h4> <h4>Avatar</h4>
<el-row> <el-row class="demo-line avatar-demo">
<el-avatar icon="el-icon-user-solid"/> <el-avatar icon="el-icon-user-solid"/>
<el-avatar> avatar </el-avatar> <el-avatar> avatar </el-avatar>
<el-avatar shape="square" :size="60" fit="contain" :src="avatarData.url"></el-avatar> <el-avatar shape="square" fit="contain" :src="avatarData.url"></el-avatar>
<el-avatar size="large"> large </el-avatar>
<el-avatar size="medium"> medium </el-avatar>
<el-avatar size="small"> small </el-avatar>
</el-row> </el-row>
</div> </div>
</template> </template>

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

@ -8,9 +8,10 @@
overflow: hidden; overflow: hidden;
color: $--avatar-font-color; color: $--avatar-font-color;
background: $--avatar-background-color; background: $--avatar-background-color;
width: $--avatar-size; width: $--avatar-large-size;
height: $--avatar-size; height: $--avatar-large-size;
line-height: $--avatar-size; line-height: $--avatar-large-size;
font-size: $--avatar-text-font-size;
>img { >img {
width: 100%; width: 100%;
@ -22,11 +23,11 @@
} }
@include m(square) { @include m(square) {
border-radius: 4px; border-radius: $--avatar-border-radius;
} }
@include m(icon) { @include m(icon) {
font-size: 18px; font-size: $--avatar-icon-font-size;
} }
@include m(large) { @include m(large) {

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

@ -942,13 +942,21 @@ $--calendar-cell-width: 85px !default;
/* Avatar /* Avatar
--------------------------*/ --------------------------*/
/// color||Color|0 /// color||Color|0
$--avatar-font-color: #fff; $--avatar-font-color: #fff !default;
/// color||Color|0 /// color||Color|0
$--avatar-background-color: #C0C4CC; $--avatar-background-color: #C0C4CC !default;
$--avatar-size: 40px; /// fontSize||Font Size|1
$--avatar-large-size: $--avatar-size; $--avatar-text-font-size: 14px !default;
$--avatar-medium-size: 36px; /// fontSize||Font Size|1
$--avatar-small-size: 28px; $--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;
/* Break-point /* Break-point
--------------------------*/ --------------------------*/