test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: optimize Input presuffix style(#17414) (#17684)

Browse Source
This commit is contained in:
LilyWakana 2019-07-31 18:39:58 +08:00 committed by zombieJ
parent 4948ec670c
commit 9c0dbe2ddf
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/input/Input.tsx
View File

@ -257,6 +257,8 @@ class Input extends React.Component<InputProps, any> {
const affixWrapperCls = classNames(props.className, `${prefixCls}-affix-wrapper`, { const affixWrapperCls = classNames(props.className, `${prefixCls}-affix-wrapper`, {
[`${prefixCls}-affix-wrapper-sm`]: props.size === 'small', [`${prefixCls}-affix-wrapper-sm`]: props.size === 'small',
[`${prefixCls}-affix-wrapper-lg`]: props.size === 'large', [`${prefixCls}-affix-wrapper-lg`]: props.size === 'large',
[`${prefixCls}-affix-wrapper-with-clear-btn`]:
props.suffix && props.allowClear && this.state.value,
}); });
return ( return (
<span className={affixWrapperCls} style={props.style}> <span className={affixWrapperCls} style={props.style}>

16
components/input/style/mixin.less
View File

@ -2,6 +2,7 @@
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@input-affix-width: 19px; @input-affix-width: 19px;
@input-affix-with-clear-btn-width: 38px;
// size mixins for input // size mixins for input
.input-lg() { .input-lg() {
@ -371,14 +372,22 @@
.@{inputClass}-prefix, .@{inputClass}-prefix,
.@{inputClass}-suffix { .@{inputClass}-suffix {
position: absolute; position: absolute;
top: 50%; top: 0;
z-index: 2; z-index: 2;
color: @input-color; color: @input-color;
line-height: 0; line-height: 0;
transform: translateY(-50%); height: 100%;
box-sizing: border-box;
padding: @input-padding-vertical-base + @border-width-base 0;
:not(.anticon) { :not(.anticon) {
line-height: @line-height-base; line-height: @line-height-base;
} }
.anticon {
position: relative;
vertical-align: top;
top: 50%;
transform: translateY(-50%);
}
} }
.@{inputClass}-prefix { .@{inputClass}-prefix {
@ -396,4 +405,7 @@
.@{inputClass}:not(:last-child) { .@{inputClass}:not(:last-child) {
padding-right: @input-padding-horizontal-base + @input-affix-width; padding-right: @input-padding-horizontal-base + @input-affix-width;
} }
&.@{inputClass}-affix-wrapper-with-clear-btn .@{inputClass}:not(:last-child) {
padding-right: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
}
} }