diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 07e285b86e..f112a51eb1 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -490,6 +490,16 @@ $input-number-width: map.merge( $input-number-width ); +$input-padding-horizontal: () !default; +$input-padding-horizontal: map.merge( + ( + 'large': 16px, + 'default': 12px, + 'small': 8px, + ), + $input-padding-horizontal +); + // Cascader // css3 var in packages/theme-chalk/src/cascader.scss $cascader: () !default; diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss index e1a7e38cd5..589a67e3c0 100644 --- a/packages/theme-chalk/src/input.scss +++ b/packages/theme-chalk/src/input.scss @@ -8,16 +8,6 @@ @include set-component-css-var('input', $input); } -$input-padding-horizontal: () !default; -$input-padding-horizontal: map.merge( - ( - 'large': 16px, - 'default': 12px, - 'small': 8px, - ), - $input-padding-horizontal -); - @include b(textarea) { position: relative; display: inline-block; diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss index dddb3f3e11..d9a31f6e17 100644 --- a/packages/theme-chalk/src/select-v2.scss +++ b/packages/theme-chalk/src/select-v2.scss @@ -7,8 +7,9 @@ @use './select-dropdown-v2.scss'; @use './option-item.scss'; @use './option-group.scss'; +@use './select/common.scss' as *; -$input-inline-start: 15px !default; +$input-inline-start: map.get($input-padding-horizontal, 'default') !default; @include b(select-v2) { @include set-component-css-var('select', $select); @@ -20,11 +21,13 @@ $input-inline-start: 15px !default; font-size: map.get($input-font-size, 'default'); $selector: &; @include e(wrapper) { - height: map.get($input-height, 'default'); + display: flex; + align-items: center; + flex-wrap: wrap; box-sizing: border-box; cursor: pointer; - padding: 5px 30px 5px 0px; + padding: 2px 30px 2px 0; border: 1px solid var(--el-border-color-base); border-radius: var(--el-border-radius-base); transition: border-color var(--el-transition-duration-fast) @@ -101,12 +104,7 @@ $input-inline-start: 15px !default; } } - .#{$namespace}-select-v2__tags-text { - text-overflow: ellipsis; - display: inline-block; - overflow-x: hidden; - vertical-align: bottom; - } + @include select-common(select-v2); @include e(empty) { padding: 10px 0; diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index cbbf33a570..cf33294a28 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -5,6 +5,7 @@ @use 'mixins/var' as *; @use 'common/var' as *; @use './select-dropdown.scss'; +@use './select/common.scss' as *; @include b(select) { @include set-component-css-var('select', $select); @@ -39,12 +40,7 @@ } } - .#{$namespace}-select__tags-text { - text-overflow: ellipsis; - display: inline-block; - overflow-x: hidden; - vertical-align: bottom; - } + @include select-common(select); .#{$namespace}-input__inner { cursor: pointer; diff --git a/packages/theme-chalk/src/select/common.scss b/packages/theme-chalk/src/select/common.scss new file mode 100644 index 0000000000..99c6442e79 --- /dev/null +++ b/packages/theme-chalk/src/select/common.scss @@ -0,0 +1,12 @@ +@use '../mixins/mixins' as *; + +// same style in select & selevt-v2 +@mixin select-common($name) { + .#{$namespace}-#{$name}__tags-text { + text-overflow: ellipsis; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } +} diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss index a986af07be..3e89686044 100644 --- a/packages/theme-chalk/src/tag.scss +++ b/packages/theme-chalk/src/tag.scss @@ -108,8 +108,6 @@ $tag-border-width: 1px; height: 16px; width: 16px; line-height: 16px; - vertical-align: middle; - top: -1px; svg { margin: 2px;