add Input component

add Input component

src/styles/components/index.less

@@ -23,4 +23,5 @@
 @import "select";
 @import "select-dropdown";
 @import "tooltip";
-@import "poptip";
+@import "poptip";
+@import "input";

src/styles/components/input.less

@@ -0,0 +1,35 @@
+@input-prefix-cls: ~"@{css-prefix}input";
+
+.@{input-prefix-cls} {
+    .input;
+    &-wrapper{
+        display: inline-block;
+        width: 100%;
+        position: relative;
+    }
+    &-icon {
+        width: 28px;
+        height: 100%;
+        font-size: 16px;
+        text-align: center;
+        color: @subsidiary-color;
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        &:after{
+            content: '';
+            display: inline-block;
+            width: 0;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+
+    &-icon + &{
+        padding-right: 28px;
+    }
+}
+
+.@{input-prefix-cls}-group{
+    .input-group(~"@{input-prefix-cls}");
+}

src/styles/mixins/input.less

@@ -74,4 +74,136 @@
     &-small {
         .input-small();
     }
-}
+}
+
+.input-group(@inputClass) {
+    display: table;
+    width: 100%;
+    border-collapse: separate;
+    position: relative;
+
+    // Undo padding and float of grid classes
+    &[class*="col-"] {
+        float: none;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    > [class*="col-"] {
+        padding-right: 8px;
+    }
+
+    &-prepend,
+    &-append,
+    > .@{inputClass} {
+        display: table-cell;
+
+        &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+    }
+
+    &-prepend .@{css-prefix}btn,
+    &-append .@{css-prefix}btn
+    {
+        border-color: transparent;
+        background-color: transparent;
+        color: inherit;
+        margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);
+    }
+
+    &-prepend,
+    &-append
+    {
+        width: 1px; // To make addon/wrap as small as possible
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+    .@{inputClass} {
+        width: 100%;
+        float: left;
+        margin-bottom: 0;
+        position: relative;
+        z-index: 2;
+    }
+
+    &-prepend,
+    &-append
+    {
+        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: @border-radius-base;
+
+        // Reset Select's style in addon
+        .@{css-prefix}select {
+            margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);  // lesshint spaceAroundOperator: false
+
+            &-selection {
+                background-color: inherit;
+                margin: -1px;
+                border: 1px solid transparent;
+            }
+
+            &-visible .@{css-prefix}select-selection{
+                box-shadow: none;
+            }
+        }
+    }
+
+    // Reset rounded corners
+    > span > .@{inputClass}:first-child,
+    > .@{inputClass}:first-child,
+    &-prepend
+    {
+        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+
+        // Reset Select's style in addon
+        .@{css-prefix}-select .@{css-prefix}-select-selection {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    &-prepend {
+        border-right: 0;
+    }
+    &-append {
+        border-left: 0;
+    }
+
+    > .@{inputClass}:last-child,
+    &-append
+    {
+        border-bottom-left-radius: 0 !important;
+        border-top-left-radius: 0 !important;
+
+        // Reset Select's style in addon
+        .@{css-prefix}-select .@{css-prefix}-select-selection {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+    }
+
+    // Sizing options
+    &-large .@{inputClass},
+    &-large > &-prepend,
+    &-large > &-append
+    {
+        .input-large();
+    }
+
+    &-small .@{inputClass},
+    &-small > &-prepend,
+    &-small > &-append
+    {
+        .input-small();
+    }
+}

src/styles/themes/default/custom.less

@@ -12,6 +12,7 @@
 @link-active-color      : shade(@link-color, 5%);
 @selected-color         : fade(@primary-color, 90%);
 @tooltip-color          : #fff;
+@subsidiary-color       : #9ea7b4;
 
 // Base
 @body-background        : #fff;
@@ -84,8 +85,8 @@
 
 // Input
 @input-height-base           : 28px;
-@input-height-large          : 32px;
-@input-height-small          : 22px;
+@input-height-large          : 36px;
+@input-height-small          : 24px;
 
 @input-padding-horizontal    : 7px;
 @input-padding-vertical-base : 4px;