mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-04-06 16:30:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [inputnumber, input] resolve styling issues caused by using prefix and suffix (#19042)

Browse Source 
* feat: use consistent line-height within `el-input` component

* feat: Adjust input padding based on `size`
This commit is contained in:
DDDDD12138 2024-12-24 20:21:14 +08:00 committed by GitHub
parent 2c9d70dc94
commit d2b17bcd0c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/theme-chalk/src/input-number.scss
View File

@ -103,6 +103,14 @@
font-size: map.get($input-font-size, $size);
}
@include when(controls-right) {
.#{$namespace}-input--#{$size} {
.#{$namespace}-input__wrapper {
padding-right: #{map.get($input-height, $size) + 7};
}
}
}
.#{$namespace}-input--#{$size} {
.#{$namespace}-input__wrapper {
padding-left: #{map.get($input-height, $size) + 7};

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

@ -199,7 +199,7 @@
}
}
@include e(inner) {
& {
// use map.get as default value for date picker range
@include set-css-var-value(
'input-inner-height',
@ -210,7 +210,9 @@
) - $border-width * 2
)
);
}
@include e(inner) {
width: 100%;
flex-grow: 1;
-webkit-appearance: none;
@ -255,6 +257,7 @@
flex-shrink: 0;
flex-wrap: nowrap;
height: 100%;
line-height: getCssVar('input-inner-height');
text-align: center;
color: var(
#{getCssVarName('input-icon-color')},
@ -359,8 +362,7 @@
@include e(wrapper) {
padding: $border-width map.get($input-padding-horizontal, $size)-$border-width;
}
@include e(inner) {
& {
@include set-css-var-value(
'input-inner-height',
calc(