add vertical steps

components/steps/demo/vertical-small.md

+# 竖直方向的小型步骤条
+
+- order: 5
+
+简单的竖直方向的小型步骤条。
+
+---
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-vertical-small');
+
+var steps = [{
+  status: 'finish',
+  title: '已完成',
+  description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'
+}, {
+  status: 'process',
+  title: '进行中',
+  description: '描述啊描述啊描述啊描述啊描述啊描述啊'
+}, {
+  status: 'wait',
+  title: '又一个待运行',
+  description: '描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊述啊描述描述述描述啊描述啊描述啊描述啊描述啊'
+}, {
+  status: 'wait',
+  title: '待运行',
+  description: '描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊描述啊'
+}].map(function(s, i) {
+  return (<Step
+    key={i}
+    status={s.status}
+    title={s.title}
+    description={s.description}></Step>
+  );
+});
+
+React.render(<Steps size='small' direction='vertical' maxDescriptionWidth='400'>{steps}</Steps>, container);
+````

components/steps/demo/vertical.md

@@ -2,7 +2,7 @@
 
 - order: 4
 
-简单的步骤条。
+简单的竖直方向的步骤条。
 
 ---
 
@@ -36,5 +36,5 @@ var steps = [{
   );
 });
 
-React.render(<Steps direction={'vertical'} maxDescriptionWidth={'300'}>{steps}</Steps>, container);
+React.render(<Steps direction='vertical' maxDescriptionWidth='400'>{steps}</Steps>, container);
 ````

components/steps/index.jsx

@@ -11,10 +11,11 @@ const AntSteps = React.createClass({
     };
   },
   render() {
+    let stepsCls = this.props.direction === 'vertical' ? (this.props.size === 'small' ? 'ant-steps-vertical-small ant-steps' : 'ant-steps-vertical ant-steps') : 'ant-steps';
     return (<Steps size={this.props.size}
                    iconPrefix={this.props.iconPrefix}
                    maxDescriptionWidth={this.props.maxDescriptionWidth}
-                   prefixCls={this.props.direction==='vertical' ? 'ant-steps-vertical ant-steps' : 'ant-steps'}>
+                   prefixCls={stepsCls}>
       {this.props.children}
     </Steps>);
   }

components/steps/index.md

@@ -30,6 +30,7 @@
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
 |  size | 可选参数，指定大小（目前只支持普通和迷你两种大小）。 | string    |  small, default | default    |
+|  direction | 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。 | string    |  vertical, default | default    |
 |  maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
 
 ### Steps.Step

style/components/steps.less

@@ -2,6 +2,7 @@
 
 @steps-prefix-cls: ~"@{css-prefix}steps";
 @steps-vertical-prefix-cls: ~"@{css-prefix}steps-vertical";
+@steps-vertical-small-prefix-cls: ~"@{css-prefix}steps-vertical-small";
 
 @process-icon-color: @primary-color;
 @process-title-color: #666;
@@ -246,34 +247,86 @@
       width: 1px;
     }
   }
+  .@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-main {
+    min-height: 47px;
+  }
   .@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-head-inner {
     margin-right: 16px;
   }
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
-  //.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
-  //  display: block;
-  //}
+
+  .@{steps-prefix-cls}-item.@{steps-vertical-small-prefix-cls} {
+    display: block;
+  }
+  .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
+    left: 7px;
+    height: 100%;
+    width: 2px;
+    top: 0;
+    padding: 0;
+    > i {
+      height: 100%;
+      width: 0px;
+    }
+  }
+  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-wait {
+    .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
+      > i {
+        background-color: #fff;
+        border-left: 2px dotted @wait-tail-color;
+      }
+    }
+  }
+  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-process {
+    .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
+      > i {
+        background-color: #fff;
+        border-left: 2px dotted @process-tail-color;
+      }
+    }
+  }
+  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-finish {
+    .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
+      > i {
+        background-color: #fff;
+        border-left: 2px solid @finish-tail-color;
+      }
+    }
+  }
+  .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-main {
+    min-height: 47px;
+  }
+  .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
+    margin-right: 8px;
+    background-color: #2db7f5;
+  }
+
+  .@{steps-prefix-cls}-status-wait, .@{steps-prefix-cls}-status-process {
+    .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
+      text-indent: 1000px;
+      display: inline-block;
+      background-color: #fff;
+    }
+  }
+
+  .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+  }
+
+  .@{steps-prefix-cls}-status-finish {
+    .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
+      background-color: @finish-tail-color;
+    }
+  }
+  .@{steps-prefix-cls}-status-finish {
+    .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
+      .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-icon:before {
+        color: #fff;
+        font-weight: 700;
+        position: relative;
+        top: -3px;
+      }
+    }
+  }
 }
\ No newline at end of file