add form styles

style/components/form.less

+@import "../mixins/index";
+
+.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);
+}
+
+// Form groups
+// You should vrap labels and controls in .@{css-prefix}form-item for optimum spacing
+.@{css-prefix}form-item {
+  margin-bottom: 20px;
+}
+
+// Input styles
+//== Basic
+.@{css-prefix}input {
+  .input;
+}
+
+//== Input type: with extra icon
+// TODO: sizing options
+.has-feedback {
+  .input-with-icon();
+}
+
+//== Style for input-group
+.@{css-prefix}input-group {
+  .input-group(~"@{css-prefix}input");
+}
+
+// Form layout
+//== Horizontal Form
+.@{css-prefix}form-horizontal {
+  .@{css-prefix}form-item {
+    .make-row;
+  }
+}
+
+//== Inline Form
+// Attention: Inline form does only apply to within viewports that are at least 768px wide
+.@{css-prefix}form-inline {
+  @media (min-width: @screen-sm-min) {
+    .@{css-prefix}form-item {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // 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`
+      vertical-align: middle;
+    }
+
+    .has-feedback {
+      display: inline-block;
+    }
+  }
+}
+
+// Validation state
+.has-success {
+  .form-control-validation(@success-color; @success-color;);
+}
+.has-warning {
+  .form-control-validation(@warning-color; @warning-color;);
+}
+.has-error {
+  .form-control-validation(@error-color; @error-color;);
+}
+.@{css-prefix}form-explain {
+  display: block;
+  margin-bottom: 10px;
+}

style/mixins/form.less

+// 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 {
+    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;
+    }
+    &: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;
+  }
+}
+
+// Reset form styles
+// -----------------------------
+// From Bootstrap framework
+.reset-form() {
+  fieldset {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    min-width: 0;
+  }
+
+  legend {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin-bottom: 20px;
+    font-size: (@font-size-base * 1.5);
+    line-height: inherit;
+    color: @legend-color;
+    border: 0;
+    border-bottom: 1px solid @legend-border-color;
+  }
+
+  label {
+    display: inline-block;
+    margin-bottom: 5px;
+    max-width: 100%; 
+    font-weight: bold;
+  }
+
+  input[type="search"] {
+    .box-sizing(border-box);
+  }
+
+  // Position radios and checkboxes better
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin: 4px 0 0;
+    margin-top: 1px \9; // IE8-9
+    line-height: normal;
+  }
+
+  input[type="file"] {
+    display: block;
+  }
+
+  // Make range inputs behave like textual form controls
+  input[type="range"] {
+    display: block;
+    width: 100%;
+  }
+
+  // Make multiple select elements height not fixed
+  select[multiple],
+  select[size] {
+    height: auto;
+  }
+
+  // Focus for file, radio, and checkbox
+  input[type="file"]:focus,
+  input[type="radio"]:focus,
+  input[type="checkbox"]:focus {
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+
+  // Adjust output element
+  output {
+    display: block;
+    padding-top: 15px;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    color: @input-color;
+  }
+}

style/mixins/index.less

@@ -12,6 +12,7 @@
 // for common elements
 @import "button.less";
 @import "input.less";
+@import "form.less";
 
 // Layout
 @import "grid.less";

style/mixins/input.less

@@ -22,6 +22,17 @@
   }
 }
 
