Merge branch 'master' of https://github.com/ant-design/ant-design

components/datepicker/demo/disabled.md

+# 禁用
+
+- order: 5
+
+选择框的不可用状态。
+
+---
+
+````jsx
+var Datepicker = antd.Datepicker;
+
+React.render(
+  <Datepicker value="2015-06-06" disabled={true} />
+, document.getElementById('components-datepicker-demo-disabled'));
+````

components/datepicker/demo/range.md

@@ -2,7 +2,7 @@
 
 - order: 3
 
-设置 `disabled` 方法，来确定不可选时段。
+设置 `disabledDate` 方法，来确定不可选时段。
 
 如上例：不可选择今天之后的日期。
 
@@ -16,6 +16,6 @@ var disabledDate = function(current, value) {
 };
 
 React.render(
-  <Datepicker disabled={disabledDate} />
+  <Datepicker disabledDate={disabledDate} />
 , document.getElementById('components-datepicker-demo-range'));
 ````

components/datepicker/index.jsx

@@ -56,7 +56,7 @@ export default React.createClass({
   render() {
     var calendar = (
       <Calendar
-        disabledDate={this.props.disabled}
+        disabledDate={this.props.disabledDate}
         locale={CalendarLocale}
         orient={['top', 'left']}
         defaultValue={defaultCalendarValue}
@@ -75,7 +75,7 @@ export default React.createClass({
         value={this.state.value}
         prefixCls="ant-calendar-picker"
         onChange={this.handleChange}>
-        <input placeholder={this.props.placeholder} className="ant-calendar-picker-input"/>
+        <input disabled={this.props.disabled} placeholder={this.props.placeholder} className="ant-calendar-picker-input ant-input" />
       </Datepicker>
     );
   }

components/datepicker/index.md

@@ -18,14 +18,14 @@
 
 ## API
 
-| 参数     | 说明           | 类型     | 默认值       |
-|----------|----------------|----------|--------------|
-| value    | 日期           | string   | 无           |
-| format   | 展示的日期格式 | string   | "yyyy-MM-dd" |
-| disabled | 不可选择的日期 | function | 无           |
-| transitionName | 动画名称 | String.可取 'slide-up' | 无.            |
-| onSelect | 选择日期的回调 | function | 无           |
-| showTime | 显示时间选择条 | boolean  | false        |
+| 参数         | 说明           | 类型     | 默认值       |
+|--------------|----------------|----------|--------------|
+| value        | 日期           | string   | 无           |
+| format       | 展示的日期格式 | string   | "yyyy-MM-dd" |
+| disabledDate | 不可选择的日期 | function | 无           |
+| onSelect     | 选择日期的回调 | function | 无           |
+| showTime     | 显示时间选择条 | boolean  | false        |
+| disabled     | 禁用           | bool     | false        |
 
 <style>
 .code-box-demo .ant-calendar-picker-input {

components/form/demo/disabled.md

@@ -8,8 +8,11 @@
 
 ---
 
+#### 禁用的表单控件
+
+<br>
+
 ````html
-<h4>禁用的表单控件</h4>
 <form class="ant-form-horizontal">
   <div class="ant-form-item">
     <label class="col-5">禁用的输入框：</label>
@@ -18,10 +21,13 @@
     </div>
   </div>
 </form>
+````
 
-<br />
+#### 禁用的 fieldset
 
-<h4>禁用的 fieldset</h4>
+<br>
+
+````html
 <form class="ant-form-horizontal">
   <fieldset disabled>
     <div class="ant-form-item">
@@ -52,5 +58,4 @@
     </div>
   </fieldset>
 </form>
-
 ````

components/motion/index.md

 # Motion
 
 - category: CSS
-- chinese: 动画样式
+- chinese: 组件动画
 - order: 4
 
 ---
@@ -20,6 +20,6 @@
 | confirm      | 弹出确认框          | `zoom`                                          |
 | message      | 信息提示条          | `move-up`                                       |
 | dropdown     | 下拉菜单            | `slide-up`                                      |
-| select      | 选择框              | `slide-up`                                      |
+| select       | 选择框              | `slide-up`                                      |
 | datepicker   | 日期选择框          | `slide-up`                                      |
 

components/popover/index.jsx

@@ -32,6 +32,7 @@ export default React.createClass({
     return (
       <Tooltip placement={this.props.placement}
         prefixCls={prefixCls}
+        delay={0.1}
         renderPopupToBody={false}
         transitionName={transitionName}
         trigger={this.props.trigger}

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/demo/step-next.md

@@ -6,19 +6,15 @@
 
 ---
 
-<style>
-.my-step-form {
-  width: 100%;
+````css
+form.my-step-form > div {
+  margin-bottom: 30px;
 }
-.my-step-form > div {
-  margin-bottom: 20px;
-}
-.my-step-container {
-  width: 100%;
-}
-</style>
+````
 
 ````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
 var container = document.getElementById('components-steps-demo-step-next');
 var steps = (function generateRandomSteps() {
   var n = Math.floor(Math.random() * 3) + 3;

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

components/tooltip/index.jsx

@@ -19,6 +19,7 @@ module.exports = React.createClass({
     return (
       <Tooltip placement={this.props.placement}
         prefixCls="ant-tooltip"
+        delay={0.1}
         trigger={this.props.trigger}
         transitionName={transitionName}
         overlay={this.props.title}>

design/page-transition.md

 # 页面转换
 
 - category: 动画
-- order: 1
+- chinese: 页面转换
+- order: 2
 
 ---
 

docs/getting-started.md

@@ -127,6 +127,8 @@ $ npm run build
 
 入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
 
+> 上述例子帮助你理解 Ant Design 的使用流程，并非真实的开发过程，你可以根据自己的项目流程进行改造接入。
+
 ## 兼容性
 
 Ant Design 支持所有的现代浏览器和 IE8+。

package.json

@@ -21,9 +21,9 @@
     "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"
+    "rc-tooltip": "~2.3.0"
   },
   "devDependencies": {
     "css-animation": "~1.0.3",

site/templates/layout.html

@@ -10,7 +10,8 @@
   <link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
   <link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
   <link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css" >
-  <link rel="stylesheet" href="/static/normalize.css"> {% block styles %}{% endblock %}
+  <link rel="stylesheet" href="/static/normalize.css">
+  {% block styles %}{% endblock %}
   <link rel="stylesheet" href="/static/style.css">
   <link rel="stylesheet" href="/static/tomorrow.css">
   <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
@@ -43,12 +44,12 @@
         <li class="{%- if post.directory|rootDirectoryIs('docs') %}current{%- endif %}">
           <a href="/docs/introduce">使用</a>
         </li>
-        <li class="{%- if post.directory|rootDirectoryIs('components') %}current{%- endif %}">
-          <a href="/components">组件</a>
-        </li>
         <li class="{%- if post.directory|rootDirectoryIs('design') %}current{%- endif %}">
           <a class="disabled" href="/design/">设计</a>
         </li>
+        <li class="{%- if post.directory|rootDirectoryIs('components') %}current{%- endif %}">
+          <a href="/components">组件</a>
+        </li>
         <li>
           <a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
         </li>

static/style.css

@@ -57,7 +57,7 @@ body {
 }
 
 body {
-  font-family: "Helvetica Neue",Helvetica,"Lantinghei SC","Microsoft YaHei","微软雅黑","Hiragino Sans GB",SimSun,sans-serif;
+  font-family: "Helvetica Neue",Helvetica,"Microsoft YaHei","微软雅黑","Hiragino Sans GB",SimSun,sans-serif;
   line-height: 1.5;
   color: #888;
   font-size: 14px;
@@ -450,13 +450,13 @@ footer ul li > a {
   float: left;
 }
 
-.aside-container>ul>li {
+.aside-container > ul > li {
   overflow: hidden;
 }
 
 .aside-container li h4 {
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 600;
   padding: 10px 0 10px 50px;
   margin: 0;
   color: #5C6B77;
@@ -599,6 +599,11 @@ footer ul li > a {
   margin: 0;
 }
 
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
 .markdown > table {
   border-collapse: collapse;
   border-spacing: 0px;

style/components/button.less

@@ -11,18 +11,18 @@
     .btn-primary;
 
     .@{btnPrefixClass}-group &:not(:first-child):not(:last-child) {
-      border-right-color: #00abea;
-      border-left-color: #00abea;
+      border-right-color: @btn-primary-border;
+      border-left-color: btn-primary-border;
     }
 
     .@{btnPrefixClass}-group &:first-child {
       &:not(:last-child) {
-        border-right-color: #00abea;
+        border-right-color: @btn-primary-border;
       }
     }
 
     .@{btnPrefixClass}-group &:last-child:not(:first-child) {
-      border-left-color: #00abea;
+      border-left-color: @btn-primary-border;
     }
 
     .@{btnPrefixClass}-group & + .@{btnPrefixClass} {

style/components/confirm.less

@@ -25,11 +25,11 @@
     }
 
     .anticon-exclamation-circle {
-      color: #fac450;
+      color: @warning-color;
     }
 
     .anticon-question-circle {
-      color: #2CB7ED;
+      color: @primary-color;
     }
   }
 
@@ -42,5 +42,4 @@
       margin-bottom: 0;
     }
   }
-
 }

style/components/datepicker/Picker.less

@@ -11,9 +11,6 @@
   position: relative;
   display: inline-block;
 
-  &-input {
-    .input;
-  }
   &-icon {
     position: absolute;
     -webkit-user-select: none;
@@ -38,10 +35,8 @@
     display: block;
   }
   &-open &-input {
-    border-color: #23c0fa;
-    box-shadow: 0 0 3px #23c0fa;
-  }
-  .ant-form-item &-input {
-    height: 32px;
+    border-color: @input-focus-border-color;
+    outline: 0;
+    box-shadow: 0 0 3px tint(@input-focus-border-color, 20%);
   }
 }

style/components/datepicker/YearPanel.less

@@ -3,7 +3,7 @@
   top: 0px;
   bottom: 0px;
   right: 0px;
-  background: #ffffff;
+  background: #fff;
   z-index: 10;
   position: absolute;
   outline: none;

style/components/dropdown.less

@@ -6,7 +6,6 @@
   top: -9999px;
   z-index: 1070;
   display: block;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-weight: normal;
   line-height: 1.5;
@@ -72,7 +71,7 @@
       }
 
       &:hover {
-        background-color: #ebfaff;
+        background-color: tint(@primary-color, 90%);
       }
 
       &-disabled {

style/components/inputNumber.less

@@ -32,10 +32,10 @@
   }
 
   &:hover {
-    border-color: #23c0fa;
+    border-color: @primary-color;
 
     .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
-      border-color: #23c0fa;
+      border-color: @primary-color;
     }
   }
 

style/components/steps.less

 @import "../mixins/index";
 @stepsPrefixClass: ~"@{css-prefix}steps";
 
-@active-color: #3fc7fa;
-@wait-color: #e9e9e9;
+@process-icon-color: @primary-color;
+@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} {
@@ -16,37 +29,60 @@
   .@{stepsPrefixClass}-item {
     position: relative;
     display: inline-block;
+    vertical-align: top;
 
     &.@{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 +90,16 @@
       .@{stepsPrefixClass}-head-inner {
         background: none;
         border: 0;
+        font-size: 20px;
+        width: auto;
+        height: auto;
+        > .@{stepsPrefixClass}-icon {
+          top: -4px;
+        }
       }
       &.@{stepsPrefixClass}-status-process {
-        .@{stepsPrefixClass}-title {
-          color: @active-color;
+        .@{stepsPrefixClass}-head-inner > .@{stepsPrefixClass}-icon {
+          color: @process-icon-color;
         }
       }
     }
@@ -75,22 +117,23 @@
 
   .@{stepsPrefixClass}-head-inner {
     display: block;
-    border:2px solid @wait-color;
-    width: 24px;
-    height: 24px;
-    line-height: 22px;
+    border:1px solid @wait-icon-color;
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
     text-align: center;
-    border-radius: 24px;
+    border-radius: 26px;
     font-size: 14px;
-    margin-right: 12px;
+    margin-right: 8px;
     .transition(background-color 0.1s ease);
     .transition(border-color 0.1s ease);
 
     > .@{stepsPrefixClass}-icon {
       line-height: 1;
       display: inline-block;
-      vertical-align: text-top;
-      color: #3fc7fa;
+      vertical-align: middle;
+      top: -2px;
+      color: @primary-color;
       position: relative;
     }
   }
@@ -123,7 +166,7 @@
     padding:0 10px;
     > i {
       display: inline-block;
-      background: @wait-color;
+      background: @wait-tail-color;
       height: 2px;
       border-radius: 1px;
       width: 100%;
@@ -132,7 +175,7 @@
 
   &.@{stepsPrefixClass}-small {
     .@{stepsPrefixClass}-head-inner {
-      border:1px solid @wait-color;
+      border:1px solid @wait-icon-color;
       width: 18px;
       height: 18px;
       line-height: 18px;
@@ -173,4 +216,4 @@
     border: 0;
     background: none;
   }
-}
\ No newline at end of file
+}

style/components/tabs.less

@@ -16,7 +16,7 @@
     bottom: 0;
     box-sizing: border-box;
     height: 2px;
-    background-color: #3fc7fa;
+    background-color: @primary-color;
     transform: scaleX(1);
     transform-origin: 0 0;
     &-transition-forward {

style/core/motion/zoom.less

@@ -143,4 +143,4 @@
     transform-origin: 50% 100%;
     transform: scale(0, 0);
   }
-}
\ No newline at end of file
+}

style/mixins/input.less

@@ -151,11 +151,11 @@
     .button-variant(@input-color; #eee; @input-border-color);
 
     &:hover {
-      .button-color(lighten(@input-color, 30%, 'relative'); #eee; @input-border-color);
+      .button-color(tint(@input-color, 20%); #eee; @input-border-color);
     }
     &:active,
     &.active {
-      .button-color(lighten(@input-color, 20%, 'relative'); #eee; @input-border-color);
+      .button-color(shade(@input-color, 5%); #eee; @input-border-color);
     }
 
     .@{iconfont-css-prefix} {

style/themes/default/custom.less

@@ -10,7 +10,7 @@
 // ------ Base & Require ------
 @body-background        : #fff;
 
-@font-family            : "Helvetica Neue",Helvetica,"Lantinghei SC","Microsoft YaHei","微软雅黑","Hiragino Sans GB",SimSun,sans-serif;
+@font-family            : "Helvetica Neue",Helvetica,"Microsoft YaHei","微软雅黑","Hiragino Sans GB",SimSun,sans-serif;
 @code-family            : "PT Mono", Menlo, "Courier New", monospace;
 @text-color             : #666;
 @font-size-base         : 12px;
@@ -23,8 +23,8 @@
 @icon-url               : "//at.alicdn.com/t/font_1434092639_4910953";
 
 // LINK
-@link-color             : #00abea;
-@link-hover-color       : tint(#00abea, 30%);
+@link-color             : @primary-color;
+@link-hover-color       : tint(@link-color, 20%);
 @link-hover-decoration  : none;
 
 // Disabled cursor for form controls and buttons.
@@ -46,7 +46,7 @@
 
 @btn-primary-color      : #fff;
 @btn-primary-bg         : @primary-color;
-@btn-primary-border     : @primary-color;
+@btn-primary-border     : shade(@primary-color, 5%);
 
 @btn-default-color      : #666;
 @btn-default-bg         : #f3f5f7;
@@ -131,7 +131,7 @@
 @input-font-size             : @font-size-base;
 @input-font-size-sm          : @font-size-base;
 
-@input-hover-border-color    : #23c0fa;
+@input-hover-border-color    : @primary-color;
 @input-focus-border-color    : @primary-color;
 @input-disabled-bg           : #f3f5f7;