Breadcrumb: add chalk theme (#7203)

* Breadcrumb: add chalk theme

* Breadcrumb: fix bugs

* fix pagination sizes' arrow

examples/docs/en-US/breadcrumb.md

@@ -17,10 +17,25 @@ Displays the location of the current page, making it easier to browser back.
 ```
 :::
 
+### Icon separator
+
+:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
 ### Breadcrumb Attributes
 | Attribute      | Description          | Type      | Accepted Values            | Default|
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | separator character | string | — | / |
+| separator-class | iconfont-separator's class | string | — | - |
 
 ### Breadcrumb Item Attributes
 | Attribute      | Description          | Type      | Accepted Values            | Default|

examples/docs/en-US/button.md

@@ -166,7 +166,7 @@ Besides default size, Button component provides three additional sizes for you t
 ### Attributes
 | Attribute      | Description    | Type      | Accepted values       | Default   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | button size   | string  |   large / small / mini            |    —     |
+| size     | button size   | string  |   medium / small / mini            |    —     |
 | type     | button type   | string    |   primary / success / warning / danger / info / text |     —    |
 | plain     | determine whether it's a plain button   | boolean    | — | false   |
 | round     | determine whether it's a round button   | boolean    | — | false   |

examples/docs/en-US/tag.md

@@ -45,18 +45,14 @@
     }
     .button-new-tag {
       margin-left: 10px;
-      height: 30px;
-      line-height: 28px;
+      height: 32px;
+      line-height: 30px;
       padding: 0 *;
     }
     .input-new-tag {
       width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
-
-      .el-input__inner {
-        height: 30px;
-      }
     }
   }
 </style>
@@ -80,7 +76,7 @@ Used for marking and selection.
 
 ### Removable Tag
 
-:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
+:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
 
 ```html
 <el-tag
@@ -119,7 +115,7 @@ You can use the `close` event to add and remove tag dynamically.
   :key="tag"
   v-for="tag in dynamicTags"
   closable
-  :close-transition="false"
+  :disable-transitions="false"
   @close="handleClose(tag)">
   {{tag}}
 </el-tag>
@@ -141,8 +137,8 @@ You can use the `close` event to add and remove tag dynamically.
   }
   .button-new-tag {
     margin-left: 10px;
-    height: 30px;
-    line-height: 28px;
+    height: 32px;
+    line-height: 30px;
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -151,9 +147,6 @@ You can use the `close` event to add and remove tag dynamically.
     margin-left: 10px;
     vertical-align: bottom;
   }
-  .el-input__inner {
-    height: 30px;
-  }
 </style>
 
 <script>
@@ -191,14 +184,29 @@ You can use the `close` event to add and remove tag dynamically.
 ```
 :::
 
+### Sizes
+
+Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+
+```html
+<el-tag>Default</el-tag>
+<el-tag size="medium">Medium</el-tag>
+<el-tag size="small">Small</el-tag>
+<el-tag size="mini">Mini</el-tag>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | theme | string | success/info/warning/danger | — |
 | closable | whether Tag can be removed | boolean | — | false |
-| close-transition | whether to disable animations | boolean | — | false |
+| disable-transitions | whether to disable animations | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
 | color | background color of the Tag | string | — | — |
+| size | tag size | string | medium / small / mini | — |
 
 
 ### Events

examples/docs/zh-CN/breadcrumb.md

@@ -17,10 +17,25 @@
 ```
 :::
 
+### 图标分隔符
+
+:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
 ### Breadcrumb Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | 分隔符 | string | — | 斜杠'/' |
+| separator-class | 图标分隔符 class | string | — | - |
 
 ### Breadcrumb Item Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/zh-CN/tag.md

@@ -45,18 +45,14 @@
     }
     .button-new-tag {
       margin-left: 10px;
-      height: 30px;
-      line-height: 28px;
+      height: 32px;
+      line-height: 30px;
       padding: 0 *;
     }
     .input-new-tag {
       width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
-
-      .el-input__inner {
-        height: 30px;
-      }
     }
   }
 </style>
@@ -80,7 +76,7 @@
 
 ### 可移除标签
 
-:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。
+:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。
 
 ```html
 <el-tag
