add demo on theme preview and change var name

ElemeFE · Jun 24, 2019 · 4866b8e · 4866b8e
1 parent 74c4623
commit 4866b8e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/examples/components/theme/components-preview.vue b/examples/components/theme/components-preview.vue
@@ -25,6 +25,10 @@
   .el-carousel__item:nth-child(2n + 1) {
     background-color: #d3dce6;
   }
+
+  .el-avatar:not(:last-child) {
+    margin-right: 20px;
+  }
 }
 </style>
 <template>
@@ -357,6 +361,8 @@
     <h4>Avatar</h4>
     <el-row>
       <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-row>
   </div>
 </template>
@@ -515,6 +521,9 @@ export default {
       defaultTreeProps: {
         children: 'children',
         label: 'label'
+      },
+      avatarData: {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
       }
     };
   }

diff --git a/packages/theme-chalk/src/avatar.scss b/packages/theme-chalk/src/avatar.scss
@@ -6,8 +6,8 @@
   box-sizing: border-box;
   text-align: center;
   overflow: hidden;
-  color: $--avatar-color;
-  background: $--avatar-background;
+  color: $--avatar-font-color;
+  background: $--avatar-background-color;
   width: $--avatar-size;
   height: $--avatar-size;
   line-height: $--avatar-size;

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
@@ -942,13 +942,10 @@ $--calendar-cell-width: 85px !default;
 /* Avatar
 --------------------------*/
 /// color||Color|0
-$--avatar-color: #fff;
+$--avatar-font-color: #fff;
 /// color||Color|0
-$--avatar-background: #C0C4CC;
-/// color||Color|0
-$--avatar-border-color-base: $--border-color-base;
+$--avatar-background-color: #C0C4CC;
 $--avatar-size: 40px;
-/// color|1|Functional Size|1
 $--avatar-large-size: $--avatar-size;
 $--avatar-medium-size: 36px;
 $--avatar-small-size: 28px;