+// common mixins for input
+.input-lg() {
+  padding: @input-padding-lg;
+  font-size: @input-font-size-lg;
+}
+
+.input-sm() {
+  padding: @input-padding-vertical-sm @input-padding-horizontal;
+  font-size: @input-font-size-sm;
+}
+
 // Basic style for input
 .input() {
   position: relative;
@@ -69,12 +80,194 @@
 
   // Size
   &-lg {
-    padding: @input-padding-lg;
-    font-size: @input-font-size-lg;
+    .input-lg();
   }
 
   &-sm {
-    padding: @input-padding-vertical-sm @input-padding-horizontal;
-    font-size: @input-font-size-sm;
+    .input-sm();
+  }
+}
+
+// Input with icons, you can define @height if you wish to change the input size
+.input-with-icon(@height: @input-height-base) {
+  position: relative;
+
+  .@{iconfont-css-prefix} {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+    .square(@height);
+    font-size: 14px;
+    line-height: @height;
+    text-align: center;
+    pointer-events: none;
+  }
+}
+
+// Input-group
+.input-group(@inputClass) {
+  // define the button style for input-group
+  @inputBtn: input-btn;
+
+  position: relative;
+  display: table;
+  border-collapse: separate;
+
+  // Undo padding and float of grid classes
+  &[class*="col-"] {
+    float: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &-addon,
+  &-btn,
+  &-btn-vertical,
+  .@{inputClass} {
+    display: table-cell;
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
   }
+
+  &-addon,
+  &-btn,
+  &-btn-vertical {
+    width: 1%;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  .@{inputClass} {
+    position: relative;
+    z-index: 2;
+    float: left;
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  &-addon {
+    padding: @input-padding-vertical-base @input-padding-horizontal;
+    font-size: @font-size-base;
+    font-weight: normal;
+    line-height: 1;
+    color: @input-color;
+    text-align: center;
+    background-color: #eee;
+    border: 1px solid @input-border-color;
+    border-radius: @input-border-radius;
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      margin-top: 0;
+    }
+  }
+
+  .@{inputBtn} {
+    .btn();
+    .button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @input-border-radius);
+    .button-variant(@input-color; #eee; @input-border-color);
+
+    .@{iconfont-css-prefix} {
+      margin-left: 8px;
+    }
+  }
+
+  &-btn {
+    position: relative;
+  
+    > .@{inputBtn} {
+      position: relative;
+      + .@{inputBtn} {
+        margin-left: -1px;
+      }
+    }
+
+    // Negative margin to only have a 1px border between the two
+    &:first-child {
+      > .@{inputBtn} {
+        margin-right: -1px;
+      }
+    }
+    &:last-child {
+      > .@{inputBtn} {
+        margin-left: -1px;
+      }
+    }
+  }
+
+  &-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,
+  &-btn:first-child > .@{inputBtn},
+  &-btn:last-child > .@{inputBtn}:not(:last-child):not(.dropdown-toggle) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+  
+  &-addon:first-child {
+    border-right: 0;
+  }
+  
+  .@{inputClass}:last-child,
+  &-addon:last-child,
+  &-btn:last-child > .@{inputBtn},
+  &-btn:first-child > .@{inputBtn}:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+  
+  &-addon:last-child {
+    border-left: 0;
+  }
+
+  // Sizing options
+  &-lg > .@{inputClass},
+  &-lg > &-addon,
+  &-lg > &-btn > .@{inputBtn} {
+    .input-lg();
+  }
+
+  &-sm > .@{inputClass},
+  &-sm > &-addon,
+  &-sm > &-btn > .@{inputBtn} {
+    .input-sm();
+  }
+  &-sm > &-btn > .@{inputBtn} {
+    top: -2px;
+  }
+
+  // TODO: input-group-btn-vertical: different button size
 }

style/themes/default/custom.less

-// prefix class
+// Prefix classname
 @css-prefix             : ant-;
 
-// color
+// Color
 @primary-color          : #2db7f5;
+@success-color          : #87d068;
+@error-color            : #ff6600;
+@warning-color          : #fac450;
 
 // ------ Base & Require ------
 @body-background        : #fff;
@@ -46,7 +49,7 @@
 @ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
 @ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
 
-// BUTTONS
+// Buttons
 @btn-font-weight        : normal;
 
 @btn-primary-color      : #fff;
@@ -118,6 +121,9 @@
 @legend-color                : #222;
 @legend-border-color         : #e5e5e5;
 
+// Label
+@label-required-color        : #F44336;
+
 // Input
 @input-height-base: 28px;
 @input-height-lg: 32px;