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

components/pagination/demo/mini-more.md

@@ -1,19 +0,0 @@
-# 迷你的改变
-
-- order: 5
-
-改变每页显示条目数
-
----
-
-````jsx
-var Pagination = antd.Pagination;
-
-function onChange(page) {
-  console.log(page);
-}
-
-React.render(
-  <Pagination className="mini" showQuickJumper={true} showSizeChanger={true} onChange={onChange} total={500} />, 
- document.getElementById('components-pagination-demo-mini-more'));
-````

components/pagination/index.jsx

@@ -3,11 +3,11 @@
 let Pagination = require('rc-pagination');
 let React = require('react');
 
-let prefixCls = 'ant-patination';
+let prefixCls = 'ant-pagination';
 
 class AntPagination extends React.Component {
   render() {
-    return <Pagination className={prefixCls + this.props.className} {...this.props} />;
+    return <Pagination selectPrefixCls="ant-select" prefixCls={prefixCls} {...this.props} />;
   }
 }
 

components/pagination/index.md

@@ -25,4 +25,4 @@
 | showSizeChanger | 是否可以改变 pageSize          | Bool     | false          |
 | showQuickJump   | 是否可以快速跳转至某页         | Bool     | false          |
 | className       | 当为「mini」时，是小尺寸分页   | String   | ant-pagination |
-| simple          | 当添加该属性时，显示未简单分页 | Object   | 无             |
+| simple          | 当添加该属性时，显示为简单分页 | Object   | 无             |

components/slider/demo/basic.md

@@ -10,7 +10,21 @@
 var Slider = antd.Slider;
 
 React.render(
+<div className="sliderContainer">
   <Slider />
+  <Slider value={65} disabled />
+</div>
 , document.getElementById('components-slider-demo-basic'));
 ````
 
+<style>
+/*  .sliderContainer p {
+	margin-bottom: 10px;
+  }
+  .sliderContainer .ant-slider {
+	margin-bottom: 45px;
+  }
+   .sliderContainer .ant-slider:last-child {
+	margin-bottom: 0;
+  }*/
+</style>

components/slider/demo/icon-slider.md

@@ -0,0 +1,94 @@
+# 带 icon 的滑块
+
+- order: 2
+
+---
+
+````jsx
+var Slider = antd.Slider;
+
+var IconSlider = React.createClass({
+  getInitialState() {
+    var max = this.props.max;
+    var min = this.props.min;
+    var mid = ((max - min) / 2).toFixed(5);
+
+    var preIcon, nextIcon;
+    if (this.props.value >= mid) {
+      preIcon = this.props.icon[0];
+      nextIcon = this.props.icon[1] + ' anticon-highlight';
+    } else {
+      preIcon = this.props.icon[0] + ' anticon-highlight';
+      nextIcon = this.props.icon[1];
+    }
+
+    return {
+      preIcon: preIcon,
+      nextIcon: nextIcon,
+      mid: mid,
+      sliderValue: this.props.value
+    };
+  },
+
+  handleChange(v) {
+    var preIcon, nextIcon;
+    if (v >= this.state.mid) {
+      preIcon = this.props.icon[0];
+      nextIcon = this.props.icon[1] + ' anticon-highlight';
+    } else {
+      preIcon = this.props.icon[0] + ' anticon-highlight';
+      nextIcon = this.props.icon[1];
+    }
+
+    this.setState( 
+      {
+        preIcon: preIcon,
+        nextIcon: nextIcon,
+        sliderValue: v
+      }
+    );
+  },
+  
+  render() {
+    return (
+      <div className="iconWrapper">
+        <i className={this.state.preIcon}></i>
+        <i className={this.state.nextIcon}></i>
+        <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
+      </div>
+    );
+  }
+});
+
+React.render(
+<IconSlider min={0} max={20} value={0} icon={['anticon anticon-lock', 'anticon anticon-unlock']} />
+, document.getElementById('components-slider-demo-icon-slider'));
+````
+
+<style>
+.iconWrapper {
+  position: relative;
+  padding: 0 24px;
+}
+
+.iconWrapper .anticon {
+  position: absolute;
+  top: -6px;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  font-size: 16px;
+  color: #ccc;
+}
+
+.iconWrapper .anticon:nth-child(1) {
+  left: 0;
+}
+.iconWrapper .anticon:nth-child(2){
+  right: 0;
+}
+
+.anticon.anticon-highlight {
+  color: #666;
+}
+</style>

