Blame view

node_modules/element-ui/packages/theme-chalk/src/input-number.scss 3.79 KB
2a09d1a4   liuqimichale   添加宜春 天水 宣化
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
  @import "mixins/mixins";
  @import "common/var";
  @import "input";
  
  @include b(input-number) {
    position: relative;
    display: inline-block;
    width: 180px;
    line-height: #{$--input-height - 2};
  
    .el-input {
      display: block;
  
      &__inner {
        -webkit-appearance: none;
        padding-left: #{$--input-height + 10};
        padding-right: #{$--input-height + 10};
        text-align: center;
      }
    }
  
    @include e((increase, decrease)) {
      position: absolute;
      z-index: 1;
      top: 1px;
      width: $--input-height;
      height: auto;
      text-align: center;
      background: $--background-color-base;
      color: $--color-text-regular;
      cursor: pointer;
      font-size: 13px;
  
      &:hover {
        color: $--color-primary;
  
        &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
          border-color: $--input-focus-border;
        }
      }
  
      &.is-disabled {
        color: $--disabled-color-base;
        cursor: not-allowed;
      }
    }
  
    @include e(increase) {
      right: 1px;
      border-radius: 0 $--border-radius-base $--border-radius-base 0;
      border-left: $--border-base;
    }
  
    @include e(decrease) {
      left: 1px;
      border-radius: $--border-radius-base 0 0 $--border-radius-base;
      border-right: $--border-base;
    }
  
    @include when(disabled) {
      @include e((increase, decrease)) {
        border-color: $--disabled-border-base;
        color: $--disabled-border-base;
  
        &:hover {
          color: $--disabled-border-base;
          cursor: not-allowed;
        }
      }
    }
  
    @include m(medium) {
      width: 200px;
      line-height: #{$--input-medium-height - 2};
  
      @include e((increase, decrease)) {
        width: $--input-medium-height;
        font-size: $--input-medium-font-size;
      }
  
      .el-input__inner {
        padding-left: #{$--input-medium-height + 7};
        padding-right: #{$--input-medium-height + 7};
      }
    }
  
    @include m(small) {
      width: 130px;
      line-height: #{$--input-small-height - 2};
  
      @include e((increase, decrease)) {
        width: $--input-small-height;
        font-size: $--input-small-font-size;
  
        [class*=el-icon] {
          transform: scale(.9);
        }
      }
  
      .el-input__inner {
        padding-left: #{$--input-small-height + 7};
        padding-right: #{$--input-small-height + 7};
      }
    }
  
    @include m(mini) {
      width: 130px;
      line-height: #{$--input-mini-height - 2};
  
      @include e((increase, decrease)) {
        width: $--input-mini-height;
        font-size: $--input-mini-font-size;
  
        [class*=el-icon] {
          transform: scale(.8);
        }
      }
  
      .el-input__inner {
        padding-left: #{$--input-mini-height + 7};
        padding-right: #{$--input-mini-height + 7};
      }
    }
  
    @include when(without-controls) {
      .el-input__inner {
        padding-left: 15px;
        padding-right: 15px;
      }
    }
  
    @include when(controls-right) {
      .el-input__inner {
        padding-left: 15px;
        padding-right: #{$--input-height + 10};
      }
  
      @include e((increase, decrease)) {
        height: auto;
        line-height: #{($--input-height - 2) / 2};
  
        [class*=el-icon] {
          transform: scale(.8);
        }
      }
  
      @include e(increase) {
        border-radius: 0 $--border-radius-base 0 0;
        border-bottom: $--border-base;
      }
  
      @include e(decrease) {
        right: 1px;
        bottom: 1px;
        top: auto;
        left: auto;
        border-right: none;
        border-left: $--border-base;
        border-radius: 0 0 $--border-radius-base 0;
      }
  
      &[class*=medium] {
        [class*=increase], [class*=decrease] {
          line-height: #{($--input-medium-height - 2) / 2};
        }
      }
  
      &[class*=small] {
        [class*=increase], [class*=decrease] {
          line-height: #{($--input-small-height - 2) / 2};
        }
      }
  
      &[class*=mini] {
        [class*=increase], [class*=decrease] {
          line-height: #{($--input-mini-height - 2) / 2};
        }
      }
    }
  }