Select / Cascader: add chalk theme (#7109)

* Select & Cascader: add chalk theme

* Select / Cascader: fix test

packages/cascader/src/main.vue

@@ -34,7 +34,7 @@
         <i
           key="2"
           v-else
-          class="el-input__icon el-icon-caret-bottom"
+          class="el-input__icon el-icon-arrow-down"
           :class="{ 'is-reverse': menuVisible }"
         ></i>
       </template>

packages/cascader/src/menu.vue

@@ -202,7 +202,7 @@
           <div
             v-show={visible}
             class={[
-              'el-cascader-menus',
+              'el-cascader-menus el-popper',
               popperClass
             ]}
             ref="wrapper"

packages/select/src/select-dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="el-select-dropdown"
+    class="el-select-dropdown el-popper"
     :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
     :style="{ minWidth: minWidth }">
     <slot></slot>
@@ -33,6 +33,10 @@
             gpuAcceleration: false
           };
         }
+      },
+
+      visibleArrow: {
+        default: true
       }
     },
 

packages/select/src/select.vue

@@ -14,7 +14,7 @@
           :key="getValueKey(item)"
           :closable="!disabled"
           :hit="item.hitState"
-          type="primary"
+          type="info"
           @close="deleteTag($event, item)"
           close-transition>
           <span class="el-select__tags-text">{{ item.currentLabel }}</span>
@@ -152,7 +152,7 @@
           !this.multiple &&
           this.value !== undefined &&
           this.value !== '';