@@ -119,16 +115,16 @@
   :key="tag"
   v-for="tag in dynamicTags"
   closable
-  :close-transition="false"
+  :disable-transitions="false"
   @close="handleClose(tag)">
- {{tag}}
+  {{tag}}
 </el-tag>
 <el-input
   class="input-new-tag"
   v-if="inputVisible"
   v-model="inputValue"
   ref="saveTagInput"
-  size="mini"
+  size="small"
   @keyup.enter.native="handleInputConfirm"
   @blur="handleInputConfirm"
 >
@@ -141,8 +137,8 @@
   }
   .button-new-tag {
     margin-left: 10px;
-    height: 30px;
-    line-height: 28px;
+    height: 32px;
+    line-height: 30px;
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -151,9 +147,6 @@
     margin-left: 10px;
     vertical-align: bottom;
   }
-  .el-input__inner {
-    height: 30px;
-  }
 </style>
 
 <script>
@@ -191,14 +184,29 @@
 ```
 :::
 
+### 不同尺寸
+
+Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-tag closable>默认标签</el-tag>
+<el-tag size="medium" closable>中等标签</el-tag>
+<el-tag size="small" closable>小型标签</el-tag>
+<el-tag size="mini" closable>超小标签</el-tag>
+```
+:::
+
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | 主题 | string | success/info/warning/danger | — |
 | closable | 是否可关闭 | boolean | — | false |
-| close-transition | 是否禁用渐变动画 | boolean | — | false |
+| disable-transitions | 是否禁用渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
 | color | 背景色 | string | — | — |
+| size | 尺寸 | string | medium / small / mini | — |
 
 
 ### Events

packages/breadcrumb/src/breadcrumb-item.vue

@@ -1,6 +1,10 @@
 <template>
   <span class="el-breadcrumb__item">
-    <span class="el-breadcrumb__inner" ref="link" role="link"><slot></slot></span><span class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
+    <span class="el-breadcrumb__inner" ref="link" role="link">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
   </span>
 </template>
 <script>
