diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md
index 8d695fc1a8..8e6720bc50 100644
--- a/components/button/demo/button-group.md
+++ b/components/button/demo/button-group.md
@@ -32,12 +32,12 @@
带图标按钮组合
@@ -56,7 +56,7 @@
尺寸
diff --git a/components/iconfont/index.md b/components/iconfont/index.md
index 58d8d993e9..e9a5671628 100644
--- a/components/iconfont/index.md
+++ b/components/iconfont/index.md
@@ -79,36 +79,36 @@
caret-circleo-left
-
- angle-circle-right
+
+ circle-right
-
- angle-circle-left
+
+ circle-left
-
- angle-circleo-right
+
+ circleo-right
-
- angle-circleo-left
+
+ circleo-left
-
- angle-double-right
+
+ double-right
-
- angle-double-left
+
+ double-left
-
- angle-verticle-right
+
+ verticle-right
-
- angle-verticle-left
+
+ verticle-left
diff --git a/style/core/iconfont.less b/style/core/iconfont.less
index 88dd28c702..29bd646d1f 100644
--- a/style/core/iconfont.less
+++ b/style/core/iconfont.less
@@ -49,18 +49,18 @@
.@{iconfont-css-prefix}-caret-circleo-right:before {content:"\e60e";}
.@{iconfont-css-prefix}-caret-circleo-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-caret-circleo-left:before {content:"\e60e";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-circle-right:before {content:"\e602";}
-.@{iconfont-css-prefix}-angle-circle-left {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-circle-left:before {content:"\e602";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-circleo-right:before {content:"\e603";}
-.@{iconfont-css-prefix}-angle-circleo-left {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-circleo-left:before {content:"\e603";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-double-right:before {content:"\e604";}
-.@{iconfont-css-prefix}-angle-double-left {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-double-left:before {content:"\e604";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-verticle-right:before {content:"\e605";}
-.@{iconfont-css-prefix}-angle-verticle-left {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-verticle-left:before {content:"\e605";.rotate(180deg);}
+.@{iconfont-css-prefix}-circle-right:before {content:"\e602";}
+.@{iconfont-css-prefix}-circle-left {.ie-rotate(2);}
+.@{iconfont-css-prefix}-circle-left:before {content:"\e602";.rotate(180deg);}
+.@{iconfont-css-prefix}-circleo-right:before {content:"\e603";}
+.@{iconfont-css-prefix}-circleo-left {.ie-rotate(2);}
+.@{iconfont-css-prefix}-circleo-left:before {content:"\e603";.rotate(180deg);}
+.@{iconfont-css-prefix}-double-right:before {content:"\e604";}
+.@{iconfont-css-prefix}-double-left {.ie-rotate(2);}
+.@{iconfont-css-prefix}-double-left:before {content:"\e604";.rotate(180deg);}
+.@{iconfont-css-prefix}-verticle-right:before {content:"\e605";}
+.@{iconfont-css-prefix}-verticle-left {.ie-rotate(2);}
+.@{iconfont-css-prefix}-verticle-left:before {content:"\e605";.rotate(180deg);}
.@{iconfont-css-prefix}-forward:before {content:"\e630";}
.@{iconfont-css-prefix}-backward {.ie-rotate(2);}
.@{iconfont-css-prefix}-backward:before {content:"\e630";.rotate(180deg);}
diff --git a/style/mixins/index.less b/style/mixins/index.less
index e441866616..9db3fb513f 100644
--- a/style/mixins/index.less
+++ b/style/mixins/index.less
@@ -11,6 +11,7 @@
// for common elements
@import "button.less";
+@import "input.less";
// Layout
@import "grid.less";
diff --git a/style/mixins/input.less b/style/mixins/input.less
index ff8ac39168..919129f504 100644
--- a/style/mixins/input.less
+++ b/style/mixins/input.less
@@ -20,3 +20,59 @@
box-shadow: 0 0 3px #23c0fa;
}
}
+
+.input() {
+ position: relative;
+ display: block;
+ padding: @input-padding-vertical-base @input-padding-horizontal;
+ width: 100%;
+ 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();
+ .transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
+
+ &:not([disabled]):hover {
+ border-color: @input-hover-border-color;
+ }
+
+ &: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;
+ }
+
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ background-color: @input-disabled-bg;
+ opacity: 1;
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: @cursor-disabled;
+ }
+
+ // Reset height for `textarea`s
+ textarea& {
+ height: auto;
+ }
+
+ // Size
+ &-lg {
+ padding: @input-padding-lg;
+ font-size: @input-font-size-lg;
+ }
+
+ &-sm {
+ padding: @input-padding-vertical-sm @input-padding-horizontal;
+ font-size: @input-font-size-sm;
+ }
+}
\ No newline at end of file
diff --git a/style/mixins/vendor-prefixes.less b/style/mixins/vendor-prefixes.less
index afd3331c31..6551827519 100644
--- a/style/mixins/vendor-prefixes.less
+++ b/style/mixins/vendor-prefixes.less
@@ -98,7 +98,7 @@
}
// Placeholder text
-.placeholder(@color: @input-color-placeholder) {
+.placeholder(@color: @input-placeholder-color) {
// Firefox
&::-moz-placeholder {
color: @color;
diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less
index 8f31131e8b..a6cea2dbe6 100644
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@@ -110,4 +110,35 @@
// Container sizes
@container-sm : (720px + @grid-gutter-width);
@container-md : (940px + @grid-gutter-width);
-@container-lg : (1140px + @grid-gutter-width);
\ No newline at end of file
+@container-lg : (1140px + @grid-gutter-width);
+
+// Form
+// --------------------------------
+// Legend
+@legend-color : #222;
+@legend-border-color : #e5e5e5;
+
+// Input
+@input-height-base: 28px;
+@input-height-lg: 32px;
+@input-height-sm: 22px;
+
+@input-padding-horizontal : 7px;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-sm : 1px;
+@input-padding-lg : 4px 7px 5px;
+
+@input-placeholder-color : #ccc;
+@input-color : #666;
+@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;
+
+@input-hover-border-color : #23c0fa;
+@input-focus-border-color : #2db7f5;
+@input-disabled-bg : #f3f5f7;
\ No newline at end of file