1 | @import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
2 | @import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
3 | @import "../node_modules/bee-form-control/src/FormControl.scss";
|
4 | @import "../node_modules/bee-input-group/src/InputGroup.scss";
|
5 |
|
6 | $disable-border-color:#dfe1e6;
|
7 |
|
8 | .u-input-number {
|
9 | width: 100%;
|
10 | border: 1px solid $border-color-base;
|
11 | border-radius: $border-radius;
|
12 |
|
13 | &.u-input-number-sm {
|
14 | &.u-input-group.simple .u-input-group-btn .icon-group{
|
15 | height: 26px;
|
16 | }
|
17 | }
|
18 | &.u-input-number-lg {
|
19 | &.u-input-group.simple .u-input-group-btn .icon-group{
|
20 | height: 40px;
|
21 | }
|
22 | }
|
23 |
|
24 | &.u-input-group{
|
25 | border-spacing: 0;
|
26 | }
|
27 |
|
28 | &.u-input-group>span:first-child{
|
29 | border-right: 1px solid $border-color-base;
|
30 | }
|
31 |
|
32 | &.u-input-group>span:last-child{
|
33 | border-left: 1px solid $border-color-base;
|
34 | border-top-right-radius: $border-radius;
|
35 | border-bottom-right-radius: $border-radius;
|
36 | }
|
37 |
|
38 | &.disabled-con>span:first-child{
|
39 | border-right: 1px solid $disable-border-color;
|
40 | }
|
41 |
|
42 | &.disabled-con>span:last-child{
|
43 | border-left: 1px solid $disable-border-color;
|
44 | }
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 | &.u-input-group>span{
|
57 | background: #fff;
|
58 | }
|
59 | &.u-input-group>span:hover{
|
60 | background: $hover-bg-color-base;
|
61 | }
|
62 |
|
63 | &.u-input-group.simple .u-input-group-btn {
|
64 | position: relative;
|
65 | top: 0px;
|
66 | z-index: 2;
|
67 | right: 0;
|
68 | width: 22px;
|
69 | .icon-group {
|
70 |
|
71 | height: 32px;
|
72 | background: #fff;
|
73 | border-radius: 0 $border-radius $border-radius 0;
|
74 | -webkit-transition: opacity .24s linear .1s;
|
75 | transition: opacity .24s linear .1s;
|
76 | .plus {
|
77 | position: relative;
|
78 | display: block;
|
79 | width: 100%;
|
80 | text-align: center;
|
81 | line-height: 0;
|
82 | height: 50%;
|
83 | overflow: hidden;
|
84 | color: #505F79;
|
85 | -webkit-transition: all .1s linear;
|
86 | transition: all .1s linear;
|
87 | cursor: pointer;
|
88 | border-top-right-radius: $border-radius;
|
89 |
|
90 | &.disabled {
|
91 | cursor: not-allowed;
|
92 | background: #fff !important;
|
93 | color: #C1C7D0;
|
94 | }
|
95 | &.disabled-cursor {
|
96 | background: #f7f9fb;
|
97 | cursor: not-allowed;
|
98 | border-top-right-radius: $border-radius;
|
99 | &:hover {
|
100 | background: #f7f9fb;
|
101 | }
|
102 | }
|
103 | &:hover {
|
104 | background: $hover-bg-color-base;
|
105 | }
|
106 | }
|
107 | .reduce {
|
108 | position: relative;
|
109 | top: -1px;
|
110 | display: block;
|
111 | width: 100%;
|
112 | text-align: center;
|
113 | border-top: 1px solid $border-color-base;
|
114 | border-bottom-right-radius: $border-radius;
|
115 | line-height: 0;
|
116 | height: 50%;
|
117 | box-sizing: initial;
|
118 | overflow: hidden;
|
119 | color: #505F79;
|
120 | -webkit-transition: all .1s linear;
|
121 | transition: all .1s linear;
|
122 | cursor: pointer;
|
123 | &.disabled {
|
124 | cursor: not-allowed;
|
125 | background: #fff !important;
|
126 | color: #C1C7D0;
|
127 | }
|
128 | &.disabled-cursor {
|
129 | cursor: not-allowed;
|
130 | background: #f7f9fb;
|
131 | border-bottom-right-radius: $border-radius;
|
132 | border-top: 1px solid #DFE1E6;
|
133 | &:hover {
|
134 | background: #f7f9fb;
|
135 | }
|
136 | }
|
137 | &:hover {
|
138 | background: $hover-bg-color-base;
|
139 | }
|
140 | }
|
141 | .disabled-cursor.disabled {
|
142 | background: none;
|
143 | }
|
144 | .disabled-cursor {
|
145 | .uf {
|
146 | color: #C1C7D0;
|
147 | &:hover {
|
148 | color: #ccc;
|
149 | }
|
150 | }
|
151 | }
|
152 | .uf {
|
153 | font-size: 12px;
|
154 | line-height: 16px;
|
155 | }
|
156 | }
|
157 | }
|
158 | &.u-input-group.simple .u-input-group-btn[disabled] {
|
159 | background: #f7f9fb;
|
160 | }
|
161 | &.u-input-group.simple .u-form-control {
|
162 | text-align: left;
|
163 | width: 100%;
|
164 | border-right: 0;
|
165 | border-bottom-right-radius: 0;
|
166 | border-top-right-radius: 0;
|
167 | padding-right: 12px;
|
168 | }
|
169 | &.u-input-group.simple .u-form-control[disabled] {
|
170 | border-color:$border-color-base;
|
171 | }
|
172 | &.u-input-group.simple .u-form-control[disabled]+.u-input-group-btn .icon-group {
|
173 | border-color:$border-color-base;
|
174 | }
|
175 | &.u-input-group .u-form-control {
|
176 | width: 100%;
|
177 | text-align: center;
|
178 | border: transparent;
|
179 | }
|
180 | &.u-input-group .u-form-control[disabled] {
|
181 | border-top-color: $border-color-base;
|
182 | border-bottom-color: $border-color-base;
|
183 | }
|
184 | &.u-input-group .u-form-control:focus {
|
185 | border-color: #66afe9;
|
186 | }
|
187 | .u-input-group-addon {
|
188 | position: relative;
|
189 | cursor: pointer;
|
190 | padding: 6px;
|
191 | user-select: none;
|
192 | -moz-user-select: none;
|
193 | background: transparent;
|
194 | border:none;
|
195 | &.disabled {
|
196 | cursor: not-allowed;
|
197 | color: #C1C7D0;
|
198 | background: #fff !important;
|
199 | }
|
200 | &.disabled-cursor {
|
201 | cursor: not-allowed;
|
202 | background: #f7f9fb !important;
|
203 | color: #ccc;
|
204 | }
|
205 | }
|
206 |
|
207 | .u-input-number-auto .u-form-control {
|
208 | width: 100%;
|
209 | }
|
210 | .u-form-control::-webkit-outer-spin-button,
|
211 | .u-form-control::-webkit-inner-spin-button {
|
212 | -webkit-appearance: none;
|
213 | }
|
214 | input[type="number"]{
|
215 | -moz-appearance: textfield;
|
216 | }
|
217 | }
|
218 |
|
219 | .u-input-number-out .u-input-number.u-input-number-sm.u-input-group.simple .u-input-group-btn{
|
220 | top: 0px;
|
221 | }
|
222 |
|
223 | .u-input-number-out .u-input-number.u-input-number-lg.u-input-group.simple .u-input-group-btn{
|
224 | top: 0px;
|
225 | }
|
226 |
|
227 | .u-input-number-group {
|
228 | .u-input-number-out {
|
229 | width: calc( 50% - 10px );
|
230 | display: inline-block;
|
231 | }
|
232 | &-split{
|
233 | width: 20px;
|
234 | display: inline-block;
|
235 | text-align: center;
|
236 | position: relative;
|
237 | top: -10px;
|
238 | }
|
239 | }
|
240 |
|
241 |
|
242 | .u-table .u-table-tbody .u-table-row {
|
243 | .u-input-number {
|
244 | & .u-input-group-addon:first-of-type {
|
245 | position: relative;
|
246 | left: 2px;
|
247 | }
|
248 | & .u-input-group-addon:last-of-type {
|
249 | position: relative;
|
250 | right: 2px;
|
251 | }
|
252 | }
|
253 | .u-input-number.u-input-group.simple {
|
254 | .u-input-group-btn {
|
255 | right: 2px;
|
256 | }
|
257 | }
|
258 | }
|
259 |
|
260 | .disabled-con,
|
261 | .disabled-con .disabled-cursor > span:first-child,
|
262 | .disabled-con .disabled-cursor > span:last-child{
|
263 | border-color:$disable-border-color;
|
264 | }
|