add Slider component

add Slider component

src/styles/components/index.less

@@ -24,4 +24,5 @@
 @import "select-dropdown";
 @import "tooltip";
 @import "poptip";
-@import "input";
+@import "input";
+@import "slider";

src/styles/components/input-number.less

@@ -73,7 +73,7 @@
         line-height: 12px;
         font-size: 14px;
         color: #999;
-        user-select: none;
+        .user-select();
         position: absolute;
         right: 4px;
         .transition(all @transition-time linear);

src/styles/components/modal.less

@@ -9,7 +9,7 @@
     top: 100px;
 
     &-hidden {
-        display: none;
+        display: none !important;
     }
 
     &-wrap {

src/styles/components/page.less

@@ -19,7 +19,7 @@
         text-align: center;
         list-style: none;
         background-color: #fff;
-        user-select: none;
+        .user-select();
         cursor: pointer;
         font-family: Arial;
         border: 1px solid @border-color-base;

src/styles/components/select.less

@@ -15,7 +15,7 @@
         display: block;
         box-sizing: border-box;
         outline: none;
-        user-select: none;
+        .user-select();
         cursor: pointer;
 
         background-color: #fff;

src/styles/components/slider.less

@@ -0,0 +1,102 @@
+@slider-prefix-cls: ~"@{css-prefix}slider";
+
+.@{slider-prefix-cls} {
+    &-wrap{
+        width: 100%;
+        height: @slider-height;
+        margin: @slider-margin;
+        background-color: @border-color-split;
+        border-radius: @btn-border-radius-small;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+    }
+
+    &-button-wrap{
+        .square(@slider-button-wrap-size);
+        text-align: center;
+        background-color: transparent;
+        position: absolute;
+        top: @slider-button-wrap-offset;
+        .transform(translateX(-50%));
+
+        .@{tooltip-prefix-cls} {
+            display: block;
+            .user-select();
+        }
+    }
+
+    &-button{
+        width: 12px;
+        height: 12px;
+        border: 2px solid @slider-color;
+        border-radius: 50%;
+        background-color: #fff;
+        .transition(all @transition-time linear);
+
+        &:hover,
+        &-dragging
+        {
+            border-color: @primary-color;
+            .transform(scale(1.5));
+        }
+
+        &:hover{
+            cursor: grab;
+        }
+        &-dragging,
+        &-dragging:hover
+        {
+            cursor: grabbing;
+        }
+    }
+
+    &-bar{
+        height: @slider-height;
+        background: @slider-color;
+        border-radius: @btn-border-radius-small;
+        position: absolute;
+    }
+}
+
+.@{slider-prefix-cls}-disabled{
+    cursor: @cursor-disabled;
+
+    .@{slider-prefix-cls}-wrap{
+        background-color: @slider-disabled-color;
+        cursor: @cursor-disabled;
+    }
+    .@{slider-prefix-cls}-bar{
+        background-color: @slider-disabled-color;
+    }
+
+    .@{slider-prefix-cls}-button{
+        border-color: @slider-disabled-color;
+
+        &:hover,
+        &-dragging
+        {
+            border-color: @slider-disabled-color;
+        }
+        &:hover{
+            cursor: @cursor-disabled;
+        }
+        &-dragging,
+        &-dragging:hover
+        {
+            cursor: @cursor-disabled;
+        }
+    }
+}
+
+.@{slider-prefix-cls}-input{
+    .@{slider-prefix-cls}-wrap{
+        width: auto;
+        margin-right: 100px;
+    }
+
+    .@{input-number-prefix-cls}{
+        float: right;
+        margin-top: -14px;
+    }
+}

src/styles/components/switch.less

@@ -11,7 +11,7 @@
     background-color: #ccc;
     position: relative;
     cursor: pointer;
-    user-select: none;
+    .user-select();
     .transition(all @transition-time @ease-in-out);
 
     &-inner {

src/styles/mixins/button.less

@@ -120,7 +120,7 @@
     border: 1px solid transparent;
     white-space: nowrap;
     line-height: @line-height-base;
-    user-select: none;
+    .user-select();
     .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
     .transform(translate3d(0, 0, 0));
     //.transition(all @transition-time linear);

src/styles/mixins/common.less

@@ -12,4 +12,10 @@
     &::-webkit-input-placeholder {
         color: @color;
     }
+}
+
+.user-select(@type: none) {
+    -webkit-user-select: @type;
+    -moz-user-select: @type;
+    user-select: @type;
 }

src/styles/themes/default/custom.less

@@ -1,6 +1,7 @@
 // Prefix
 @css-prefix             : ivu-;
 @css-prefix-iconfont    : ivu-icon;
+
 // Color
 @primary-color          : #3399ff;
 @info-color             : #2db7f5;
@@ -119,4 +120,12 @@
 // Animation
 @animation-time         : .3s;
 @transition-time        : .2s;
-@ease-in-out            : ease-in-out;
+@ease-in-out            : ease-in-out;
+
+// Slider
+@slider-color              : fade(@primary-color, 80%);
+@slider-height             : 4px;
+@slider-margin             : 16px 0;
+@slider-button-wrap-size   : 18px;
+@slider-button-wrap-offset : -5px;
+@slider-disabled-color     : #ccc;