From 7fb599530920c58eef9ca3b2315aa6b94bd7a86e Mon Sep 17 00:00:00 2001
From: simaQ <sima.zhang1990@gmail.com>
Date: Tue, 7 Jul 2015 11:32:08 +0800
Subject: [PATCH] add form and input style

---
 components/form/demo/explain-text.md   |  19 ----
 components/form/demo/feedback-input.md |  51 ---------
 components/form/demo/input-group.md    |  60 ----------
 components/form/demo/sizing.md         |  61 ----------
 components/form/demo/static-control.md |  27 -----
 style/components/form.less             | 148 +++++++++++++++----------
 style/components/index.less            |   1 +
 style/components/typography.less       |  11 +-
 style/core/base.less                   |   6 +
 style/mixins/form.less                 |  20 ++--
 style/mixins/input.less                |  61 ++++------
 style/themes/default/custom.less       |  14 +--
 12 files changed, 142 insertions(+), 337 deletions(-)
 delete mode 100644 components/form/demo/explain-text.md
 delete mode 100644 components/form/demo/feedback-input.md
 delete mode 100644 components/form/demo/input-group.md
 delete mode 100644 components/form/demo/sizing.md
 delete mode 100644 components/form/demo/static-control.md

diff --git a/components/form/demo/explain-text.md b/components/form/demo/explain-text.md
deleted file mode 100644
index 55eaeb95db..0000000000
--- a/components/form/demo/explain-text.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Form explain 
-
-- order: 11
-
-表单辅助文本
-
-针对表单控件的块级辅助文本。
-
----
-
-````html
-<form>
-  <div class="ant-form-item">
-    <label for="userName">Username</label>
-	  <input class="ant-input" type="text" id="userName" placeholder="Please enter userName"/>
-    <div class="ant-form-explain">这里是提示信息。</div>
-  </div>
-</form>
-````
diff --git a/components/form/demo/feedback-input.md b/components/form/demo/feedback-input.md
deleted file mode 100644
index f91983b59f..0000000000
--- a/components/form/demo/feedback-input.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Feedback input
-
-- order: 8
-
-带反馈图标的输入框
-
-为输入框添加反馈图标，可以更好地反馈当前的状态。只需用 `.has-feedback` 类包裹 input 输入框即可。
-
-另外可为 `label` 标签添加 `required` 属性，表示该项必选。
-
-> 注意: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上哦~
-
----
-
-````html
-<!-- 校验失败 -->
-<div class="ant-form-item has-error">
-  <label for="userName">Username</label>
-  <div class="has-feedback">
-    <input class="ant-input" type="text" id="userName" placeholder="有错误啦"/>
-    <i class="anticon anticon-cross-round"></i>
-  </div>
-</div>
-
-<!-- 警告状态 -->
-<div class="ant-form-item has-warning">
-  <label for="userName" ant-input-group>Username</label>
-  <div class="has-feedback">
-    <input class="ant-input" type="text" id="userName" placeholder="前方高能预警"/>
-    <i class="anticon anticon-exclamation-round"></i>
-  </div>
-  <div class="ant-form-explain">该项必选</div>
-</div>
-
-<!-- 校验成功 -->
-<div class="ant-form-item has-success">
-  <label for="userName">Username</label>
-  <div class="has-feedback">
-    <input class="ant-input" type="text" id="userName" placeholder="请输入"/>
-    <i class="anticon anticon-check-round"></i>
-  </div>
-</div>
-
-<div class="ant-form-item">
-  <label for="userName">Username</label>
-  <div class="has-feedback">
-    <input class="ant-input" type="text" id="userName" placeholder="努力加载中..."/>
-    <i class="anticon anticon-loading"></i>
-  </div>
-</div>
-````
diff --git a/components/form/demo/input-group.md b/components/form/demo/input-group.md
deleted file mode 100644
index 609459a64f..0000000000
--- a/components/form/demo/input-group.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Input group
-
-- order: 9
-
-输入框组合
-
-
-
----
-
-````html
-<h4>带标签的输入框</h4>
-<div class="ant-input-group">
-  <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
-  <input type="text" class="ant-input" placeholder="Username">
-</div>
-<br>
-<div class="ant-input-group">
-  <input type="text" class="ant-input" placeholder="Username">
-  <span class="ant-input-group-addon" id="basic-addon1">.com</span>
-</div>
-<br>
-<div class="ant-input-group">
-  <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
-  <input type="text" class="ant-input" placeholder="Username">
-  <span class="ant-input-group-addon" id="basic-addon1">.com</span>
-</div>
-
-<h4>作为额外元素的按钮式下拉菜单</h4>
-<div class="ant-input-group">
-  <input type="text" class="ant-input" placeholder="Search for...">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-down"></i>
-    </button>
-  </div>
-</div>
-
-<h4>带按钮的菜单</h4>
-<div class="ant-input-group">
-  <input type="text" class="ant-input" placeholder="Search for...">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">Go!</button>
-  </div>
-</div>
-
-<h4>微调输入框</h4>
-<div class="ant-input-group">
-  <input type="text" class="ant-input" placeholder="请输入数字">
-  <div class="ant-input-group-btn-vertical">
-    <button class="input-btn" type="button">  
-      <i class="anticon anticon-up"></i>
-    </button>
-    <button class="input-btn" type="button">  
-      <i class="anticon anticon-down"></i>
-    </button>
-  </div>
-</div>
-````
diff --git a/components/form/demo/sizing.md b/components/form/demo/sizing.md
deleted file mode 100644
index 0bbdaffc00..0000000000
--- a/components/form/demo/sizing.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Sizing options
-
-- order: 10
-
-关于尺寸，我们提供大、中、小三种尺寸，默认为中尺寸。
-
-待续...
-
----
-
-````html
-<h4>input</h4>
-<!-- 大尺寸 -->
-<input class="ant-input ant-input-lg" type="text" id="userName" placeholder="请输入"/>
-<br>
-<!-- 默认尺寸 -->
-<input class="ant-input" type="text" id="userName" placeholder="请输入"/>
-<br>
-<!-- 小尺寸 -->
-<input class="ant-input ant-input-sm" type="text" id="userName" placeholder="请输入"/>
-
-<h4>input-group</h4>
-<!-- 大尺寸 -->
-<div class="ant-input-group ant-input-group-lg">
-  <input type="text" class="ant-input" placeholder="Search for...">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
-  </div>
-</div>
-
-<br>
-<!-- 默认尺寸 -->
-<div class="ant-input-group">
-  <input type="text" class="ant-input" placeholder="Search for...">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
-  </div>
-</div>
-
-<br>
-<!-- 小尺寸 -->
-<div class="ant-input-group ant-input-group-sm">
-  <input type="text" class="ant-input" placeholder="Search for...">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
-  </div>
-</div>
-
-<h4>form-item</h4>
-故事未完待续...
-
-````
diff --git a/components/form/demo/static-control.md b/components/form/demo/static-control.md
deleted file mode 100644
index c49d8fb99b..0000000000
--- a/components/form/demo/static-control.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Static control
-
-- order: 5
-
-静态文本表单控件：将一行静态文本和 label 标签置于同一行。
-
-为 `<p>` 标签添加 `.ant-form-text` 类即可。
-
----
-
-````html
-<form class="ant-form-horizontal">
-  <div class="ant-form-item">
-    <label for="userName" class="col-6">Username</label>
-    <div class="col-18">
-      <p class="ant-form-text">Ant</p>
-    </div>
-  </div>
-  <div class="ant-form-item">
-    <label for="password" class="col-6">Password</label>
-    <div class="col-18">
-      <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
-   </div>
-  </div>
-  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
-</form>
-````
diff --git a/style/components/form.less b/style/components/form.less
index 3c9d31a7cb..911c1b2150 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -2,48 +2,43 @@
 
 .reset-form();
 
