add InputNumber UI

2016-09-21 16:59:19 +08:00 · 2016-09-21 16:59:19 +08:00 · 95436eeb98
commit 95436eeb98
parent 07aa688e3c
15 changed files with 345 additions and 16 deletions
--- a/styles/mixins/input.less
+++ b/styles/mixins/input.less
@ -0,0 +1,77 @@
+.hover(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+}
+
+.active(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@color, 20%);
+}
+
+.disabled() {
+    background-color: @input-disabled-bg;
+    opacity: 1;
+    cursor: @cursor-disabled;
+    color: #ccc;
+    &:hover {
+        .hover(@input-border-color);
+    }
+}
+
+.input-large() {
+    padding: @input-padding-vertical-large @input-padding-horizontal;
+    height: @input-height-large;
+}
+
+.input-small() {
+    padding: @input-padding-vertical-small @input-padding-horizontal;
+    height: @input-height-small;
+    border-radius: @border-radius-small;
+}
+
+.input() {
+    display: inline-block;
+    width: 100%;
+    height: @input-height-base;
+    line-height: @line-height-base;
+    padding: @input-padding-vertical-base @input-padding-horizontal;
+    font-size: @font-size-base;
+    border: 1px solid @input-border-color;
+    border-radius: @border-radius-base;
+    color: @input-color;
+    background-color: @input-bg;
+    background-image: none;
+    position: relative;
+    cursor: text;
+    .placeholder();
+    .transition3(border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out);
+
+    &:hover {
+        .hover();
+    }
+
+    &:focus {
+        .active();
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+        .disabled();
+    }
+
+    // Reset height for textarea
+    textarea& {
+        max-width: 100%;
+        height: auto;
+        vertical-align: bottom;
+    }
+
+    // Size
+    &-large {
+        .input-large();
+    }
+
+    &-small {
+        .input-small();
+    }
+}