components/slider/demo/input-number-slider.md

@@ -0,0 +1,45 @@
+# 带输入框的滑块
+
+- order: 1
+
+
+
+---
+
+````jsx
+var Slider = antd.Slider;
+var InputNumber = antd.InputNumber;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      inputValue: 0
+    };
+  },
+  onChange(v){
+    this.setState({
+      inputValue: v
+    });
+  },
+  render() {
+  	return (
+  	  <div className="row">
+  	  	<div className="col-12 spacing">
+					<Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue}/>
+				</div>
+  	  	<div className="col-6">
+					<InputNumber min={1} max={20} value={this.state.inputValue} onChange={this.onChange} />
+				</div>
+	  	</div>
+  	);
+  }
+});
+
+React.render(<Test />, document.getElementById('components-slider-demo-input-number-slider'));
+````
+
+<style>
+	.spacing {
+		padding-right: 16px;
+	}
+</style>

components/slider/demo/mark.md

@@ -10,7 +10,17 @@
 var Slider = antd.Slider;
 
 React.render(
-  <Slider marks={["状态1","状态2","状态3","状态4"]} index={1}/>
+<div className="sliderContainer">
+  <p>包含关系</p>
+  <Slider marks={["状态1","状态2","状态3","状态4"]} index={1} />
+  <p>并列关系</p>
+  <Slider marks={["状态1","状态2","状态3","状态4"]} isIncluded={false} index={1} />
+</div>
 , document.getElementById('components-slider-demo-mark'));
 ````
 
+<style>
+	.sliderContainer .ant-slider {
+		margin-bottom: 30px;
+	}
+</style>

components/slider/index.md

@@ -20,5 +20,6 @@
 | step       | Number			| 1				| 步长，取值必须大于 0，并且可被 (max - min) 整除
 | value      | Number 			| 0           	| 当前取值
 | marks      | Array		    | [] 			| 分段标记，标记每一个 step，如果 step 属性没有定义，则 `marks` 属性会被忽略
+| isIncluded | Boolean			| true			| 分段式滑块，值为 true 时表示值为包含关系，false 表示并列
 | index      | Number 			| 0           	| 为具备 `step` 或者 `marks` 的 slider 提供滑块操作按钮最初的位置
 | disabled   | Boolean 			| false         | 值为 `true` 时，滑块为 disable 禁用状态

components/steps/demo/simple.md

