avatar theme config

ElemeFE · Jun 24, 2019 · 62880e3 · 62880e3
1 parent d00b4eb
commit 62880e3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 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
@@ -945,9 +945,17 @@ $--calendar-cell-width: 85px !default;
 $--avatar-font-color: #fff !default;
 /// color||Color|0
 $--avatar-background-color: #C0C4CC !default;
-$--avatar-size: 40px !default;
-$--avatar-large-size: $--avatar-size !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
@@ -958,23 +966,23 @@ $--lg: 1200px !default;
 $--xl: 1920px !default;
 
 $--breakpoints: (
-  'xs' : (max-width: $--sm - 1),
-  'sm' : (min-width: $--sm),
-  'md' : (min-width: $--md),
-  'lg' : (min-width: $--lg),
-  'xl' : (min-width: $--xl)
+        'xs' : (max-width: $--sm - 1),
+        'sm' : (min-width: $--sm),
+        'md' : (min-width: $--md),
+        'lg' : (min-width: $--lg),
+        'xl' : (min-width: $--xl)
 );
 
 $--breakpoints-spec: (
-  'xs-only' : (max-width: $--sm - 1),
-  'sm-and-up' : (min-width: $--sm),
-  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
-  'sm-and-down': (max-width: $--md - 1),
-  'md-and-up' : (min-width: $--md),
-  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
-  'md-and-down': (max-width: $--lg - 1),
-  'lg-and-up' : (min-width: $--lg),
-  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
-  'lg-and-down': (max-width: $--xl - 1),
-  'xl-only' : (min-width: $--xl),
+        'xs-only' : (max-width: $--sm - 1),
+        'sm-and-up' : (min-width: $--sm),
+        'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
+        'sm-and-down': (max-width: $--md - 1),
+        'md-and-up' : (min-width: $--md),
+        'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
+        'md-and-down': (max-width: $--lg - 1),
+        'lg-and-up' : (min-width: $--lg),
+        'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
+        'lg-and-down': (max-width: $--xl - 1),
+        'xl-only' : (min-width: $--xl),
 );