some style updates (#7603)

* some style updates

* fix a datepicker typo

examples/docs/en-US/checkbox.md

@@ -142,15 +142,15 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
   export default {
     data() {
       return {
-        checkAll: true,
+        checkAll: false,
         checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions,
         isIndeterminate: true
       };
     },
     methods: {
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {

examples/docs/en-US/color.md

@@ -55,7 +55,7 @@
   }
 
   .bg-border-base {
-    background-color: #d8dce6;
+    background-color: #d8dce5;
   }
   .bg-border-light {
     background-color: #dfe4ed;
@@ -119,7 +119,7 @@ Neutral colors are for text, background and border colors. You can use different
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE6</div></div>
+      <div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
       <div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
       <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
       <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>

examples/docs/en-US/input.md

@@ -55,7 +55,7 @@
       },
       createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(queryString.toLowerCase()) === 0);
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -436,7 +436,7 @@ You can get some recommended tips based on the current input.
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -520,7 +520,7 @@ Customize how suggestions are displayed.
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -593,7 +593,7 @@ Search data from server-side.
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {

examples/docs/zh-CN/checkbox.md

@@ -140,15 +140,15 @@
   export default {
     data() {
       return {
-        checkAll: true,
+        checkAll: false,
         checkedCities: ['上海', '北京'],
         cities: cityOptions,
         isIndeterminate: true
       };
     },
     methods: {
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {

examples/docs/zh-CN/color.md

@@ -55,7 +55,7 @@
   }
 
   .bg-border-base {
-    background-color: #d8dce6;
+    background-color: #d8dce5;
   }
   .bg-border-light {
     background-color: #dfe4ed;
@@ -120,7 +120,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE6</div></div>
+      <div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE5</div></div>
       <div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div>
       <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
       <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</div></div>

examples/docs/zh-CN/input.md

@@ -96,7 +96,7 @@
       },
       createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(queryString.toLowerCase()) === 0);
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -465,7 +465,7 @@ export default {
       },
       createFilter(queryString) {
         return (restaurant) => {
-          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -594,7 +594,7 @@ export default {
       },
       createFilter(queryString) {
         return (restaurant) => {
-          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -749,7 +749,7 @@ export default {
       },
       createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(queryString.toLowerCase()) === 0);
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {

packages/date-picker/src/panel/date.vue

@@ -349,7 +349,7 @@
       },
 
       handleLeave() {
-        this.$emit('dodestory');
+        this.$emit('dodestroy');
         document.body.removeEventListener('keydown', this.handleKeydown);
       },
 

packages/theme-chalk/src/button.scss

@@ -158,6 +158,7 @@
   }
   @include when(round) {
     border-radius: 20px;
+    padding: 12px 23px;
   }
 }
 

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

@@ -58,7 +58,7 @@ $--background-color-base: #f5f7fa;
 -------------------------- */
 $--border-width-base: 1px;
 $--border-style-base: solid;
-$--border-color-base: #d8dce6 !default;
+$--border-color-base: #d8dce5 !default;
 $--border-color-light: #dfe4ed !default;
 $--border-color-lighter: #e6ebf5 !default;
 $--border-color-extra-light: #edf2fc !default;
@@ -121,8 +121,8 @@ $--checkbox-input-border: $--border-base;
 $--checkbox-input-border-color: $--border-color-base;
 $--checkbox-icon-color: $--color-white;
 
-$--checkbox-disabled-input-border-color: $--disabled-border-base;
-$--checkbox-disabled-input-fill: $--disabled-fill-base;
+$--checkbox-disabled-input-border-color: $--border-color-base;
+$--checkbox-disabled-input-fill: #edf2fc;
 $--checkbox-disabled-icon-color: $--color-text-placeholder;
 
 $--checkbox-disabled-checked-input-fill: $--border-color-extra-light;
@@ -138,8 +138,8 @@ $--checkbox-input-border-color-hover: $--color-primary;
 
 $--checkbox-bordered-padding: 9px 20px 9px 10px;
 $--checkbox-bordered-medium-padding: 7px 20px 7px 10px;
-$--checkbox-bordered-small-padding: 4px 20px 6px 10px;
-$--checkbox-bordered-mini-padding: 2px 20px 4px 10px;
+$--checkbox-bordered-small-padding: 3px 15px 7px 10px;
+$--checkbox-bordered-mini-padding: 1px 15px 5px 10px;
 $--checkbox-bordered-medium-input-height: 14px;
 $--checkbox-bordered-medium-input-width: 14px;
 $--checkbox-bordered-small-input-height: 12px;
@@ -184,8 +184,8 @@ $--radio-input-border-color-hover: $--color-primary;
 
 $--radio-bordered-padding: 10px 20px 10px 10px;
 $--radio-bordered-medium-padding: 8px 20px 8px 10px;
-$--radio-bordered-small-padding: 6px 20px 6px 10px;
-$--radio-bordered-mini-padding: 4px 20px 4px 10px;
+$--radio-bordered-small-padding: 6px 15px 6px 10px;
+$--radio-bordered-mini-padding: 4px 15px 4px 10px;
 $--radio-bordered-medium-input-height: 14px;
 $--radio-bordered-medium-input-width: 14px;
 $--radio-bordered-small-input-height: 12px;
@@ -271,10 +271,11 @@ $--msgbox-danger-color: $--color-danger;
 -------------------------- */
 $--message-shadow: $--box-shadow-base;
 $--message-min-width: 380px;
+$--message-background-color: #edf2fc;
 $--message-padding: 15px 15px 15px 20px;
 $--message-content-color: $--color-text-regular;
 $--message-close-color: $--color-text-placeholder;
-$--message-close-size: 14px;
+$--message-close-size: 16px;
 $--message-close-hover-color: $--color-text-secondary;
 
 $--message-success-color: $--color-success;
@@ -390,12 +391,12 @@ $--button-font-size: 14px;
 $--button-font-weight: $--font-weight-primary;
 $--button-border-radius: $--border-radius-base;
 $--button-padding-vertical: 12px;
-$--button-padding-horizontal: 18px;
+$--button-padding-horizontal: 20px;
 
 $--button-medium-font-size: 14px;
 $--button-medium-border-radius: $--border-radius-base;
 $--button-medium-padding-vertical: 10px;
-$--button-medium-padding-horizontal: 18px;
+$--button-medium-padding-horizontal: 20px;
 
 $--button-small-font-size: 12px;
 $--button-small-border-radius: #{$--border-radius-base - 1};
@@ -411,9 +412,9 @@ $--button-default-color: $--color-text-regular;
 $--button-default-fill: $--color-white;
 $--button-default-border: $--border-color-base;
 
-$--button-disabled-color: $--color-text-secondary;
+$--button-disabled-color: $--color-text-placeholder;
 $--button-disabled-fill: $--color-white;
-$--button-disabled-border: $--border-color-base;
+$--button-disabled-border: $--border-color-lighter;
 
 $--button-primary-border: $--color-primary;
 $--button-primary-color: $--color-white;

packages/theme-chalk/src/menu.scss

@@ -170,6 +170,7 @@
     margin-right: 5px;
     width: 24px;
     text-align: center;
+    font-size: 18px;
   }
   & * {
     vertical-align: middle;
@@ -244,6 +245,7 @@
     margin-right: 5px;
     width: 24px;
     text-align: center;
+    font-size: 18px;
   }
 }
 

packages/theme-chalk/src/message.scss

@@ -12,7 +12,7 @@
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
-  background-color: $--color-info-lighter;
+  background-color: $--message-background-color;
   transition: opacity 0.3s, transform .4s;
   overflow: hidden;
   padding: $--message-padding;

packages/theme-chalk/src/select.scss

@@ -116,6 +116,7 @@
     box-sizing: border-box;
     border-color: transparent;
     margin: 3px 0 3px 6px;
+    background-color: #f0f2f5;
 
     &__close.el-icon-close {
       background-color: $--color-text-placeholder;

types/breadcrumb-item.d.ts

-import { Route } from 'vue-router'
 import { ElementUIComponent } from './component'
 
 /** Breadcrumb Item Component */
 export declare class ElBreadcrumbItem extends ElementUIComponent {
   /** Target route of the link, same as to of vue-router */
-  to: string | Route
+  to: string | object
 
   /** If true, the navigation will not leave a history record */
   replace: boolean

types/cascader.d.ts

@@ -53,5 +53,5 @@ export declare class ElCascader extends ElementUIComponent {
   size: ElementUIComponentSize
 
   /** Hook function before filtering with the value to be filtered as its parameter */
-  beforeFilter: (value: string) => boolean | Promise
+  beforeFilter: (value: string) => boolean | Promise<any>
 }

types/menu-item.d.ts

-import { Route } from 'vue-router'
 import { ElementUIComponent } from './component'
 
 /** Menu Item Component */
@@ -7,5 +6,5 @@ export declare class ElMenuItem extends ElementUIComponent {
   index: string
 
   /** Vue Router object */
-  route: Route
+  route: object
 }