Merge pull request #557 from baiyaaaaa/master

fix input-number style

packages/input-number/src/input-number.vue

@@ -9,7 +9,6 @@
       v-model.number="currentValue"
       :disabled="disabled"
       :size="size"
-      :number="true"
       :class="{
         'is-active': inputActive
       }">

packages/theme-default/src/input-number.css

@@ -4,16 +4,14 @@
 
 @component-namespace el {
   @b input-number {
-    display: block;
+    display: inline-block;
     overflow: hidden;
+    width: 180px;
+    position: relative;
 
     & .el-input__inner {
       appearance: none;
     }
-    & .el-input {
-      float: left;
-      margin-right: calc(-(var(--input-height) + 1px) * 2);
-    }
     @e increase, decrease {
       height: 100%;
       border-left: var(--border-base);
@@ -23,8 +21,7 @@
       text-align: center;
       color: #99A9BF;
       cursor: pointer;
-      float: left;
-      position: relative;
+      position: absolute;
 
       &:hover {
         color: var(--color-primary);
@@ -36,6 +33,13 @@
       }
     }
 
+    @e increase {
+      right: 0;
+    }
+    @e decrease {
+      right: calc(var(--input-height) + 1px);
+    }
+
     @when disabled {
       & .el-input-number__increase, .el-input-number__decrease {
         border-color: var(--disabled-border-base);
@@ -48,24 +52,28 @@
       }
     }
     @when large {
-      & .el-input {
-        margin-right: calc(-(var(--input-large-height) + 1px) * 2);
-      }
+      width: 200px;
+
       & .el-input-number__increase, .el-input-number__decrease {
         line-height: var(--input-large-height);
         width: var(--input-large-height);
         font-size: var(--input-large-font-size);
       }
+      & .el-input-number__decrease {
+        right: calc(var(--input-large-height) + 1px);
+      }
     }
     @when small {
-      & .el-input {
-        margin-right: calc(-(var(--input-small-height) + 1px) * 2);
-      }
+      width: 130px;
+
       & .el-input-number__increase, .el-input-number__decrease {
         line-height: var(--input-small-height);
         width: var(--input-small-height);
         font-size: var(--input-small-font-size);
       }
+      & .el-input-number__decrease {
+        right: calc(var(--input-small-height) + 1px);
+      }
     }
   }
 }

packages/theme-default/src/slider.css

@@ -24,10 +24,6 @@
     @e input {
       float: right;
       margin-top: 7px;
-
-      & .el-input {
-        width: 130px;
-      }
     }
 
     @e bar {