-label[required]:before {
-  position: absolute;
-  display: inline-block;
-  content: "*";
-  color: @label-required-color;
-  font-family: SimSun;
-  font-size: 12px;
-  .translate3d(-10px; 0; 0);
+label {
+  position: relative;
+  &[required]:before {
+    position: absolute;
+    display: inline-block;
+    left: ~"-5px \9"; // ie8-9
+    content: "*";
+    color: @label-required-color;
+    font-family: SimSun;
+    font-size: 12px;
+    .translate3d(-10px; 0; 0);
+  }
+
+  > .@{iconfont-css-prefix} {
+    vertical-align: top;
+    font-size: 12px;
+  }
 }
 
-// Form groups
-// You should vrap labels and controls in .@{css-prefix}form-item for optimum spacing
+// Form items
+// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
 .@{css-prefix}form-item {
-  margin-bottom: 20px;
+  margin-bottom: @form-item-margin-bottom;
+
+  label {
+    color: @label-color;
+    text-align: right;
+    padding-right: 8px;
+  }
 }
 
 // Input styles
-// Shared size and type resets for form controls. Apply `.form-control` to any
-// of the following form controls:
-//
-// select
-// textarea
-// input[type="text"]
-// input[type="password"]
-// input[type="datetime"]
-// input[type="datetime-local"]
-// input[type="date"]
-// input[type="month"]
-// input[type="time"]
-// input[type="week"]
-// input[type="number"]
-// input[type="email"]
-// input[type="url"]
-// input[type="search"]
-// input[type="tel"]
-// input[type="color"]
 .@{css-prefix}input {
   .input;
 }
 
 //== Input type: with extra icon
-// TODO: sizing options
 .has-feedback {
   .input-with-icon();
 }
@@ -53,7 +48,34 @@ label[required]:before {
   .input-group(~"@{css-prefix}input");
 }
 
-// Other form controls
+// 表单下的输入框尺寸唯一: 大尺寸
+form {
+  .@{css-prefix}input {
+    height: @input-height-lg;
+    font-size: 12px;
+    padding: @input-padding-horizontal;
+  }
+  .has-feedback {
+    .@{iconfont-css-prefix} {
+      .square(@input-height-lg);
+      line-height: @input-height-lg;
+    }
+  }
+
+  .@{css-prefix}input-group > .@{css-prefix}input,
+  .@{css-prefix}input-group > .@{css-prefix}input-group-addon,
+  .@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn {
+    .input-lg();
+  }
+  
+  // input[type=file]
+  .@{css-prefix}upload {
+    height: 32px;
+    font-size: 12px;
+    padding: 7px;
+  }
+}
+
 // Radio & Checkbox
 .@{css-prefix}radio,
 .@{css-prefix}checkbox {
@@ -61,10 +83,11 @@ label[required]:before {
   display: block;
   margin-top: 10px;
   margin-bottom: 10px;
+  height: @input-height-lg;
 
   label {
     min-height: @line-height-computed;
-    padding-left: 20px;
+    padding: 7px 0 7px 20px;
     margin-bottom: 0;
     font-weight: normal;
     cursor: pointer;
@@ -81,7 +104,7 @@ label[required]:before {
 
 .@{css-prefix}radio + .@{css-prefix}radio,
 .@{css-prefix}checkbox + .@{css-prefix}checkbox {
-  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+  margin-top: -5px;
 }
 
 // Radios and checkboxes on same line
@@ -89,22 +112,15 @@ label[required]:before {
 .@{css-prefix}checkbox-inline {
   position: relative;
   display: inline-block;
-  padding-left: 20px;
+  padding: 7px 20px;
+  padding-right: 0!important;
   margin-bottom: 0;
+  margin-right: 10px;
   vertical-align: middle;
   font-weight: normal;
   cursor: pointer;
 }
-.@{css-prefix}radio-inline + .@{css-prefix}radio-inline,
-.@{css-prefix}checkbox-inline + .@{css-prefix}checkbox-inline {
-  margin-top: 0;
-  margin-left: 10px; // space out consecutive inline controls
-}
 
-// Apply same disabled cursor tweak as for inputs
-// Some special care is needed because <label>s don't inherit their parent's `cursor`.
-//
-// Note: Neither radios nor checkboxes can be readonly.
 input[type="radio"],
 input[type="checkbox"] {
   &[disabled],
@@ -145,10 +161,8 @@ input[type="checkbox"] {
   .@{css-prefix}checkbox-inline {
     margin-top: 0;
     margin-bottom: 0;
-    padding-top: (@input-padding-vertical-base + 1); // Default padding plus a border
   }
-  // Account for padding we're adding to ensure the alignment and of help text
-  // and other content below items
+
   .@{css-prefix}radio,
   .@{css-prefix}checkbox {
     min-height: (@line-height-computed + (@input-padding-vertical-base + 1));
@@ -157,18 +171,24 @@ input[type="checkbox"] {
 
 //== Inline Form
 // Attention: Inline form does only apply to within viewports that are at least 768px wide
+// TODO: 用 float 代替 inline-block
 .@{css-prefix}form-inline {
+  &:extend(.clearfix all);
   @media (min-width: @screen-sm-min) {
     .@{css-prefix}form-item {
-      display: inline-block;
+      float: left;
       margin-bottom: 0;
       vertical-align: middle;
+      margin-right: 10px;
+
+      label {
+        padding-right: 0;
+      }
     }
 
-    // In navbar-form, allow folks to *not* use `.@{css-prefix}form-item`
     .@{css-prefix}input {
       display: inline-block;
-      width: auto; // Prevent labels from stacking above inputs in `.@{css-prefix}form-item`
+      width: auto;
       vertical-align: middle;
     }
 
@@ -196,24 +216,35 @@ input[type="checkbox"] {
       position: relative;
       margin-left: 0;
     }
+  }
+}
 
+.@{css-prefix}form-horizontal, .@{css-prefix}form-inline {
+  label {
+    padding-top: 7px;
+    padding-bottom: 7px;
   }
 }
 
-.@{css-prefix}form-text {
+.@{css-prefix}form-text, .@{css-prefix}form-split {
   // min-height: (@line-height-computed + @font-size-base);
   margin: 0!important;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  font-size: 12px;
+  height: @input-height-lg;
+}
 
-  &.@{css-prefix}input-lg,
-  &.@{css-prefix}input-sm {
-    padding-left: 0;
-    padding-right: 0;
-  }
+.@{css-prefix}form-split {
+  text-align: center;
 }
 
 // Validation state
 .has-success {
-  .form-control-validation(@success-color; @success-color;);
+  .form-control-validation(@success-color; @input-hover-border-color;);
+  .@{css-prefix}input {
+    border-color: @input-border-color;
+  }
 }
 .has-warning {
   .form-control-validation(@warning-color; @warning-color;);
@@ -223,5 +254,6 @@ input[type="checkbox"] {
 }
 .@{css-prefix}form-explain {
   display: block;
-  margin-bottom: 10px;
+  font-size: 12px;
 }
+
diff --git a/style/components/index.less b/style/components/index.less
index d0b0adcf14..5729dcb2f9 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -14,3 +14,4 @@
 @import "steps";
 @import "breadcrumb";
 @import "inputNumber";
+@import "typography";
diff --git a/style/components/typography.less b/style/components/typography.less
index d0a56dbdf0..e7a835f45c 100644
--- a/style/components/typography.less
+++ b/style/components/typography.less
@@ -1,3 +1,12 @@
 //== Typography
 
-//** Headings: h1 h2 h3 h4 h5 h6
\ No newline at end of file
+//** Headings: h1 h2 h3 h4 h5 h6
+
+
+.pdrg-8 {
+	padding-right: 8px;
+}
+
+.pdlf-8 {
+	padding-left: 8px;
+}
\ No newline at end of file
diff --git a/style/core/base.less b/style/core/base.less
index b131e1dc54..8063603f32 100644
--- a/style/core/base.less
+++ b/style/core/base.less
@@ -1,9 +1,15 @@
 @import "normalize";
 
 * {
+  box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
 }
 
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 // HTML & Body reset
 html, body {
   .square(100%);
diff --git a/style/mixins/form.less b/style/mixins/form.less
index bbd6401e44..1d32480ae0 100644
--- a/style/mixins/form.less
+++ b/style/mixins/form.less
@@ -1,28 +1,25 @@
-// style the form controls with different validation states
 .form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
-  // Color the label and help text
-  .@{css-prefix}form-explain {
+  .@{css-prefix}form-explain, .@{css-prefix}form-split {
     color: @text-color;
   }
-  // Set the border and box shadow on specific inputs to match
+  // 输入框的不同校验状态
   .@{css-prefix}input {
     border-color: @border-color;
     &:focus {
-      @color-rgba: rgba(red(@border-color), green(@border-color), blue(@border-color), .8);
       border-color: @border-color;
-      box-shadow: 0 0 3px @color-rgba;
+      box-shadow: 0 0 3px tint(@border-color, 20%);
     }
     &:not([disabled]):hover {
       border-color: @border-color;
     }
   }
-  // Set validation states also for addons
+
   .@{css-prefix}input-group-addon {
     color: @text-color;
     border-color: @border-color;
     background-color: @background-color;
   }
-  // Optional feedback icon
+
   .has-feedback {
     color: @text-color;
   }
@@ -30,7 +27,7 @@
 
 // Reset form styles
 // -----------------------------
-// From Bootstrap framework
+// Based on Bootstrap framework
 .reset-form() {
   fieldset {
     padding: 0;
@@ -53,9 +50,8 @@
 
   label {
     display: inline-block;
-    margin-bottom: 5px;
+    font-size: @font-size-base;
     max-width: 100%; 
-    font-weight: bold;
   }
 
   input[type="search"] {
@@ -65,7 +61,7 @@
   // Position radios and checkboxes better
   input[type="radio"],
   input[type="checkbox"] {
-    margin: 4px 0 0;
+    margin: 2px 0 0;
     margin-top: 1px \9; // IE8-9
     line-height: normal;
   }
diff --git a/style/mixins/input.less b/style/mixins/input.less
index c09a1537a0..6f3ebacfe3 100644
--- a/style/mixins/input.less
+++ b/style/mixins/input.less
@@ -1,3 +1,4 @@
+// 待删除
 .ant-input(){
   position: relative;
   display: inline-block;
@@ -22,14 +23,16 @@
   }
 }
 
-// common mixins for input
+// size mixins for input
 .input-lg() {
   padding: @input-padding-lg;
+  height: @input-height-lg;
   font-size: @input-font-size-lg;
 }
 
 .input-sm() {
   padding: @input-padding-vertical-sm @input-padding-horizontal;
+  height: @input-height-sm;
   font-size: @input-font-size-sm;
 }
 
@@ -38,16 +41,17 @@
   position: relative;
   display: block;
   padding: @input-padding-vertical-base @input-padding-horizontal;
+  margin-right: 8px;
   width: 100%;
+  height: @input-height-base;
   font-size: @input-font-size;
   line-height: @line-height-base;
   color: @input-color;
   background-color: @input-bg;
   background-image: none;
   border: 1px solid @input-border-color;
-  border-radius: @input-border-radius;
-  // Reset placeholder
-  .placeholder();
+  border-radius: @border-radius-base;
+  .placeholder(); // Reset placeholder
   .transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
 
   &:hover {
@@ -55,10 +59,9 @@
   }
 
   &:focus {
-    @color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8);
     border-color: @input-focus-border-color;
     outline: 0;
-    box-shadow: 0 0 3px @color-rgba;
+    box-shadow: 0 0 3px tint(@input-focus-border-color, 20%);
   }
 
   &[disabled],
@@ -160,7 +163,7 @@
     text-align: center;
     background-color: #eee;
     border: 1px solid @input-border-color;
-    border-radius: @input-border-radius;
+    border-radius: @border-radius-base;
 
     input[type="radio"],
     input[type="checkbox"] {
@@ -170,9 +173,17 @@
 
   .@{inputBtn} {
     .btn();
-    .button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @input-border-radius);
+    .button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @border-radius-base);
     .button-variant(@input-color; #eee; @input-border-color);
 
+    &:hover {
+      .button-color(lighten(@input-color, 30%, 'relative'); #eee; @input-border-color);
+    }
+    &:active,
+    &.active {
+      .button-color(lighten(@input-color, 20%, 'relative'); #eee; @input-border-color);
+    }
+
     .@{iconfont-css-prefix} {
       line-height: 1;
       margin-left: 8px;
@@ -202,36 +213,6 @@
     }
   }
 
-  &-btn-vertical {
-    position: relative;
-    > .@{inputBtn} {
-      display: block;
-      float: none;
-      width: 22px;
-      height: 14px;
-      margin-left: -1px;
-      border-radius: 0;
-
-      &:first-child {
-        border-top-right-radius: 6px;
-      }
-
-      &:last-child {
-        margin-top: -1px;
-        height: 15px;
-        border-bottom-right-radius: 6px;
-      }
-    }
-
-    .@{iconfont-css-prefix} {
-      position: absolute;
-      top: 0;
-      left: 4px;
-      margin: 0!important;
-      font-size: 12px!important;
-    }
-  }
-
   // Reset rounded corners
   .@{inputClass}:first-child,
   &-addon:first-child,
@@ -270,5 +251,7 @@
     .input-sm();
   }
 
-  // TODO: input-group-btn-vertical: different button size
+  &-sm > &-btn > .@{inputBtn} {
+    margin-top: ~"-2px \9";
+  }
 }
diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less
index 0211fa3214..a1ed8d972c 100644
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@@ -16,7 +16,7 @@
 @font-size-base         : 12px;
 @line-height-base       : 1.5;
 @line-height-computed:    floor((@font-size-base * @line-height-base));
-
+@border-radius-base     : 6px;
 
 // ICONFONT
 @iconfont-css-prefix    : anticon;
@@ -84,9 +84,6 @@
 @btn-circle-size-lg     : 32px;
 @btn-circle-size-sm     : 22px;
 
-// Border
-@border-radius-base     : 6px;
-
 // Media queries breakpoints
 // Extra small screen / phone
 @screen-xs              : 480px;
@@ -122,10 +119,9 @@
 // Legend
 @legend-color                : #222;
 @legend-border-color         : #e5e5e5;
-
 // Label
-@label-required-color        : #F44336;
-
+@label-required-color        : #F60;
+@label-color: #999;
 // Input
 @input-height-base: 28px;
 @input-height-lg: 32px;
@@ -141,8 +137,6 @@
 @input-border-color          : #d9d9d9;
 @input-bg                    : #fff;
 
-@input-border-radius         : @border-radius-base;
-
 @input-font-size-lg          : 14px;
 @input-font-size             : @font-size-base;
 @input-font-size-sm          : @font-size-base;
@@ -150,3 +144,5 @@
 @input-hover-border-color    : #23c0fa;
 @input-focus-border-color    : #2db7f5;
 @input-disabled-bg           : #f3f5f7;
+
+@form-item-margin-bottom     : 24px;
\ No newline at end of file