Blame view

src/styles/mixins/input.less 1.64 KB
95436eeb   梁灏   add InputNumber UI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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();
      }
  }