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) {
margin-right: 20px;
}
.avatar-demo {
display: flex;
align-items: center;
}
}
</style>
<template>
@ -359,10 +364,13 @@
</el-collapse>
</el-row>
<h4>Avatar</h4>
<el-row>
<el-row class="demo-line avatar-demo">
<el-avatar icon="el-icon-user-solid"/>
<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>
</div>
</template>

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

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

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

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