调整steps的样式

components/steps/demo/custom-icon.md

-# 自定义图标步骤条
-
-- order: 2
-
-通过设置`Steps.Step`的`icon`属性，可以启用自定义图标。
-
----
-
-<style>
-.my-step-icon {
-  width: 35px;
-  height: 35px;
-  font-size: 35px;
-  line-height: 1;
-  position: relative;
-  top: -9px;
-}
-.my-step-icon > img {
-  width: 45px;
-  height: 45px;
-}
-</style>
-
-````jsx
-var Steps = antd.Steps;
-var Step = Steps.Step;
-var container = document.getElementById('components-steps-demo-custom-icon');
-
-
-React.render(<Steps>
-  <Step status='finish' title='步骤1' icon={<div className='my-step-icon'><span className='anticon anticon-cloud'></span></div>}></Step>
-  <Step status='process' title='步骤2' icon={<div className='my-step-icon'><span className='anticon anticon-apple'></span></div>}></Step>
-  <Step status='wait' title='步骤3' icon={<div className='my-step-icon'><span className='anticon anticon-github'></span></div>}></Step>
-</Steps>, container);
-````

components/steps/demo/icon.md

+# 带ICON图标的步骤条
+
+- order: 2
+
+通过设置`Steps.Step`的`icon`属性，可以启用自定义图标。
+
+---
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-icon');
+
+React.render(<Steps>
+  <Step status='finish' title='步骤1' icon='cloud'></Step>
+  <Step status='process' title='步骤2' icon='apple'></Step>
+  <Step status='wait' title='步骤3' icon='github'></Step>
+</Steps>, container);
+````

components/steps/index.jsx

@@ -7,13 +7,15 @@ var AntSteps = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-steps',
+      iconPrefix: 'ant',
       size: 'default',
       maxDescriptionWidth: 100
     };
   },
   render() {
     return (<Steps size={this.props.size}
-                   maxDescriptionWidth ={this.props.maxDescriptionWidth}
+                   iconPrefix={this.props.iconPrefix}
+                   maxDescriptionWidth={this.props.maxDescriptionWidth}
                    prefixCls={this.props.prefixCls}>
       {this.props.children}
     </Steps>);

package.json

@@ -21,7 +21,7 @@
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.0.0",
-    "rc-steps": "~1.1.2",
+    "rc-steps": "~1.1.3",
     "rc-tabs": "~5.1.0",
     "rc-tooltip": "~2.2.3"
   },

style/components/steps.less

 @import "../mixins/index";
 @stepsPrefixClass: ~"@{css-prefix}steps";
 
-@active-color: #3fc7fa;
-@wait-color: #e9e9e9;
+@process-icon-color: #3fc7fa;
+@process-title-color: #666;
+@process-description-color: @process-title-color;
+@process-tail-color: #bcbcbc;
+@wait-icon-color: #bcbcbc;
+@wait-title-color: #999;
+@wait-description-color: @wait-title-color;
+@wait-tail-color: @wait-icon-color;
+@finish-icon-color: @process-icon-color;
+@finish-title-color: @wait-title-color;
+@finish-description-color: @finish-title-color;
+@finish-tail-color: @process-icon-color;
 
 .transition(@transition) {
   transition: @transition;
+  -webkit-transition: @transition;
+  -moz-transition: @transition;
 }
 
 .@{stepsPrefixClass} {
@@ -19,34 +31,56 @@
 
     &.@{stepsPrefixClass}-status-wait {
       .@{stepsPrefixClass}-head-inner {
-        border-color: @wait-color;
+        border-color: @wait-icon-color;
         background-color: #fff;
-
         > .@{stepsPrefixClass}-icon {
-          color: @wait-color;
+          color: @wait-icon-color;
         }
       }
+      .@{stepsPrefixClass}-title {
+        color: @wait-title-color;
+      }
+      .@{stepsPrefixClass}-description {
+        color: @wait-description-color;
+      }
+      .@{stepsPrefixClass}-tail > i {
+        background-color: @wait-tail-color;
+      }
     }
     &.@{stepsPrefixClass}-status-process {
       .@{stepsPrefixClass}-head-inner {
-        border-color: @active-color;
-        background-color: @active-color;
-
+        border-color: @process-icon-color;
+        background-color: @process-icon-color;
         > .@{stepsPrefixClass}-icon {
           color: #fff;
         }
       }
+      .@{stepsPrefixClass}-title {
+        color: @process-title-color;
+      }
+      .@{stepsPrefixClass}-description {
+        color: @process-description-color;
+      }
+      .@{stepsPrefixClass}-tail > i {
+        background-color: @process-tail-color;
+      }
     }
     &.@{stepsPrefixClass}-status-finish {
       .@{stepsPrefixClass}-head-inner {
-        border-color: @active-color;
+        border-color: @finish-icon-color;
         background-color: #fff;
         > .@{stepsPrefixClass}-icon {
-          color: @active-color;
+          color: @finish-icon-color;
         }
       }
       .@{stepsPrefixClass}-tail > i {
-        background-color: @active-color;
+        background-color: @finish-tail-color;
+      }
+      .@{stepsPrefixClass}-title {
+        color: @finish-title-color;
+      }
+      .@{stepsPrefixClass}-description {
+        color: @finish-description-color;
       }
     }
 
@@ -54,10 +88,13 @@
       .@{stepsPrefixClass}-head-inner {
         background: none;
         border: 0;
+        font-size: 20px;
+        width: auto;
+        height: auto;
       }
       &.@{stepsPrefixClass}-status-process {
-        .@{stepsPrefixClass}-title {
-          color: @active-color;
+        .@{stepsPrefixClass}-head-inner > .@{stepsPrefixClass}-icon {
+          color: @process-icon-color;
         }
       }
     }
@@ -75,14 +112,14 @@
 
   .@{stepsPrefixClass}-head-inner {
     display: block;
-    border:2px solid @wait-color;
+    border:2px solid @wait-icon-color;
     width: 24px;
     height: 24px;
     line-height: 22px;
     text-align: center;
     border-radius: 24px;
     font-size: 14px;
-    margin-right: 12px;
+    margin-right: 8px;
     .transition(background-color 0.1s ease);
     .transition(border-color 0.1s ease);
 
@@ -123,7 +160,7 @@
     padding:0 10px;
     > i {
       display: inline-block;
-      background: @wait-color;
+      background: @wait-tail-color;
       height: 2px;
       border-radius: 1px;
       width: 100%;
@@ -132,7 +169,7 @@
 
   &.@{stepsPrefixClass}-small {
     .@{stepsPrefixClass}-head-inner {
-      border:1px solid @wait-color;
+      border:1px solid @wait-icon-color;
       width: 18px;
       height: 18px;
       line-height: 18px;