Merge pull request #16 from ant-design/style

Style

components/button/demo/button-group.md

@@ -32,12 +32,12 @@
 <h4>带图标按钮组合 </h4>
 <div class="ant-btn-group">
   <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-angle-double-left"></span>
+  <span class="anticon anticon-double-left"></span>
   <span>后 退</span>
   </button>
   <button class="ant-btn ant-btn-primary">
   <span>前 进</span>
-  <span class="anticon anticon-angle-double-right"></span>
+  <span class="anticon anticon-double-right"></span>
   </button>
 </div>
 <div class="ant-btn-group">
@@ -56,7 +56,7 @@
   <button class="ant-btn ant-btn-ghost">4</button>
   <button class="ant-btn ant-btn-ghost">
   <span>前 进</span>
-  <span class="anticon anticon-angle-double-right"></span>
+  <span class="anticon anticon-double-right"></span>
   </button>
 </div>
 <h4>尺寸</h4>

components/iconfont/index.md

@@ -79,36 +79,36 @@
 		<span class="anticon-class">caret-circleo-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circle-right"></i>
+		<i class="anticon anticon-circle-right"></i>
-		<span class="anticon-class">angle-circle-right</span>
+		<span class="anticon-class">circle-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circle-left"></i>
+		<i class="anticon anticon-circle-left"></i>
-		<span class="anticon-class">angle-circle-left</span>
+		<span class="anticon-class">circle-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circleo-right"></i>
+		<i class="anticon anticon-circleo-right"></i>
-		<span class="anticon-class">angle-circleo-right</span>
+		<span class="anticon-class">circleo-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circleo-left"></i>
+		<i class="anticon anticon-circleo-left"></i>
-		<span class="anticon-class">angle-circleo-left</span>
+		<span class="anticon-class">circleo-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-double-right"></i>
+		<i class="anticon anticon-double-right"></i>
-		<span class="anticon-class">angle-double-right</span>
+		<span class="anticon-class">double-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-double-left"></i>
+		<i class="anticon anticon-double-left"></i>
-		<span class="anticon-class">angle-double-left</span>
+		<span class="anticon-class">double-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-verticle-right"></i>
+		<i class="anticon anticon-verticle-right"></i>
-		<span class="anticon-class">angle-verticle-right</span>
+		<span class="anticon-class">verticle-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-verticle-left"></i>
+		<i class="anticon anticon-verticle-left"></i>
-		<span class="anticon-class">angle-verticle-left</span>
+		<span class="anticon-class">verticle-left</span>
 	</li>
 	<li>
 		<i class="anticon anticon-forward"></i>

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}-circle-right:before   {content:"\e602";}
-.@{iconfont-css-prefix}-angle-circle-left           {.ie-rotate(2);}
+.@{iconfont-css-prefix}-circle-left           {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-circle-left:before    {content:"\e602";.rotate(180deg);}
+.@{iconfont-css-prefix}-circle-left:before    {content:"\e602";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-circleo-right:before  {content:"\e603";}
+.@{iconfont-css-prefix}-circleo-right:before  {content:"\e603";}
-.@{iconfont-css-prefix}-angle-circleo-left          {.ie-rotate(2);}
+.@{iconfont-css-prefix}-circleo-left          {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-circleo-left:before   {content:"\e603";.rotate(180deg);}
+.@{iconfont-css-prefix}-circleo-left:before   {content:"\e603";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-double-right:before   {content:"\e604";}
+.@{iconfont-css-prefix}-double-right:before   {content:"\e604";}
-.@{iconfont-css-prefix}-angle-double-left           {.ie-rotate(2);}
+.@{iconfont-css-prefix}-double-left           {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-double-left:before    {content:"\e604";.rotate(180deg);}
+.@{iconfont-css-prefix}-double-left:before    {content:"\e604";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-verticle-right:before {content:"\e605";}
+.@{iconfont-css-prefix}-verticle-right:before {content:"\e605";}
-.@{iconfont-css-prefix}-angle-verticle-left         {.ie-rotate(2);}
+.@{iconfont-css-prefix}-verticle-left         {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-verticle-left:before  {content:"\e605";.rotate(180deg);}
+.@{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);}

style/mixins/index.less

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

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;
+  }
+}

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;

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);
+@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;