mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

Form item vertical align (#8415)

Browse Source 
* fix formItem vertical align

* fix formItem vertical align

* rebase master
This commit is contained in:
ddcat1115 2017-12-04 14:00:15 +08:00 committed by 偏右
parent ebcf7b43e8
commit 1f0ee08574
1 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/form/style/index.less
View File

@ -97,7 +97,7 @@ input[type="checkbox"] {
&-label {
text-align: right;
vertical-align: middle;
line-height: @form-component-height;
line-height: @form-component-height - 0.0001px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
@ -245,6 +245,12 @@ form {
// Fix https://github.com/ant-design/ant-design/issues/6097
&:only-child {
display: block;
&.@{ant-prefix}-select-sm,
&.@{ant-prefix}-cascader-picker-small {
position: relative;
top: (@input-height-base - @input-height-sm) / 2;
}
}
}
@ -259,20 +265,41 @@ form {
.@{ant-prefix}-input-group-addon .@{ant-prefix}-cascader-picker {
&:only-child {
display: inline-block;
&.@{ant-prefix}-select-sm,
&.@{ant-prefix}-cascader-picker-small {
top: 0;
}
}
}
// fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
.@{ant-prefix}-input-group-wrapper {
position: relative;
top: (@input-height-lg - @input-height-base) / 2;
&.@{ant-prefix}-input-group-wrapper-lg {
top: 0;
}
&.@{ant-prefix}-input-group-wrapper-sm {
top: (@input-height-lg - @input-height-sm) / 2;
position: relative;
top: (@input-height-base - @input-height-sm) / 2;
}
}
// fix large size vertical align. https://github.com/ant-design/ant-design/issues/8336
.@{ant-prefix}-input-lg,
.@{ant-prefix}-input-number-lg,
.@{ant-prefix}-cascader-picker-large,
.@{ant-prefix}-select-lg,
.@{ant-prefix}-calendar-picker-large,
.@{ant-prefix}-time-picker-large,
.@{ant-prefix}-radio-group-large,
.@{ant-prefix}-input-group-wrapper-lg .@{ant-prefix}-input-group-addon {
position: relative;
top: (@input-height-base - @input-height-lg) / 2;
}
.@{ant-prefix}-cascader-picker-large,
.@{ant-prefix}-calendar-picker-large,
.@{ant-prefix}-input-group-wrapper-lg .@{ant-prefix}-input-group-addon {
.@{ant-prefix}-input-lg,
.@{ant-prefix}-select-lg {
top: 0;
}
}
}