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

components/input-number/demo/basic.md

@@ -13,8 +13,26 @@ function onChange(v){
   console.log('changed',v);
 }
 
-React.render(
-  <div><InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/></div>
-, document.getElementById('components-input-number-demo-basic'));
+var Test = React.createClass({
+  getInitialState(){
+    return {
+      disabled:false
+    };
+  },
+  toggle(){
+    this.setState({
+      disabled:!this.state.disabled
+    });
+  },
+  render(){
+    return <div>
+             <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} onChange={onChange} style={{width:100}}/>
+             &nbsp;&nbsp;&nbsp;
+             <button onClick={this.toggle} className="ant-btn ant-btn-primary"> toggle disabled</button>
+           </div>;
+  }
+});
+
+React.render(<Test />, document.getElementById('components-input-number-demo-basic'));
 ````
 

package.json

@@ -18,7 +18,7 @@
     "rc-calendar": "~3.10.0",
     "rc-dialog": "~4.4.0",
     "rc-dropdown": "~1.1.1",
-    "rc-input-number": "~2.0.0",
+    "rc-input-number": "~2.0.1",
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.2.1",

style/components/inputNumber.less

@@ -1,13 +1,14 @@
 @inputNumberPrefixCls: ant-input-number;
 
 @import "../mixins/iconfont";
+@import "../mixins/input";
 
 .@{inputNumberPrefixCls} {
   margin: 0;
   padding: 0;
-  line-height: 26px;
+  line-height: 29px;
   font-size: 12px;
-  height: 26px;
+  height: 29px;
   display: inline-block;
   vertical-align: middle;
   border: 1px solid #D9D9D9;
@@ -16,40 +17,45 @@
 
   &-handler {
     text-align: center;
-    line-height: 12px;
-    height: 12px;
+    line-height: 0;
+    height: 15px;
     overflow: hidden;
   }
 
+  &-handler-down {
+    height: 14px;
+  }
+
   &-handler-up-inner, &-handler-down-inner {
-    color: #666666;
+    .iconfont-mixin();
+    line-height: 12px;
+    color: #999;
     user-select: none;
     -webkit-user-select: none;
-  }
-
-  &-handler-up-inner {
-    margin-left: -1px;
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    right: 4px;
+    &:hover {
+      color: #666;
+    }
   }
 
   &:hover {
-    border-color: @primary-color;
-
-    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
-      border-color: @primary-color;
-    }
+    .hover();
   }
 
-  &-disabled:hover {
-    border-color: #d9d9d9;
+  &-focused {
+    .active();
+  }
 
-    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
-      border-color: #d9d9d9;
-    }
+  &-disabled {
+    .disabled();
   }
 
   &-input-wrap {
     overflow: hidden;
-    height: 26px;
+    height: 29px;
   }
 
   &-input {
@@ -57,32 +63,36 @@
     text-align: center;
     outline: 0;
     -moz-appearance: textfield;
-    line-height: 26px;
+    line-height: 29px;
     height: 22px;
     transition: all 0.3s ease;
     color: #666666;
     border: 0;
     border-radius: 5px;
-    padding: 0;
+    padding: 0 8px;
+
+    &[disabled] {
+      .disabled();
+    }
   }
 
   &-handler-wrap {
     float: right;
     border-left: 1px solid #D9D9D9;
-    width: 20px;
-    height: 26px;
+    width: 22px;
+    height: 29px;
     margin-top: -1px;
+    position: relative;
   }
 
   &-handler-up {
-    padding-top: 1px;
     border-bottom: 1px solid #D9D9D9;
     cursor: pointer;
     &-inner {
-      .iconfont-mixin();
-      transform: rotate(270deg) scale(0.8);
+      top: 2px;
+      left: 4px;
+      transform: rotate(270deg);
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-      top:-2px;
       &:before {
         content: "\e611";
       }
@@ -92,8 +102,8 @@
   &-handler-down {
     cursor: pointer;
     &-inner {
-      .iconfont-mixin();
-      transform: rotate(90deg) scale(0.8);
+      bottom: 2px;
+      transform: rotate(90deg);
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
       &:before {
         content: "\e611";
@@ -103,16 +113,19 @@
 
   .handler-disabled() {
     opacity: 0.72;
+    color: #ccc;
     cursor: default;
     &:hover {
+      color: #ccc;
       cursor: default;
-      color: #999;
-      border-color: #d9d9d9;
     }
   }
 
-  &-handler-down-disabled, &-handler-up-disabled {
-    .handler-disabled();
+  &-handler-down-disabled, &-handler-up-disabled, &-disabled {
+    .@{inputNumberPrefixCls}-handler-down-inner,
+    .@{inputNumberPrefixCls}-handler-up-inner {
+      .handler-disabled();
+    }
   }
 
   &-disabled {

style/mixins/input.less

@@ -24,6 +24,15 @@
   border-color: @color;
 }
 
+.disabled() {
+  background-color: @input-disabled-bg;
+  opacity: 1;
+  cursor: @cursor-disabled;
+  &:hover {
+    .hover(@input-border-color);
+  }
+}
+
 
 // Basic style for input
 .input() {
@@ -53,16 +62,7 @@
 
   &[disabled],
   fieldset[disabled] & {
-    background-color: @input-disabled-bg;
-    opacity: 1;
-    &:hover {
-      .hover(@input-border-color);
-    }
-  }
-
-  &[disabled],
-  fieldset[disabled] & {
-    cursor: @cursor-disabled;
+   .disabled();
   }
 
   // Reset height for `textarea`s