test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 18:27:40 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: tag in select style (#4914)

Browse Source 
* fix: tag in select style

* fix: extract common style from select to fix select
This commit is contained in:
云游君 2021-12-21 15:47:20 +08:00 committed by GitHub
parent 9abe74baa8
commit 0870bb968c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/theme-chalk/src/common/var.scss
View File

@ -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;

10
packages/theme-chalk/src/input.scss
View File

@ -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;

16
packages/theme-chalk/src/select-v2.scss
View File

@ -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;

8
packages/theme-chalk/src/select.scss
View File

@ -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;

12
packages/theme-chalk/src/select/common.scss Normal file
View File

@ -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;
}
}

2
packages/theme-chalk/src/tag.scss
View File

@ -108,8 +108,6 @@ $tag-border-width: 1px;
height: 16px;
width: 16px;
line-height: 16px;
vertical-align: middle;
top: -1px;
svg {
margin: 2px;