ColorPicker: add chalk theme

examples/docs/en-US/color-picker.md

@@ -2,9 +2,10 @@
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#1989fa',
         color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#20a0ff'
       };
     },
     mounted() {
@@ -34,6 +35,9 @@
     font-size: 14px;
     margin-bottom: 20px;
   }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
 </style>
 
 ## ColorPicker
@@ -57,7 +61,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#1989fa',
         color2: null
       }
     }
@@ -84,9 +88,32 @@ ColorPicker is a color selector supporting multiple color formats.
 ```
 :::
 
+### Sizes
+
+:::demo
+```html
+<el-color-picker v-model="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#20a0ff'
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute | Description | Type | Accepted Values | Default |
 |---------- |-------- |---------- |-------------  |-------- |
+| disabled | whether to disable the ColorPicker | boolean | — | false |
+| size | size of ColorPicker | string | — | medium / small / mini |
 | show-alpha | whether to display the alpha slider | boolean | — | false |
 | color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
 

examples/docs/zh-CN/color-picker.md

@@ -2,9 +2,10 @@
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#1989fa',
         color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#20a0ff'
       };
     },
     mounted() {
@@ -34,6 +35,9 @@
     font-size: 14px;
     margin-bottom: 20px;
   }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
 </style>
 
 ## ColorPicker 颜色选择器
@@ -57,7 +61,7 @@
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#1989fa',
         color2: null
       }
     }
@@ -84,9 +88,32 @@
 ```
 :::
 
+### 不同尺寸
+
+:::demo
+```html
+<el-color-picker v-model="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#20a0ff'
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| disabled | 是否禁用 | boolean | — | false |
+| size | 尺寸 | string | — | medium / small / mini |
 | show-alpha | 是否支持透明度选择 | boolean | — | false |
 | color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
 

packages/color-picker/src/main.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="el-color-picker" v-clickoutside="hide">
+  <div
-    <div class="el-color-picker__trigger" @click="showPicker = !showPicker">
+    :class="[
+      'el-color-picker',
+      disabled ? 'is-disabled' : '',
+      size ? `el-color-picker--${ size }` : ''
+    ]"
+    v-clickoutside="hide">
+    <div class="el-color-picker__mask" v-if="disabled"></div>
+    <div class="el-color-picker__trigger" @click="handleTrigger">
       <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
         <span class="el-color-picker__color-inner"
           :style="{
@@ -8,7 +15,7 @@
           }"></span>
         <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
       </span>
-      <span class="el-color-picker__icon el-icon-caret-bottom"></span>
+      <span class="el-color-picker__icon el-icon-caret-bottom" v-show="value || showPanelColor"></span>
     </div>
     <picker-dropdown
        ref="dropdown"
@@ -31,15 +38,11 @@
     name: 'ElColorPicker',
 
     props: {
-      value: {
+      value: String,
-        type: String
+      showAlpha: Boolean,
-      },
+      colorFormat: String,
-      showAlpha: {
+      disabled: Boolean,
-        type: Boolean
+      size: String
-      },
-      colorFormat: {
-        type: String
-      }
     },
 
     directives: { Clickoutside },
@@ -77,6 +80,10 @@
     },
 
     methods: {
+      handleTrigger() {
+        if (this.disabled) return;
+        this.showPicker = !this.showPicker;
+      },
       confirmValue(value) {
         this.$emit('input', this.color.value);
         this.$emit('change', this.color.value);

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

@@ -163,6 +163,7 @@
     line-height: 26px;
     font-size: 12px;
     color: $--color-black;
+    width: 160px;
   }
 
   @include e(btn) {
@@ -202,24 +203,99 @@
   display: inline-block;
   position: relative;
   line-height: normal;
+  height: 40px;
+
+  @include when(disabled) {
+    .el-color-picker__trigger {
+      cursor: not-allowed;
+    }
+  }
+
+  @include m(medium) {
+    height: 36px;
+
+    .el-color-picker__trigger {
+      height: 36px;
+      width: 36px;
+    }
+
+    .el-color-picker__mask {
+      height: 34px;
+      width: 34px;
+    }
+  }
+
+  @include m(small) {
+    height: 32px;
+
+    .el-color-picker__trigger {
+      height: 32px;
+      width: 32px;
+    }
+
+    .el-color-picker__mask {
+      height: 30px;
+      width: 30px;
+    }
+
+    .el-color-picker__icon,
+    .el-color-picker__empty {
+      transform: translate3d(-50%, -50%, 0) scale(0.6);
+    }
+  }
+
+  @include m(mini) {
+    height: 28px;
+
+    .el-color-picker__trigger {
+      height: 28px;
+      width: 28px;
+    }
+
+    .el-color-picker__mask {
+      height: 26px;
+      width: 26px;
+    }
+
+    .el-color-picker__icon,
+    .el-color-picker__empty {
+      transform: translate3d(-50%, -50%, 0) scale(0.6);
+    }
+  }
+
+  @include e(mask) {
+    height: 38px;
+    width: 38px;
+    border-radius: 4px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    z-index: 1;
+    cursor: not-allowed;
+    background-color: rgba(255, 255, 255, .7);
+  }
 
   @include e(trigger) {
     display: inline-block;
     box-sizing: border-box;
-    height: 36px;
+    height: 40px;
-    padding: 6px;
+    width: 40px;
-    border: 1px solid #bfcbd9;
+    padding: 4px;
+    border: 1px solid #e6e6e6;
     border-radius: 4px;
     font-size: 0;
+    position: relative;
+    cursor: pointer;
   }
 
   @include e(color) {
     position: relative;
-    display: inline-block;
+    display: block;
     box-sizing: border-box;
-    border: 1px solid #666;
+    border: 1px solid #999;
-    width: 22px;
+    border-radius: $--border-radius-small;
-    height: 22px;
+    width: 100%;
+    height: 100%;
     text-align: center;
 
     @include when(alpha) {
@@ -237,20 +313,21 @@
 
   @include e(empty) {
     font-size: 12px;
-    vertical-align: middle;
+    color: #999;
-    color: #666;
     position: absolute;
-    top: 4px;
+    top: 50%;
-    left: 4px;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) scale(0.8);
   }
 
   @include e(icon) {
     display: inline-block;
-    position: relative;
+    position: absolute;
-    top: -6px;
+    top: 50%;
-    margin-left: 8px;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) scale(0.8);
     width: 12px;
-    color: #888;
+    color: $--color-white;
     font-size: 12px;
   }
 
@@ -259,7 +336,8 @@
     z-index: 10;
     padding: 6px;
     background-color: $--color-white;
-    border: 1px solid $--color-black;
+    border: 1px solid $--border-color-lighter;
+    border-radius: $--border-radius-base;
     box-shadow: $--dropdown-menu-box-shadow;
   }
 }

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

@@ -70,7 +70,7 @@ $--border-radius-circle: 100%;
 -------------------------- */
 $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
 $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
-$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
 /* Fill
 -------------------------- */
 $--fill-base: $--color-white;
@@ -282,7 +282,7 @@ $--message-danger-color: $--color-danger;
 $--notification-width: 330px;
 $--notification-padding: 14px 26px 14px 13px;
 $--notification-raduis: 8px;
-$--notification-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
+$--notification-shadow: $--box-shadow-light;
 $--notification-border-color: $--border-color-lighter;
 $--notification-icon-size: 24px;
 $--notification-close-font-size: 12px;