@@ -33,6 +33,10 @@
gpuAcceleration: false
};
}
+ },
+
+ visibleArrow: {
+ default: true
}
},
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index f989290e..694072cf 100644
--- a/packages/select/src/select.vue
+++ b/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>
{{ item.currentLabel }}
@@ -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() {
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index f5c1de47..5f93193c 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/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;
-
- &.hover {
- background-color: $--select-option-selected-hover;
- }
+ background-color: $--select-option-selected-hover;
}
}
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 3145ac01..b015303b 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/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-hover-background: $--color-text-secondary;
+$--select-option-height: 34px;
+$--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
-------------------------- */
diff --git a/packages/theme-chalk/src/option-group.scss b/packages/theme-chalk/src/option-group.scss
index f65760ea..c68addb9 100644
--- a/packages/theme-chalk/src/option-group.scss
+++ b/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;
}
}
diff --git a/packages/theme-chalk/src/option.scss b/packages/theme-chalk/src/option.scss
index b503a03b..5a71acc0 100644
--- a/packages/theme-chalk/src/option.scss
+++ b/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;
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
index a4f30cda..6ef39e38 100644
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/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) {
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index e8563909..c7d0c139 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/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) {