Avatar: Update theme config var (#16202)

* change css var * avatar theme config * refine style
ElemeFE · Jun 24, 2019 · c97f376 · c97f376
1 parent 002adf4
commit c97f376
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/examples/components/theme/components-preview.vue b/examples/components/theme/components-preview.vue
@@ -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>

diff --git a/packages/theme-chalk/src/avatar.scss b/packages/theme-chalk/src/avatar.scss
@@ -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) {

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
@@ -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
 --------------------------*/