-        return criteria ? 'circle-close is-show-close' : (this.remote && this.filterable ? '' : 'caret-top');
+        return criteria ? 'circle-close is-show-close' : (this.remote && this.filterable ? '' : 'arrow-up');
       },
 
       debounce() {

packages/theme-chalk/src/cascader.scss

@@ -5,6 +5,7 @@
 @include b(cascader) {
   display: inline-block;
   position: relative;
+  min-width: 224px;
 
   .el-input,
   .el-input__inner {
@@ -25,6 +26,11 @@
 
   .el-icon-circle-close {
     z-index: #{$--index-normal + 1};
+    transition: $--color-transition-base;
+
+    &:hover {
+      color: $--color-text-secondary;
+    }
   }
 
   @include e(clearIcon) {
@@ -46,8 +52,9 @@
     overflow: hidden;
     box-sizing: border-box;
     cursor: pointer;
-    font-size: 14px;
+    font-size: $--font-size-small;
     text-align: left;
+
     span {
       color: $--color-black;
     }
@@ -84,6 +91,11 @@
   border: $--select-dropdown-border;
   border-radius: $--border-radius-small;
   box-shadow: $--select-dropdown-shadow;
+
+  &.el-popper[x-placement^="bottom"] .popper__arrow {
+    // dont do that, bro dont do that
+    left: 24px !important;
+  }
 }
 
 @include b(cascader-menu) {
@@ -104,7 +116,7 @@
 
   @include e(item) {
     font-size: $--select-font-size;
-    padding: 8px 30px 8px 10px;
+    padding: 8px 20px;
     position: relative;
     white-space: nowrap;
     overflow: hidden;
@@ -122,12 +134,12 @@
     @include m(extensible) {
       &:after {
         font-family: 'element-icons';
-        content: "\e606";
+        content: "\e602";
         font-size: 12px;
         transform: scale(0.8);
         color: rgb(191, 203, 217);
         position: absolute;
-        right: 10px;
+        right: 15px;
         margin-top: 1px;
       }
     }
@@ -157,11 +169,7 @@
 
     &.selected {
       color: $--color-white;
-      background-color: $--select-option-selected;
+      background-color: $--select-option-selected-hover;
-
-      &.hover {
-        background-color: $--select-option-selected-hover;
-      }
     }
   }
 

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

@@ -203,7 +203,7 @@ $--radio-button-disabled-checked-fill: $--border-color-extra-light;
 $--select-border-color-hover: $--border-color-hover;
 $--select-disabled-border: $--disabled-border-base;
 $--select-font-size: $--font-size-base;
-$--select-close-hover-color: $--color-text-placeholder;
+$--select-close-hover-color: $--color-text-secondary;
 
 $--select-input-color: $--color-text-placeholder;
 $--select-multiple-input-color: #666;
@@ -214,25 +214,25 @@ $--select-tag-height: 24px;
 $--select-tag-color: $--color-white;
 $--select-tag-background: $--color-primary;
 
-$--select-option-color: $--link-color;
+$--select-option-color: $--font-color-base;
 $--select-option-disabled-color: $--color-text-placeholder;
 $--select-option-disabled-background: $--color-white;
-$--select-option-height: 36px;
+$--select-option-height: 34px;
-$--select-option-hover-background: $--color-text-secondary;
+$--select-option-hover-background: $--background-color-base;
 $--select-option-selected: $--color-primary;
-$--select-option-selected-hover: shade($--color-primary, 0.12);
+$--select-option-selected-hover: mix($--color-primary, black, 95%);
 
-$--select-group-color: #999;
+$--select-group-color: $--color-info;
 $--select-group-height: 30px;
 $--select-group-font-size: 12px;
 
 $--select-dropdown-background: $--color-white;
-$--select-dropdown-shadow: $--box-shadow-base;
+$--select-dropdown-shadow: $--box-shadow-light;
 $--select-dropdown-empty-color: #999;
 $--select-dropdown-max-height: 274px;
 $--select-dropdown-padding: 6px 0;
 $--select-dropdown-empty-padding: 10px 0;
-$--select-dropdown-border: solid 1px $--disabled-border-base;
+$--select-dropdown-border: solid 1px $--border-color-light;
 
 /* Alert
 -------------------------- */

packages/theme-chalk/src/option-group.scss

@@ -2,24 +2,41 @@
 @import "common/var";
 
 @include b(select-group) {
+  $gap: 20px;
+
   margin: 0;
   padding: 0;
 
   @include e(wrap) {
+    position: relative;
     list-style: none;
     margin: 0;
     padding: 0;
+
+    &:not(:last-of-type) {
+      padding-bottom: 24px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: $gap;
+        right: $gap;
+        bottom: 12px;
+        height: 1px;
+        background: $--border-color-light;
+      }
+    }
   }
 
   @include e(title) {
-    padding-left: 10px;
+    padding-left: $gap;
     font-size: $--select-group-font-size;
     color: $--select-group-color;
-    height: $--select-group-height;
     line-height: $--select-group-height;
   }
 
   & .el-select-dropdown__item {
-    padding-left: 20px;
+    padding-left: $gap;
   }
 }

packages/theme-chalk/src/option.scss

@@ -4,7 +4,7 @@
 @include b(select-dropdown) {
   @include e(item) {
     font-size: $--select-font-size;
-    padding: 8px 10px;
+    padding: 7px 20px;
     position: relative;
     white-space: nowrap;
     overflow: hidden;

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

@@ -5,7 +5,7 @@
   position: absolute;
   z-index: #{$--index-top + 1};
   border: $--select-dropdown-border;
-  border-radius: $--border-radius-small;
+  border-radius: $--border-radius-base;
   background-color: $--select-dropdown-background;
   box-shadow: $--select-dropdown-shadow;
   box-sizing: border-box;
@@ -22,7 +22,7 @@
 
       &::after {
         position: absolute;
-        right: 10px;
+        right: 20px;
         font-family: 'element-icons';
         content: "\E608";
         font-size: 11px;
@@ -35,6 +35,10 @@
   .el-scrollbar.is-empty .el-select-dropdown__list{
     padding: 0;
   }
+
+  &[x-placement^="bottom"] .popper__arrow {
+    left: 10% !important;
+  }
 }
 
 @include b(select-dropdown__empty) {

packages/theme-chalk/src/select.scss

@@ -10,6 +10,7 @@
 @include b(select) {
   display: inline-block;
   position: relative;
+  min-width: 224px;
 
   &:hover {
     .el-input__inner {
@@ -40,12 +41,12 @@
       }
 
       @include when(show-close) {
-        transition: 0s;
         font-size: $--select-font-size;
         text-align: center;
         transform: rotateZ(180deg);
         border-radius: $--border-radius-circle;
         color: $--select-input-color;
+        transition: $--color-transition-base;
 
         &:hover {
           color: $--select-close-hover-color;
@@ -62,10 +63,6 @@
         }
       }
     }
-
-    &.is-focus .el-input__inner {
-      border-color: $--input-focus-border;
-    }
   }
 
   & > .el-input {
@@ -110,6 +107,10 @@
     z-index: $--index-normal;
     top: 50%;
     transform: translateY(-50%);
+
+    .el-tag {
+
+    }
   }
 
   & .el-tag__close {
@@ -120,7 +121,23 @@
     height: $--select-tag-height;
     line-height: $--select-tag-height;
     box-sizing: border-box;
+    border-color: transparent;
     margin: 3px 0 3px 6px;
+
+    &__close.el-icon-close {
+      background-color: $--color-text-placeholder;
+      right: -7px;
+      color: $--color-white;
+
+      &:hover {
+        background-color: $--color-text-secondary;
+      }
+
+      &::before {
+        display: block;
+        transform: scale(.6);
+      }
+    }
   }
 
   @include e(tag) {