@@ -12,12 +16,14 @@
     },
     data() {
       return {
-        separator: ''
+        separator: '',
+        separatorClass: ''
       };
     },
     mounted() {
       this.separator = this.$parent.separator;
-      var self = this;
+      this.separatorClass = this.$parent.separatorClass;
+      let self = this;
       if (this.to) {
         let link = this.$refs.link;
         link.setAttribute('role', 'link');

packages/breadcrumb/src/breadcrumb.vue

@@ -11,6 +11,10 @@
       separator: {
         type: String,
         default: '/'
+      },
+      separatorClass: {
+        type: String,
+        default: ''
       }
     },
     mounted() {

packages/pagination/src/pagination.js

@@ -162,13 +162,13 @@ export default {
           <span class="el-pagination__sizes">
             <el-select
               value={ this.$parent.internalPageSize }
-              popperClass={ this.$parent.popperClass }
+              popperClass={ `${this.$parent.popperClass || ''} is-arrow-fixed` }
               on-input={ this.handleChange }>
               {
                 this.pageSizes.map(item =>
                   <el-option
                     value={ item }
-                    label={ item + ' ' + this.t('el.pagination.pagesize') }>
+                    label={ item + this.t('el.pagination.pagesize') }>
                   </el-option>
                 )
               }

packages/select/src/select.vue

@@ -14,6 +14,7 @@
           v-for="item in selected"
           :key="getValueKey(item)"
           :closable="!disabled"
+          size="small"
           :hit="item.hitState"
           type="info"
           @close="deleteTag($event, item)"

packages/tag/src/tag.vue

@@ -1,8 +1,12 @@
 <template>
-  <transition :name="closeTransition ? '' : 'el-zoom-in-center'">
+  <transition :name="disableTransitions ? '' : 'el-zoom-in-center'">
     <span
       class="el-tag"
-      :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]"
+      :class="[
+        type ? 'el-tag--' + type : '',
+        size && `el-tag--${size}`,
+        {'is-hit': hit}
+      ]"
       :style="{backgroundColor: color}">
       <slot></slot>
       <i class="el-tag__close el-icon-close"
@@ -19,8 +23,9 @@
       closable: Boolean,
       type: String,
       hit: Boolean,
-      closeTransition: Boolean,
-      color: String
+      disableTransitions: Boolean,
+      color: String,
+      size: String
     },
     methods: {
       handleClose(event) {

packages/theme-chalk/src/breadcrumb.scss

@@ -3,21 +3,30 @@
 @import "common/var";
 
 @include b(breadcrumb) {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1;
   @include utils-clearfix;
 
   @include e(separator) {
-    margin: 0 8px;
-    color: $--color-black;
+    margin: 0 9px;
+    font-weight: bold;
+    color: $--color-text-placeholder;
+
+    &[class*=el-icon] {
+      margin: 0 6px;
+      font-weight: normal;
+      transform: scale(.8);
+    }
   }
+
   @include e(item) {
     float: left;
 
     @include e(inner) {
       &, & a {
-        transition: color .15s linear;
-        color: $--color-black;
+        font-weight: bold;
+        transition: $--color-transition-base;
+        color: $--color-text-primary;
 
         &:hover {
           color: $--color-primary;
@@ -30,7 +39,8 @@
       .el-breadcrumb__inner,
       .el-breadcrumb__inner a {
         &, &:hover {
-          color: $--color-black;
+          font-weight: normal;
+          color: $--font-color-base;
           cursor: text;
         }
       }

packages/theme-chalk/src/color-picker.scss

@@ -323,11 +323,12 @@
   @include e(icon) {
     display: inline-block;
     position: absolute;
+    width: 100%;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0) scale(0.8);
-    width: 12px;
     color: $--color-white;
+    text-align: center;
     font-size: 12px;
   }
 

packages/theme-chalk/src/common/var.scss

@@ -478,7 +478,7 @@ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
 
 /* Pagination
 -------------------------- */
-$--pagination-font-size: 14px;
+$--pagination-font-size: 13px;
 $--pagination-fill: $--color-white;
 $--pagination-color: $--color-text-primary;
 $--pagination-border-radius: 3px;
@@ -568,8 +568,8 @@ $--card-padding: 20px;
 /* Slider
 --------------------------*/
 $--slider-main-background-color: $--color-primary;
-$--slider-runway-background-color: $--color-text-secondary;
-$--slider-button-hover-color: shade($--color-primary, 0.12);
+$--slider-runway-background-color: $--border-color-light;
+$--slider-button-hover-color: mix($--color-primary, black, 97%);
 $--slider-stop-background-color: $--color-text-placeholder;
 $--slider-disable-color: $--color-text-placeholder;
 

packages/theme-chalk/src/input.scss

@@ -8,7 +8,7 @@
   width: 100%;
 
   @include e(inner) {
-    appearance: none;
+    -webkit-appearance: none;
     background-color: $--input-fill;
     background-image: none;
     border-radius: $--input-border-radius;
@@ -23,7 +23,6 @@
     padding: 0 15px;
     transition: $--border-transition-base;
     width: 100%;
-    text-align: inherit;
 
     &::placeholder {
       color: $--input-placeholder-color;

packages/theme-chalk/src/pagination.scss

@@ -10,7 +10,7 @@
   font-weight: bold;
   @include utils-clearfix;
 
-  span,
+  span:not([class*=suffix]),
   button {
     display: inline-block;
     font-size: $--pagination-font-size;
@@ -23,18 +23,20 @@
 
   .el-input__inner {
     font-weight: bold;
+    text-align: center;
   }
 
   // pagesize 的下拉 icon
   .el-input__suffix {
-    right: -3px;
+    right: 0;
+    transform: scale(.8);
   }
 
   .el-select .el-input {
     width: 100px;
     margin: 0 5px;
+
     .el-input__icon {
-      width: 24px;
     }
 
     .el-input__inner {
@@ -109,6 +111,7 @@
 
     .el-input .el-input__inner {
       font-size: $--pagination-font-size;
+      padding-left: 8px;
 
       &:hover {
         border-color: $--pagination-hover-fill;
@@ -118,10 +121,6 @@
 
   @include e(total) {
     margin-right: 10px;
-
-    & + .el-pagination__sizes {
-      margin-left: -10px;
-    }
   }
 
   @include e(jump) {

packages/theme-chalk/src/progress.scss

@@ -8,7 +8,7 @@
 
   @include e(text) {
     font-size:14px;
-    color: $--color-black;
+    color: $--color-text-regular;
     display: inline-block;
     vertical-align: middle;
     margin-left: 10px;
@@ -19,6 +19,7 @@
       display: block;
     }
   }
+
   @include m(circle) {
     display: inline-block;
 
@@ -37,34 +38,41 @@
       }
     }
   }
+
   @include m(without-text) {
     .el-progress__text {
       display: none;
     }
+
     .el-progress-bar {
       padding-right: 0;
       margin-right: 0;
       display: block;
     }
   }
+
   @include m(text-inside) {
     .el-progress-bar {
       padding-right: 0;
       margin-right: 0;
     }
   }
+
   @include when(success) {
     .el-progress-bar__inner {
       background-color: $--color-success;
     }
+
     .el-progress__text {
       color: $--color-success;
     }
   }
+
   @include when(exception) {
     .el-progress-bar__inner {
       background-color: $--color-danger;
     }
+
     .el-progress__text {
       color: $--color-danger;
     }
@@ -82,7 +90,7 @@
   @include e(outer) {
     height: 6px;
     border-radius: 100px;
-    background-color: $--color-black;
+    background-color: $--border-color-light;
     overflow: hidden;
     position: relative;
     vertical-align: middle;
@@ -100,6 +108,7 @@
 
     @include utils-vertical-center;
   }
+
   @include e(innerText) {
     display: inline-block;
     vertical-align: middle;
@@ -113,6 +122,7 @@
   0% {
     background-position: 0 0;
   }
+
   100% {
     background-position: 32px 0;
   }

packages/theme-chalk/src/select-dropdown.scss

@@ -39,6 +39,12 @@
   .popper__arrow {
     transform: translateX(-400%);
   }
+
+  @include when(arrow-fixed){
+    .popper__arrow {
+      transform: translateX(-200%);
+    }
+  }
 }
 
 @include b(select-dropdown__empty) {

packages/theme-chalk/src/select.scss

@@ -113,8 +113,6 @@
   }
 
   .el-tag {
-    height: $--select-tag-height;
-    line-height: $--select-tag-height;
     box-sizing: border-box;
     border-color: transparent;
     margin: 3px 0 3px 6px;
@@ -130,7 +128,7 @@
 
       &::before {
         display: block;
-        transform: scale(.6);
+        transform: scale(.65);
       }
     }
   }

packages/theme-chalk/src/slider.scss

@@ -6,6 +6,7 @@
 
 @include b(slider) {
   @include utils-clearfix;
+
   @include e(runway) {
     width: 100%;
     height: $--slider-height;

packages/theme-chalk/src/tag.scss

@@ -5,8 +5,8 @@
   background-color: $--tag-fill;
   display: inline-block;
   padding: $--tag-padding;
-  height: 30px;
-  line-height: 28px;
+  height: 32px;
+  line-height: 30px;
   font-size: $--tag-font-size;
   color: $--tag-color;
   border-radius: $--tag-border-radius;
@@ -14,7 +14,7 @@
   border: 1px solid $--tag-border;
   white-space: nowrap;
 
-  & .el-icon-close {
+  .el-icon-close {
     border-radius: 50%;
     text-align: center;
     position: relative;
@@ -26,9 +26,14 @@
     line-height: 18px;
     vertical-align: middle;
     top: -1px;
-    right: -2px;
+    right: -5px;
     color: $--tag-color;
 
+    &::before {
+      display: block;
+      transform: scale(.8);
+    }
+
     &:hover {
       background-color: $--tag-color;
       color: $--color-white;
@@ -39,68 +44,105 @@
     background-color: $--tag-info-fill;
     border-color: $--tag-info-border;
     color: $--tag-info-color;
+
     @include when(hit) {
       border-color: $--tag-info-color;
     }
 
-    & .el-tag__close {
+    .el-tag__close {
       color: $--tag-info-color;
     }
 
-    & .el-tag__close:hover {
+    .el-tag__close:hover {
       background-color: $--tag-info-color;
       color: $--color-white;
     }
   }
+
   @include m(success) {
     background-color: $--tag-success-fill;
     border-color: $--tag-success-border;
     color: $--tag-success-color;
+
     @include when(hit) {
       border-color: $--tag-success-color;
     }
 
-    & .el-tag__close {
+    .el-tag__close {
       color: $--tag-success-color;
     }
 
-    & .el-tag__close:hover {
+    .el-tag__close:hover {
       background-color: $--tag-success-color;
       color: $--color-white;
     }
   }
+
   @include m(warning) {
     background-color: $--tag-warning-fill;
     border-color: $--tag-warning-border;
     color: $--tag-warning-color;
+
     @include when(hit) {
       border-color: $--tag-warning-color;
     }
 
-    & .el-tag__close {
+    .el-tag__close {
       color: $--tag-warning-color;
     }
 
-    & .el-tag__close:hover {
+    .el-tag__close:hover {
       background-color: $--tag-warning-color;
       color: $--color-white;
     }
   }
+
   @include m(danger) {
     background-color: $--tag-danger-fill;
     border-color: $--tag-danger-border;
     color: $--tag-danger-color;
+
     @include when(hit) {
       border-color: $--tag-danger-color;
     }
 
-    & .el-tag__close {
+    .el-tag__close {
       color: $--tag-danger-color;
     }
 
-    & .el-tag__close:hover {
+    .el-tag__close:hover {
       background-color: $--tag-danger-color;
       color: $--color-white;
     }
   }
+
+  @include m(medium) {
+    height: 28px;
+    line-height: 26px;
+
+    .el-icon-close {
+      transform: scale(.8);
+    }
+  }
+
+  @include m(small) {
+    height: 24px;
+    padding: 0 8px;
+    line-height: 22px;
+
+    .el-icon-close {
+      transform: scale(.8);
+    }
+  }
+
+  @include m(mini) {
+    height: 20px;
+    padding: 0 5px 0 8px;
+    line-height: 19px;
+
+    .el-icon-close {
+      margin-left: -3px;
+      transform: scale(.65);
+    }
+  }
 }

packages/theme-chalk/src/upload.scss

@@ -10,12 +10,14 @@
   @include e(input) {
     display: none;
   }
+
   @include e(tip) {
     font-size: 12px;
-    color: $--color-black;
+    color: $--color-text-regular;
     margin-top: 7px;
   }
-  & iframe {
+
+  iframe {
     position: absolute;
     z-index: -1;
     top: 0;
@@ -23,6 +25,7 @@
     opacity: 0;
     filter: alpha(opacity=0);
   }
+
   /* 照片墙模式 */
   @include m(picture-card) {
     background-color: #fbfdff;
@@ -59,27 +62,29 @@
   position: relative;
   overflow: hidden;
 
-  & .el-icon-upload {
+  .el-icon-upload {
     font-size: 67px;
-    color: $--color-black;
+    color: $--color-text-placeholder;
     margin: 40px 0 16px;
     line-height: 50px;
   }
 
-  & + .el-upload__tip {
+  + .el-upload__tip {
     text-align: center;
   }
-  & ~ .el-upload__files {
-    border-top: 1px solid rgba($--color-black, .2);
+
+  ~ .el-upload__files {
+    border-top: $--border-base;
     margin-top: 7px;
     padding-top: 5px;
   }
+
   .el-upload__text {
-    color: $--color-black;
+    color: $--color-text-regular;
     font-size: 14px;
     text-align: center;
 
-    & em {
+    em {
       color: $--color-primary;
       font-style: normal;
     }
@@ -103,7 +108,7 @@
   @include e(item) {
     transition: all .5s cubic-bezier(.55,0,.1,1);
     font-size: 14px;
-    color: $--color-black;
+    color: $--color-text-regular;
     line-height: 1.8;
     margin-top: 5px;
     position: relative;
@@ -111,58 +116,68 @@
     border-radius: 4px;
     width: 100%;
 
-    & .el-progress {
+    .el-progress {
       position: absolute;
       top: 20px;
       width: 100%;
     }
-    & .el-progress__text {
+
+    .el-progress__text {
       position: absolute;
       right: 0;
       top: -13px;
     }
+
     .el-progress-bar {
       margin-right: 0;
       padding-right: 0;
     }
+
     &:first-child {
       margin-top: 10px;
     }
+
     & .el-icon-upload-success {
       color: $--color-success;
     }
-    & .el-icon-close {
+
+    .el-icon-close {
       display: none;
       position: absolute;
       top: 5px;
       right: 5px;
       cursor: pointer;
       opacity: .75;
-      color: $--color-black;
+      color: $--color-text-regular;
       transform: scale(.7);
 
       &:hover {
         opacity: 1;
       }
     }
+
     &:hover {
-      background-color: $--color-black;
+      background-color: $--background-color-base;
 
       .el-icon-close {
         display: inline-block;
       }
+
       .el-progress__text {
         display: none;
       }
     }
+
     @include when(success) {
       .el-upload-list__item-status-label {
         display: block;
       }
+
       .el-upload-list__item-name:hover {
         color: $--link-hover-color;
         cursor: pointer;
       }
+
       &:hover {
         .el-upload-list__item-status-label {
           display: none;
@@ -170,13 +185,15 @@
       }
     }
   }
+
   @include when(disabled) {
     .el-upload-list__item:hover .el-upload-list__item-status-label {
       display: block;
     }
   }
+
   @include e(item-name) {
-    color: $--color-black;
+    color: $--color-text-regular;
     display: block;
     margin-right: 40px;
     overflow: hidden;
@@ -186,12 +203,13 @@
     white-space: nowrap;
 
     [class^="el-icon"] {
-      color: $--color-black;
-      margin-right: 7px;
       height: 100%;
+      margin-right: 7px;
+      color: $--color-text-secondary;
       line-height: inherit;
     }
   }
+
   @include e(item-status-label) {
     position: absolute;
     right: 5px;
@@ -199,18 +217,20 @@
     line-height: inherit;
     display: none;
   }
+
   @include e(item-delete) {
     position: absolute;
     right: 10px;
     top: 0;
     font-size: 12px;
-    color: $--color-black;
+    color: $--color-text-regular;
     display: none;
 
     &:hover {
       color: $--color-primary;
     }
   }
+
   @include m(picture-card) {
     margin: 0;
     display: inline;
@@ -223,16 +243,16 @@
       border-radius: 6px;
       box-sizing: border-box;
       width: 148px;
-      height: 148;
+      height: 148px;
       margin: 0 8px 8px 0;
       display: inline-block;
 
-      & .el-icon-check,
-      & .el-icon-circle-check {
+      .el-icon-check,
+      .el-icon-circle-check {
         color: $--color-white;
       }
 
-      & .el-icon-close {
+      .el-icon-close {
         display: none;
       }
 
@@ -240,18 +260,22 @@
         .el-upload-list__item-status-label {
           display: none;
         }
+
         .el-progress__text {
           display: block;
         }
       }
     }
+
     .el-upload-list__item-name {
       display: none;
     }
+
     .el-upload-list__item-thumbnail {
       width: 100%;
       height: 100%;
     }
+
     .el-upload-list__item-status-label {
       position: absolute;
       right: -15px;
@@ -269,6 +293,7 @@
         transform: rotate(-45deg) scale(0.8);
       }
     }
+
     .el-upload-list__item-actions {
       position: absolute;
       width: 100%;
@@ -288,6 +313,7 @@
         display: none;
         cursor: pointer;
       }
+
       span + span {
         margin-left: 15px;
       }
@@ -305,6 +331,7 @@
         }
       }
     }
+
     .el-progress {
       top: 50%;
       left: 50%;
@@ -317,6 +344,7 @@
       }
     }
   }
+
   @include m(picture) {
     .el-upload-list__item {
       overflow: hidden;
@@ -328,10 +356,11 @@
       padding: 10px 10px 10px 90px;
       height: 92px;
 
-      & .el-icon-check,
-      & .el-icon-circle-check {
+      .el-icon-check,
+      .el-icon-circle-check {
         color: $--color-white;
       }
+
       &:hover {
         .el-upload-list__item-status-label {
           background: transparent;
@@ -339,10 +368,12 @@
           top: -2px;
           right: -12px;
         }
+
         .el-progress__text {
           display: block;
         }
       }
+
       &.is-success {
         .el-upload-list__item-name {
           line-height: 70px;
@@ -354,6 +385,7 @@
         }
       }
     }
+
     .el-upload-list__item-thumbnail {
       vertical-align: middle;
       display: inline-block;
@@ -364,6 +396,7 @@
       z-index: 1;
       margin-left: -80px;
     }
+
     .el-upload-list__item-name {
       display: block;
       margin-top: 20px;
@@ -376,6 +409,7 @@
         top: 10px;
       }
     }
+
     .el-upload-list__item-status-label {
       position: absolute;
       right: -17px;
@@ -393,6 +427,7 @@
         transform: rotate(-45deg) scale(0.8);
       }
     }
+
     .el-progress {
       position: relative;
       top: -7px;
@@ -411,7 +446,7 @@
   cursor: default;
   @include utils-vertical-center;
 
-  & img {
+  img {
     display: block;
     width: 100%;
     height: 100%;
@@ -442,7 +477,7 @@
     position: static;
     width: 243px;
 
-    & + .el-upload__inner {
+    + .el-upload__inner {
       opacity: 0;
     }
   }
@@ -464,7 +499,7 @@
     background-color: rgba(#000, .72);
     text-align: center;
 
-    & .btn {
+    .btn {
       display: inline-block;
       color: $--color-white;
       font-size: 14px;
@@ -473,11 +508,11 @@
       transition: $--md-fade-transition;
       margin-top: 60px;
 
-      & i {
+      i {
         margin-top: 0;
       }
 
-      & span {
+      span {
         opacity: 0;
         transition: opacity .15s linear;
       }
@@ -489,12 +524,12 @@
       &:hover {
         transform: translateY(-13px);
 
-        & span {
+        span {
           opacity: 1;
         }
       }
 
-      & i {
+      i {
         color: $--color-white;
         display: block;
         font-size: 24px;
@@ -520,10 +555,10 @@
     margin: 0;
     line-height: 36px;
     font-size: 14px;
-    color: $--color-black;
+    color: $--color-text-primary;
   }
 
-  & + .el-upload__inner {
+  + .el-upload__inner {
     opacity: 0;
     position: relative;
     z-index: 1;