Form item vertical align (ant-design#8415)

* fix formItem vertical align * fix formItem vertical align * rebase master
andrewckor · Dec 4, 2017 · 1f0ee08 · 1f0ee08
1 parent ebcf7b4
commit 1f0ee08
Showing 1 changed file with 34 additions and 7 deletions.
diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -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,21 +265,42 @@ 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 {
+    &.@{ant-prefix}-input-group-wrapper-sm {
+      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-lg - @input-height-base) / 2;
+    top: (@input-height-base - @input-height-lg) / 2;
+  }
 
-    &.@{ant-prefix}-input-group-wrapper-lg {
+  .@{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;
     }
-
-    &.@{ant-prefix}-input-group-wrapper-sm {
-      top: (@input-height-lg - @input-height-sm) / 2;
-    }
   }
 }