@@ -18,7 +18,7 @@ var steps = [{
 }, {
   status: 'process',
   title: '进行中',
-  description: '这里是多信息的耶哦耶哦哦耶哦耶哦耶哦耶哦耶'
+  description: '这里是多信息的耶哦耶哦哦耶哦耶'
 }, {
   status: 'wait',
   title: '又一个待运行',

package.json

@@ -26,8 +26,8 @@
     "rc-pagination": "^1.0.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.2.1",
-    "rc-slider": "~1.2.4",
+    "rc-slider": "^1.2.5",
-    "rc-steps": "~1.1.3",
+    "rc-steps": "~1.1.4",
     "rc-switch": "~1.2.0",
     "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0"

style/components/pagination.less

@@ -1,5 +1,4 @@
-@prefixClass: rc-pagination;
+@prefixClass: ant-pagination;
-
 
 .@{prefixClass} {
   user-select: none;
@@ -15,7 +14,7 @@
     visibility: hidden;
   }
 
-  .@{prefixClass}-item {
+  &-item {
     cursor: pointer;
     border-radius: 6px;
     min-width: 28px;
@@ -27,31 +26,32 @@
     border: 1px solid #d9d9d9;
     background-color: #fff;
     margin-right: 8px;
+    transition: all 0.3s ease;
 
     a {
       text-decoration: none;
       color: #666;
     }
 
-
     &:hover {
-      border-color: #2db7f5;
+      border-color: @primary-color;
       a {
-        color: #2db7f5;
+        color: @primary-color;
       }
     }
 
-    &.active {
+    &-active {
-      background-color: #2db7f5;
+      background-color: @primary-color;
-      border: none;
+      border-color: @primary-color;
 
-      a {
+      a,
+      &:hover a {
         color: #fff;
       }
     }
   }
 
-  .jump-prev, .jump-next {
+  &-jump-prev, &-jump-next {
     &:after {
       content: "•••";
       display: block;
@@ -63,13 +63,13 @@
 
     &:hover {
       &:after {
-        color: #2db7f5;
+        color: @primary-color;
       }
     }
 
   }
 
-  .jump-prev {
+  &-jump-prev {
     &:hover {
       &:after {
         content: "‹‹";
@@ -77,7 +77,7 @@
     }
   }
 
-  .jump-next {
+  &-jump-next {
     &:hover {
       &:after {
         content: "››";
@@ -85,10 +85,10 @@
     }
   }
 
-  .prev, .jump-prev, .jump-next {
+  &-prev, &-jump-prev, &-jump-next {
     margin-right: 8px;
   }
-  .prev, .next, .jump-prev, .jump-next {
+  &-prev, &-next, &-jump-prev, &-jump-next {
     cursor: pointer;
     color: #666;
     font-size: 10px;
@@ -101,7 +101,7 @@
     text-align: center;
   }
 
-  .prev, .next {
+  &-prev, &-next {
     border: 1px solid #d9d9d9;
 
     a {
@@ -111,92 +111,53 @@
     }
 
     &:hover {
-      border-color: #2db7f5;
+      border-color: @primary-color;
 
       a {
-        color: #2db7f5;
+        color: @primary-color;
       }
+
     }
 
-    &.disabled {
+  }
-      cursor: not-allowed;
+
+  &-disabled {
+    &:hover {
+      border-color: #d9d9d9;
       a {
         color: #ccc;
+        cursor: not-allowed;
       }
     }
+    cursor: not-allowed;
+    a {
+      color: #ccc;
+    }
   }
 
-  .options {
+  &-options {
     float: left;
     margin-left: 15px;
-    .size-changer {
+    &-size-changer {
       float: left;
       width: 90px;
+      margin-right: 10px;
     }
 
-    .quick-jumper {
+    &-quick-jumper {
       float: left;
-      margin-left: 16px;
       height: 28px;
       line-height: 28px;
 
       input {
+        .input;
         margin: 0 8px;
-        box-sizing: border-box;
-        background-color: #fff;
-        border-radius: 6px;
-        border: 1px solid #d9d9d9;
-        outline: none;
-        padding: 3px 12px;
         width: 50px;
-        height: 28px;
-
-        &:hover {
-          border-color: #2db7f5;
-        }
       }
     }
   }
-}
 
-.@{prefixClass}.mini {
+  &-simple &-prev, &-simple &-next {
-
-  .@{prefixClass}-item {
-    border: none;
-    margin: 0;
-    min-width: 20px;
-    height: 20px;
-    line-height: 20px;
-  }
-
-  .prev, .next {
-    margin: 0;
-    min-width: 20px;
-    height: 20px;
-    line-height: 20px;
-    border: none;
-  }
-
-  .jump-prev, .jump-next {
-    height: 20px;
-    line-height: 20px;
-  }
-
-  .quick-jumper {
-    height: 20px;
-    line-height: 20px;
-
-    input {
-      padding: 3px 7px;
-      width: 40px;
-      height: 20px;
-      line-height: 20px;
-    }
-  }
-}
-
-.@{prefixClass}.simple {
-  .prev, .next {
     border: none;
     height: 24px;
     line-height: 24px;
@@ -204,11 +165,11 @@
     font-size: 18px;
   }
 
-  .simple-pager {
+  &-simple &-simple-pager {
     float: left;
     margin-right: 8px;
 
-    .slash {
+    &-slash {
       margin: 0 10px;
     }
 
@@ -222,13 +183,49 @@
       padding: 5px 8px;
       width: 30px;
       min-height: 20px;
+      text-align: center;
 
 
       &:hover {
-        border-color: #2db7f5;
+        border-color: @primary-color;
       }
     }
 
   }
 }
 
+.@{prefixClass} {
+
+  &.mini &-item {
+    border: none;
+    margin: 0;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &.mini &-prev,
+  &.mini &-next {
+    margin: 0;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+    border: none;
+  }
+
+  &.mini &-jump-prev, &.mini &-jump-next {
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &.mini &-options {
+    &-quick-jumper {
+      height: 20px;
+      line-height: 20px;
+
+      input {
+        .input-sm;
+      }
+    }
+  }
+}

style/components/slider.less

@@ -1,10 +1,17 @@
 @sliderClass: ~"@{css-prefix}slider";
 
-// color
+// slider color
 @disabledColor: #ccc;
+// tooltip
+@tooltip-color: #fff;
+@tooltip-bg: tint(#666, 4%);
+@tooltip-arrow-width: 4px;
+@tooltip-distance: @tooltip-arrow-width+4;
+@tooltip-arrow-color: @tooltip-bg;
 
 .@{sliderClass} {
   position: relative;
+  margin: 12px 0;
   height: 4px;
   width: 100%;
   border-radius: @border-radius-base;
@@ -44,7 +51,7 @@
 
   &-mark {
     position: absolute;
-    top: 8px;
+    top: 10px;
     left: 0px;
     width: 100%;
     font-size: 12px;
@@ -95,7 +102,7 @@
   }
 
   &-disabled {
-    background-color: @disabledColor;
+    background-color: #e9e9e9;
 
     .@{sliderClass}-track {
       background-color: @disabledColor;
@@ -111,4 +118,51 @@
       cursor: not-allowed!important;
     }
   }
+
+  // slider tooltip style
+  &-tooltip {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    z-index: 4;
+    visibility: visible;
+
+    &-hidden {
+      display: none;
+    }
+
+    &-placement-top { 
+      padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+    }
+
+    &-inner {
+      padding: 6px 0;
+      width: 24px;
+      height: 24px;
+      font-size: @font-size-base;
+      line-height: 1;
+      color: @tooltip-color;
+      text-align: center;
+      text-decoration: none;
+      background-color: @tooltip-bg;
+      border-radius: @border-radius-base;
+      box-shadow: 0 0 4px #d9d9d9;
+    }
+
+    &-arrow {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+    }
+
+    &-placement-top &-arrow {
+      bottom: @tooltip-distance - @tooltip-arrow-width;
+      left: 50%;
+      margin-left: -@tooltip-arrow-width;
+      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+      border-top-color: @tooltip-arrow-color;
+    }
+  }
 }

style/components/steps.less

@@ -4,11 +4,11 @@
 @process-icon-color: @primary-color;
 @process-title-color: #666;
 @process-description-color: @process-title-color;
-@process-tail-color: #bcbcbc;
+@process-tail-color: #e9e9e9;
-@wait-icon-color: #bcbcbc;
+@wait-icon-color: #ccc;
 @wait-title-color: #999;
 @wait-description-color: @wait-title-color;
-@wait-tail-color: @wait-icon-color;
+@wait-tail-color: @process-tail-color;
 @finish-icon-color: @process-icon-color;
 @finish-title-color: @wait-title-color;
 @finish-description-color: @finish-title-color;
@@ -93,7 +93,9 @@
         height: auto;
         > .@{stepsPrefixClass}-icon {
           font-size: 20px;
-          top: 0;
+          top: 2px;
+          width: 20px;
+          height: 20px;
         }
       }
       &.@{stepsPrefixClass}-status-process {
@@ -134,6 +136,8 @@
 
       &.anticon {
         font-size: 12px;
+        position: relative;
+        top: -2px;
       }
     }
   }
@@ -167,7 +171,7 @@
     > i {
       display: inline-block;
       background: @wait-tail-color;
-      height: 2px;
+      height: 1px;
       border-radius: 1px;
       width: 100%;
       .transition(background 0.3s ease);
@@ -188,6 +192,7 @@
         font-size: 12px;
         font-size: ~"9px \9"; // ie8-9
         .scale(0.75);
+        top: -1px;
       }
     }
     .@{stepsPrefixClass}-main {