vxe-pc-ui 4.5.31 → 4.5.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/es/form/style.css +12 -12
  2. package/es/form/style.min.css +1 -1
  3. package/es/icon/style.css +1 -1
  4. package/es/input/src/input.js +2 -2
  5. package/es/number-input/src/number-input.js +248 -165
  6. package/es/number-input/style.css +74 -770
  7. package/es/number-input/style.min.css +1 -1
  8. package/es/style.css +1 -1
  9. package/es/style.min.css +1 -1
  10. package/es/tooltip/style.css +1 -1
  11. package/es/tooltip/style.min.css +1 -1
  12. package/es/ui/index.js +11 -4
  13. package/es/ui/src/dom.js +1 -1
  14. package/es/ui/src/log.js +1 -1
  15. package/es/vxe-form/style.css +12 -12
  16. package/es/vxe-form/style.min.css +1 -1
  17. package/es/vxe-number-input/style.css +74 -770
  18. package/es/vxe-number-input/style.min.css +1 -1
  19. package/es/vxe-tooltip/style.css +1 -1
  20. package/es/vxe-tooltip/style.min.css +1 -1
  21. package/lib/form/style/style.css +12 -12
  22. package/lib/form/style/style.min.css +1 -1
  23. package/lib/icon/style/style.css +1 -1
  24. package/lib/icon/style/style.min.css +1 -1
  25. package/lib/index.umd.js +255 -160
  26. package/lib/index.umd.min.js +1 -1
  27. package/lib/input/src/input.js +2 -2
  28. package/lib/input/src/input.min.js +1 -1
  29. package/lib/number-input/src/number-input.js +240 -152
  30. package/lib/number-input/src/number-input.min.js +1 -1
  31. package/lib/number-input/style/style.css +74 -770
  32. package/lib/number-input/style/style.min.css +1 -1
  33. package/lib/style.css +1 -1
  34. package/lib/style.min.css +1 -1
  35. package/lib/tooltip/style/style.css +1 -1
  36. package/lib/tooltip/style/style.min.css +1 -1
  37. package/lib/ui/index.js +11 -4
  38. package/lib/ui/index.min.js +1 -1
  39. package/lib/ui/src/dom.js +1 -1
  40. package/lib/ui/src/dom.min.js +1 -1
  41. package/lib/ui/src/log.js +1 -1
  42. package/lib/ui/src/log.min.js +1 -1
  43. package/lib/vxe-form/style/style.css +12 -12
  44. package/lib/vxe-form/style/style.min.css +1 -1
  45. package/lib/vxe-number-input/style/style.css +74 -770
  46. package/lib/vxe-number-input/style/style.min.css +1 -1
  47. package/lib/vxe-tooltip/style/style.css +1 -1
  48. package/lib/vxe-tooltip/style/style.min.css +1 -1
  49. package/package.json +1 -1
  50. package/packages/input/src/input.ts +2 -2
  51. package/packages/number-input/src/number-input.ts +264 -177
  52. package/packages/ui/index.ts +10 -3
  53. package/packages/ui/src/dom.ts +1 -1
  54. package/styles/components/form.scss +12 -12
  55. package/styles/components/number-input.scss +73 -598
  56. package/styles/components/tooltip.scss +1 -1
  57. package/styles/theme/base.scss +4 -4
  58. package/styles/theme/dark.scss +3 -0
  59. package/styles/theme/light.scss +3 -0
  60. package/types/components/number-input.d.ts +80 -6
  61. package/types/components/table.d.ts +4 -1
  62. package/types/ui/global-icon.d.ts +4 -2
  63. /package/es/icon/{iconfont.1745654997780.ttf → iconfont.1745889662360.ttf} +0 -0
  64. /package/es/icon/{iconfont.1745654997780.woff → iconfont.1745889662360.woff} +0 -0
  65. /package/es/icon/{iconfont.1745654997780.woff2 → iconfont.1745889662360.woff2} +0 -0
  66. /package/es/{iconfont.1745654997780.ttf → iconfont.1745889662360.ttf} +0 -0
  67. /package/es/{iconfont.1745654997780.woff → iconfont.1745889662360.woff} +0 -0
  68. /package/es/{iconfont.1745654997780.woff2 → iconfont.1745889662360.woff2} +0 -0
  69. /package/lib/icon/style/{iconfont.1745654997780.ttf → iconfont.1745889662360.ttf} +0 -0
  70. /package/lib/icon/style/{iconfont.1745654997780.woff → iconfont.1745889662360.woff} +0 -0
  71. /package/lib/icon/style/{iconfont.1745654997780.woff2 → iconfont.1745889662360.woff2} +0 -0
  72. /package/lib/{iconfont.1745654997780.ttf → iconfont.1745889662360.ttf} +0 -0
  73. /package/lib/{iconfont.1745654997780.woff → iconfont.1745889662360.woff} +0 -0
  74. /package/lib/{iconfont.1745654997780.woff2 → iconfont.1745889662360.woff2} +0 -0
@@ -1,14 +1,15 @@
1
1
  @use "sass:list";
2
+ @use '../helpers/baseMixin.scss';
2
3
 
3
4
  .vxe-number-input--readonly {
4
5
  color: var(--vxe-ui-font-color);
5
6
  display: inline-flex;
6
7
  }
7
- .vxe-number-input--wrapper {
8
+ .vxe-number-input--input-inner {
8
9
  flex-grow: 1;
9
10
  overflow: hidden;
10
11
  }
11
- .vxe-number-input--inner {
12
+ .vxe-number-input--input {
12
13
  display: block;
13
14
  width: 100%;
14
15
  height: 100%;
@@ -33,8 +34,6 @@
33
34
  appearance: none;
34
35
  -moz-appearance: textfield;
35
36
  }
36
- &[type="search"],
37
- &[type="search"]::-webkit-search-cancel-button,
38
37
  &[type="number"]::-webkit-outer-spin-button,
39
38
  &[type="number"]::-webkit-inner-spin-button {
40
39
  appearance: none;
@@ -45,6 +44,11 @@
45
44
  background-color: var(--vxe-ui-input-disabled-background-color);
46
45
  }
47
46
  }
47
+ .vxe-number-input--input-wrapper {
48
+ display: flex;
49
+ flex-grow: 1;
50
+ overflow: hidden;
51
+ }
48
52
 
49
53
  // 禁用
50
54
  .vxe-number-input {
@@ -52,8 +56,7 @@
52
56
  background-color: var(--vxe-ui-input-disabled-background-color);
53
57
  .vxe-number-input--prefix,
54
58
  .vxe-number-input--suffix,
55
- .vxe-number-input--clear-icon,
56
- .vxe-number-input--control-icon {
59
+ .vxe-number-input--clear-icon {
57
60
  cursor: not-allowed;
58
61
  }
59
62
  .vxe-number-input--prefix,
@@ -94,12 +97,10 @@
94
97
  padding-left: 0.5em;
95
98
  }
96
99
  .vxe-number-input--clear-icon,
97
- .vxe-number-input--control-icon,
98
100
  .vxe-number-input--suffix-icon {
99
101
  padding-right: 0.5em;
100
102
  }
101
- .vxe-number-input--clear-icon,
102
- .vxe-number-input--control-icon {
103
+ .vxe-number-input--clear-icon {
103
104
  height: 100%;
104
105
  color: var(--vxe-ui-input-placeholder-color);
105
106
  cursor: pointer;
@@ -114,30 +115,6 @@
114
115
  }
115
116
  }
116
117
 
117
- .vxe-number-input--number-btn {
118
- height: 50%;
119
- display: flex;
120
- align-items: center;
121
- justify-content: center;
122
- &:hover {
123
- color: var(--vxe-ui-font-color);
124
- }
125
- &:active {
126
- color: var(--vxe-ui-font-primary-color);
127
- }
128
- }
129
- .vxe-number-input--number-icon {
130
- display: flex;
131
- flex-direction: column;
132
- height: 100%;
133
- .vxe-number-input--number-btn {
134
- &.is--disabled {
135
- cursor: no-drop;
136
- color: var(--vxe-ui-font-disabled-color);
137
- }
138
- }
139
- }
140
-
141
118
  // 统计字数
142
119
  .vxe-number-input--count {
143
120
  flex-shrink: 0;
@@ -152,421 +129,103 @@
152
129
  // 对齐方式
153
130
  .vxe-number-input {
154
131
  &.is--left {
155
- .vxe-number-input--inner {
132
+ .vxe-number-input--input {
156
133
  text-align: left;
157
134
  }
158
135
  }
159
136
  &.is--center {
160
- .vxe-number-input--inner {
137
+ .vxe-number-input--input {
161
138
  text-align: center;
162
139
  }
163
140
  }
164
141
  &.is--right {
165
- .vxe-number-input--inner {
142
+ .vxe-number-input--input {
166
143
  text-align: right;
167
144
  }
168
145
  }
169
146
  }
170
147
 
171
- .vxe-number-input--panel {
172
- display: none;
173
- position: absolute;
174
- left: 0;
175
- padding: 4px 0;
176
- color: var(--vxe-ui-font-color);
177
- font-size: var(--vxe-ui-font-size-default);
178
- text-align: left;
179
- &:not(.is--transfer) {
180
- min-width: 100%;
181
- }
182
- &.is--transfer {
183
- position: fixed;
184
- }
185
- &.ani--leave {
186
- display: block;
187
- opacity: 0;
188
- transform: scaleY(0.5);
189
- transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
190
- transform-origin: center top;
191
- backface-visibility: hidden;
192
- transform-style: preserve-3d;
193
- &[placement="top"] {
194
- transform-origin: center bottom;
195
- }
196
- }
197
- &.ani--enter {
198
- opacity: 1;
199
- transform: scaleY(1);
200
- }
201
- }
202
-
203
- .vxe-number-input--panel-wrapper,
204
- .vxe-number-input--panel-layout-wrapper {
205
- background-color: var(--vxe-ui-layout-background-color);
206
- border: 1px solid var(--vxe-ui-base-popup-border-color);
207
- box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
208
- border-radius: var(--vxe-ui-base-border-radius);
209
- }
210
-
211
- .vxe-number-input--panel-wrapper {
212
- overflow-x: hidden;
213
- overflow-y: auto;
214
- }
215
-
216
- .vxe-number-input--panel-layout-wrapper {
217
- display: flex;
218
- flex-direction: row;
219
- }
220
-
221
- .vxe-number-input--panel {
222
- &.type--date,
223
- &.type--week,
224
- &.type--month,
225
- &.type--quarter,
226
- &.type--year {
227
- user-select: none;
228
- }
229
- &.type--datetime {
230
- .vxe-number-input--panel-right-wrapper {
231
- display: flex;
232
- flex-direction: column;
233
- border-left: 1px solid var(--vxe-ui-input-border-color);
234
- }
235
- }
236
- &.type--date,
237
- &.type--datetime {
238
- .vxe-number-input--date-picker-body {
239
- th {
240
- width: 14.28571%;
241
- }
242
- }
243
- }
244
- &.type--week {
245
- .vxe-number-input--date-picker-body {
246
- table {
247
- th {
248
- width: 12%;
249
- &:first-child {
250
- width: 14%;
251
- }
252
- }
253
- }
254
- }
255
- }
256
- &.type--quarter {
257
- .vxe-number-input--date-picker-body {
258
- table {
259
- th {
260
- width: 50%;
261
- }
262
- }
263
- }
264
- }
265
- &.type--month,
266
- &.type--year {
267
- .vxe-number-input--date-picker-body {
268
- td {
269
- width: 25%;
270
- }
271
- }
272
- }
273
- }
274
-
275
- .vxe-number-input--time-picker-title {
276
- display: inline-block;
277
- text-align: center;
278
- border: 1px solid var(--vxe-ui-input-border-color);
279
- border-radius: var(--vxe-ui-base-border-radius);
280
- }
281
- .vxe-number-input--time-picker-confirm {
282
- position: absolute;
283
- right: 0;
284
- top: 0;
285
- }
286
- .vxe-number-input--time-picker-confirm,
287
- .vxe-number-input--date-picker-confirm {
148
+ // 控制按钮
149
+ .vxe-number-input--minus-btn,
150
+ .vxe-number-input--plus-btn {
151
+ border: 0;
288
152
  outline: 0;
289
- border: 1px solid var(--vxe-ui-input-border-color);
290
- border-radius: var(--vxe-ui-base-border-radius);
153
+ width: 3em;
154
+ flex-shrink: 0;
155
+ font-family: inherit;
156
+ color: var(--vxe-ui-font-color);
157
+ user-select: none;
158
+ appearance: none;
291
159
  cursor: pointer;
292
- color: var(--vxe-ui-input-date-time-confirm-button-color);
293
- border-color: var(--vxe-ui-font-primary-color);
294
- background-color: var(--vxe-ui-font-primary-color);
160
+ background-color: var(--vxe-ui-number-input-control-button-color);
161
+ transform: scale(1);
162
+ @include baseMixin.createAnimationTransition(transform, 0.1s);
163
+ &:focus,
295
164
  &:hover {
296
- background-color: var(--vxe-ui-font-primary-lighten-color);
297
- border-color: var(--vxe-ui-font-primary-lighten-color);
165
+ color: var(--vxe-ui-font-primary-color);
298
166
  }
299
167
  &:active {
300
- background-color: var(--vxe-ui-font-primary-darken-color);
301
- border-color: var(--vxe-ui-font-primary-darken-color);
302
- }
303
- }
304
-
305
- .vxe-number-input--time-picker-header {
306
- display: flex;
307
- position: relative;
308
- flex-shrink: 0;
309
- }
310
-
311
- .vxe-number-input--date-picker-header {
312
- display: flex;
313
- flex-direction: row;
314
- user-select: none;
315
- .vxe-number-input--date-picker-type-wrapper {
316
- flex-grow: 1;
317
- }
318
- .vxe-number-input--date-picker-btn-wrapper {
319
- flex-shrink: 0;
320
- text-align: center;
168
+ transform: scale(0.9);
321
169
  }
322
- }
323
- .vxe-number-input--date-picker-type-wrapper {
324
- .vxe-number-input--date-picker-label,
325
- .vxe-number-input--date-picker-btn {
326
- display: inline-block;
327
- }
328
- }
329
- .vxe-number-input--date-picker-btn-wrapper {
330
- display: flex;
331
- flex-direction: row;
332
- }
333
- .vxe-number-input--date-picker-label,
334
- .vxe-number-input--date-picker-btn {
335
- display: flex;
336
- align-items: center;
337
- justify-content: center;
338
- background-color: var(--vxe-ui-layout-background-color);
339
- }
340
- .vxe-number-input--date-picker-btn {
341
170
  &.is--disabled {
171
+ cursor: not-allowed;
342
172
  color: var(--vxe-ui-font-disabled-color);
343
- cursor: no-drop;
344
- }
345
- &:not(.is--disabled) {
346
- cursor: pointer;
347
- &:hover {
348
- background-color: #fff;
349
- }
350
- &:active {
351
- background-color: #fff;
352
- }
353
173
  }
354
174
  }
355
- .vxe-number-input--date-picker-body {
356
- border-radius: var(--vxe-ui-base-border-radius);
357
- border: 1px solid var(--vxe-ui-base-popup-border-color);
358
- user-select: none;
359
- table {
360
- border: 0;
361
- width: 100%;
362
- border-spacing: 0;
363
- border-collapse: separate;
364
- text-align: center;
365
- table-layout: fixed
366
- }
367
- th,
368
- td {
369
- font-weight: normal;
175
+ .vxe-number-input--side-control {
176
+ display: inline-flex;
177
+ flex-direction: column;
178
+ flex-shrink: 0;
179
+ height: 100%;
180
+ & > .vxe-number-input--plus-btn {
181
+ border-bottom: 1px solid var(--vxe-ui-input-border-color);
370
182
  }
371
- th {
372
- box-shadow: inset 0 -1px 0 0 var(--vxe-ui-base-popup-border-color);
183
+ & > .vxe-number-input--minus-btn,
184
+ & > .vxe-number-input--plus-btn {
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ height: 50%;
189
+ i {
190
+ font-size: 0.72em;
191
+ }
373
192
  }
374
- td {
375
- &.is--prev,
376
- &.is--next {
377
- color: var(--vxe-ui-font-disabled-color);
378
- .vxe-number-input--date-label,
379
- .vxe-number-input--date-festival {
380
- color: var(--vxe-ui-font-disabled-color);
193
+ }
194
+ .vxe-number-input {
195
+ &.control-left {
196
+ .vxe-number-input--side-control {
197
+ border-right: 1px solid var(--vxe-ui-input-border-color);
198
+ & > .vxe-number-input--plus-btn {
199
+ border-radius: var(--vxe-ui-base-border-radius) 0 0 0;
381
200
  }
382
- }
383
- &.is--now {
384
- box-shadow: inset 0 0 0 1px var(--vxe-ui-base-popup-border-color);
385
- &:not(.is--selected) {
386
- &.is--current {
387
- color: var(--vxe-ui-font-primary-color);
388
- .vxe-number-input--date-label,
389
- .vxe-number-input--date-festival {
390
- color: var(--vxe-ui-font-primary-color);
391
- }
392
- }
201
+ & > .vxe-number-input--minus-btn {
202
+ border-radius: 0 0 0 var(--vxe-ui-base-border-radius);
393
203
  }
394
204
  }
395
- &.is--hover {
396
- background-color: var(--vxe-ui-input-date-picker-hover-background-color);
397
- }
398
- &.is--selected {
399
- color: var(--vxe-ui-input-date-picker-selected-color);
400
- background-color: var(--vxe-ui-font-primary-color);
401
- &.is--prev,
402
- &.is--next {
403
- background-color: var(--vxe-ui-font-primary-lighten-color);
404
- }
405
- .vxe-number-input--date-label,
406
- .vxe-number-input--date-festival {
407
- color: var(--vxe-ui-input-date-picker-festival-selected-color);
205
+ }
206
+ &.control-right {
207
+ .vxe-number-input--side-control {
208
+ border-left: 1px solid var(--vxe-ui-input-border-color);
209
+ & > .vxe-number-input--plus-btn {
210
+ border-radius: 0 var(--vxe-ui-base-border-radius) 0 0;
408
211
  }
409
- .vxe-number-input--date-label {
410
- &.is-notice {
411
- &:before {
412
- background-color: var(--vxe-ui-input-date-picker-notice-selected-background-color);
413
- }
414
- }
212
+ & > .vxe-number-input--minus-btn {
213
+ border-radius: 0 0 var(--vxe-ui-base-border-radius) 0;
415
214
  }
416
215
  }
417
- &:not(.is--disabled) {
418
- cursor: pointer;
419
- }
420
- &.is--disabled {
421
- cursor: no-drop;
422
- color: var(--vxe-ui-input-disabled-color);
423
- background-color: var(--vxe-ui-input-disabled-background-color);
424
- .vxe-number-input--date-label,
425
- .vxe-number-input--date-festival {
426
- color: var(--vxe-ui-input-disabled-color);
427
- }
428
- }
429
- }
430
- }
431
-
432
- .vxe-number-input--date-week-view {
433
- th {
434
- &:first-child {
435
- box-shadow: inset -1px -1px 0 0 var(--vxe-ui-base-popup-border-color);
436
- }
437
- }
438
- td {
439
- &:first-child {
440
- box-shadow: inset -1px 0 0 0 var(--vxe-ui-base-popup-border-color);
441
- }
442
- }
443
- }
444
-
445
- .vxe-number-input--date-label,
446
- .vxe-number-input--date-festival {
447
- display: block;
448
- overflow: hidden;
449
- }
450
-
451
- .vxe-number-input--date-label {
452
- position: relative;
453
- &.is-notice {
454
- &:before {
455
- content: "";
456
- position: absolute;
457
- width: 4px;
458
- height: 4px;
459
- left: 0.8em;
460
- top: 0.1em;
461
- transform: translateX(-50%);
462
- border-radius: 100%;
463
- background-color: var(--vxe-ui-input-date-notice-background-color);
464
- }
465
- }
466
- }
467
- .vxe-number-input--date-label--extra {
468
- position: absolute;
469
- right: 0.1em;
470
- top: -0.2em;
471
- font-size: 12px;
472
- line-height: 12px;
473
- transform: scale(0.7);
474
- color: var(--vxe-ui-input-date-extra-color);
475
- &.is-important {
476
- color: var(--vxe-ui-input-date-extra-important-color);
477
- }
478
- }
479
-
480
- .vxe-number-input--date-festival {
481
- color: var(--vxe-ui-input-date-festival-color);
482
- height: 14px;
483
- line-height: 1;
484
- overflow: hidden;
485
- &.is-important {
486
- color: var(--vxe-ui-input-date-festival-important-color);
487
- }
488
- }
489
- .vxe-number-input--date-festival--label {
490
- display: block;
491
- font-size: 12px;
492
- transform: scale(0.8);
493
- }
494
-
495
- @keyframes festivalOverlap2 {
496
- 0%, 45%, 100% {
497
- transform: translateY(0);
498
- }
499
- 50%, 95% {
500
- transform: translateY(-14px);
501
- }
502
- }
503
-
504
- @keyframes festivalOverlap3 {
505
- 0%, 20%, 100% {
506
- transform: translateY(0);
507
- }
508
- 25%, 45%, 75%, 95% {
509
- transform: translateY(-14px);
510
- }
511
- 50%, 70% {
512
- transform: translateY(-28px);
513
- }
514
- }
515
-
516
- .vxe-number-input--date-festival--overlap {
517
- display: block;
518
- font-size: 12px;
519
- &.overlap--2 {
520
- animation: festivalOverlap2 6s infinite ease-in-out;
521
216
  }
522
- &.overlap--3 {
523
- animation: festivalOverlap3 9s infinite ease-in-out;
524
- }
525
- & > span {
526
- height: 14px;
527
- display: block;
528
- transform: scale(0.8);
529
- }
530
- }
531
-
532
- .vxe-number-input--time-picker-body {
533
- position: relative;
534
- display: flex;
535
- flex-direction: row;
536
- border: 1px solid var(--vxe-ui-base-popup-border-color);
537
- flex-grow: 1;
538
- border-radius: var(--vxe-ui-base-border-radius);
539
- user-select: none;
540
- & > ul {
217
+ & > .vxe-number-input--minus-btn,
218
+ & > .vxe-number-input--plus-btn {
541
219
  height: 100%;
542
- overflow: hidden;
543
- margin: 0;
544
- padding: 0;
545
- &:before,
546
- &:after {
547
- content: " ";
548
- display: block;
549
- }
550
- &:hover {
551
- overflow-y: auto;
552
- }
553
- & > li {
554
- display: block;
555
- &:hover {
556
- background-color: var(--vxe-ui-input-date-picker-hover-background-color);
557
- cursor: pointer;
558
- }
559
- &.is--selected {
560
- font-weight: 700;
561
- color: var(--vxe-ui-font-primary-color);
562
- }
563
- }
220
+ font-size: 0.84em;
564
221
  }
565
- .vxe-number-input--time-picker-minute-list {
566
- border-left: 1px solid var(--vxe-ui-base-popup-border-color);
222
+ & > .vxe-number-input--minus-btn {
223
+ border-right: 1px solid var(--vxe-ui-input-border-color);
224
+ border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
567
225
  }
568
- .vxe-number-input--time-picker-second-list {
569
- border-left: 1px solid var(--vxe-ui-base-popup-border-color);
226
+ & > .vxe-number-input--plus-btn {
227
+ border-left: 1px solid var(--vxe-ui-input-border-color);
228
+ border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
570
229
  }
571
230
  }
572
231
 
@@ -574,15 +233,7 @@
574
233
  font-size: var(--vxe-ui-font-size-default);
575
234
  height: var(--vxe-ui-input-height-default);
576
235
  line-height: var(--vxe-ui-input-height-default);
577
- .vxe-number-input--inner {
578
- &[type="date"]::-webkit-inner-spin-button,
579
- &[type="month"]::-webkit-inner-spin-button,
580
- &[type="week"]::-webkit-inner-spin-button {
581
- margin-top: 6px;
582
- }
583
- &[type="date"]::-webkit-inner-spin-button,
584
- &[type="month"]::-webkit-inner-spin-button,
585
- &[type="week"]::-webkit-inner-spin-button,
236
+ .vxe-number-input--input {
586
237
  &[type="number"]::-webkit-inner-spin-button {
587
238
  height: 24px;
588
239
  }
@@ -591,191 +242,15 @@
591
242
  font-size: var(--vxe-ui-font-size-medium);
592
243
  height: var(--vxe-ui-input-height-medium);
593
244
  line-height: var(--vxe-ui-input-height-medium);
594
- .vxe-number-input--inner {
595
- &[type="date"]::-webkit-inner-spin-button,
596
- &[type="month"]::-webkit-inner-spin-button,
597
- &[type="week"]::-webkit-inner-spin-button {
598
- margin-top: 4px;
599
- }
600
- }
601
245
  }
602
246
  &.size--small {
603
247
  font-size: var(--vxe-ui-font-size-small);
604
248
  height: var(--vxe-ui-input-height-small);
605
249
  line-height: var(--vxe-ui-input-height-small);
606
- .vxe-number-input--inner {
607
- &[type="date"]::-webkit-inner-spin-button,
608
- &[type="month"]::-webkit-inner-spin-button,
609
- &[type="week"]::-webkit-inner-spin-button {
610
- margin-top: 2px;
611
- }
612
- }
613
250
  }
614
251
  &.size--mini {
615
252
  font-size: var(--vxe-ui-font-size-mini);
616
253
  height: var(--vxe-ui-input-height-mini);
617
254
  line-height: var(--vxe-ui-input-height-mini);
618
- .vxe-number-input--inner {
619
- &[type="date"]::-webkit-inner-spin-button,
620
- &[type="month"]::-webkit-inner-spin-button,
621
- &[type="week"]::-webkit-inner-spin-button {
622
- margin-top: 0;
623
- }
624
- }
625
- }
626
- }
627
-
628
- @mixin getPanelStyle ($sizeIndex) {
629
- $fontSizeList: var(--vxe-ui-font-size-default), var(--vxe-ui-font-size-medium), var(--vxe-ui-font-size-small), var(--vxe-ui-font-size-mini);
630
- $timeWeekRowHeightList: var(--vxe-ui-input-date-time-week-row-height-default), var(--vxe-ui-input-date-time-week-row-height-medium), var(--vxe-ui-input-date-time-week-row-height-small), var(--vxe-ui-input-date-time-week-row-height-mini);
631
- $monthYearRowHeightList: var(--vxe-ui-input-date-month-year-row-height-default), var(--vxe-ui-input-date-month-year-row-height-medium), var(--vxe-ui-input-date-month-year-row-height-small), var(--vxe-ui-input-date-month-year-row-height-mini);
632
- $quarterRowHeightList: var(--vxe-ui-input-date-quarter-row-height-default), var(--vxe-ui-input-date-quarter-row-height-medium), var(--vxe-ui-input-date-quarter-row-height-small), var(--vxe-ui-input-date-quarter-row-height-mini);
633
- $titleRowHeightList: var(--vxe-ui-input-date-title-height-default), var(--vxe-ui-input-date-title-height-medium), var(--vxe-ui-input-date-title-height-small), var(--vxe-ui-input-date-title-height-mini);
634
-
635
- font-size: list.nth($fontSizeList, $sizeIndex);
636
- .vxe-number-input--panel-wrapper {
637
- max-height: 400px - $sizeIndex * 20;
638
- }
639
- &.type--date,
640
- &.type--time,
641
- &.type--week,
642
- &.type--month,
643
- &.type--quarter,
644
- &.type--year {
645
- .vxe-number-input--panel-wrapper {
646
- padding: 12px - $sizeIndex;
647
- }
648
- }
649
- &.type--date,
650
- &.type--month,
651
- &.type--quarter,
652
- &.type--year {
653
- .vxe-number-input--panel-wrapper {
654
- $widthList: 336px, 336px, 312px, 288px;
655
- width: list.nth($widthList, $sizeIndex);
656
- }
657
- }
658
- &.type--week {
659
- .vxe-number-input--panel-wrapper {
660
- $widthList: 380px, 380px, 354px, 326px;
661
- width: list.nth($widthList, $sizeIndex);
662
- }
663
- }
664
- &.type--time {
665
- .vxe-number-input--panel-wrapper {
666
- $widthList: 170px, 168px, 154px, 146px;
667
- width: list.nth($widthList, $sizeIndex);
668
- }
669
- }
670
- &.type--datetime {
671
- .vxe-number-input--panel-left-wrapper {
672
- $widthList: 336px, 336px, 312px, 288px;
673
- width: list.nth($widthList, $sizeIndex);
674
- }
675
- .vxe-number-input--panel-left-wrapper,
676
- .vxe-number-input--panel-right-wrapper {
677
- padding: 12px - $sizeIndex;
678
- }
679
- }
680
- .vxe-number-input--time-picker-title {
681
- height: 31px - $sizeIndex;
682
- line-height: 31px - $sizeIndex;
683
- padding: 0 12px - $sizeIndex;
684
- }
685
- .vxe-number-input--date-picker-label,
686
- .vxe-number-input--date-picker-btn {
687
- height: 31px - $sizeIndex;
688
- line-height: 31px - $sizeIndex;
689
- }
690
- .vxe-number-input--date-picker-btn-wrapper {
691
- .vxe-number-input--date-picker-btn {
692
- margin-left: 9px - $sizeIndex;
693
- }
694
- .vxe-number-input--date-picker-prev-btn,
695
- .vxe-number-input--date-picker-current-btn,
696
- .vxe-number-input--date-picker-next-btn {
697
- width: 31px - $sizeIndex;
698
- border-radius: var(--vxe-ui-base-border-radius);
699
- border: 1px solid var(--vxe-ui-input-border-color);
700
- }
701
- }
702
- .vxe-number-input--date-picker-type-wrapper {
703
- .vxe-number-input--date-picker-label,
704
- .vxe-number-input--date-picker-btn {
705
- padding: 0 10px - $sizeIndex;
706
- }
707
- }
708
- .vxe-number-input--time-picker-header,
709
- .vxe-number-input--date-picker-header {
710
- $paddingBottomList: 8px, 7px, 6px, 5px;
711
- padding-bottom: list.nth($paddingBottomList, $sizeIndex);
712
- }
713
- .vxe-number-input--date-picker-body table,
714
- .vxe-number-input--time-picker-body {
715
- height: calc(list.nth($timeWeekRowHeightList, $sizeIndex) * 6 + list.nth($titleRowHeightList, $sizeIndex));
716
- }
717
- .vxe-number-input--time-picker-body {
718
- $ulWidthList: 48px, 48px, 44px, 42px;
719
- & > ul {
720
- width: list.nth($ulWidthList, $sizeIndex);
721
- &:before,
722
- &:after {
723
- $heightList: 120px, 120px, 110px, 100px;
724
- height: list.nth($heightList, $sizeIndex);
725
- }
726
- & > li {
727
- height: 26px;
728
- padding-left: 10px - $sizeIndex;
729
- }
730
- }
731
- .vxe-number-input--time-picker-minute-list {
732
- left: list.nth($ulWidthList, $sizeIndex);
733
- }
734
- .vxe-number-input--time-picker-second-list {
735
- left: calc(list.nth($ulWidthList, $sizeIndex) * 2);
736
- }
737
- }
738
- .vxe-number-input--date-day-view,
739
- .vxe-number-input--date-week-view {
740
- td {
741
- height: list.nth($timeWeekRowHeightList, $sizeIndex);
742
- }
743
- }
744
- .vxe-number-input--date-quarter-view {
745
- td {
746
- height: list.nth($quarterRowHeightList, $sizeIndex);
747
- }
748
- }
749
- .vxe-number-input--date-month-view,
750
- .vxe-number-input--date-year-view {
751
- td {
752
- height: list.nth($monthYearRowHeightList, $sizeIndex);
753
- }
754
- }
755
- .vxe-number-input--date-picker-body {
756
- th {
757
- height: list.nth($titleRowHeightList, $sizeIndex);
758
- }
759
- }
760
- .vxe-number-input--time-picker-confirm,
761
- .vxe-number-input--date-picker-confirm {
762
- height: 31px - $sizeIndex;
763
- padding: 0 10px - $sizeIndex;
764
- }
765
- .vxe-number-input--date-label {
766
- line-height: calc(list.nth($fontSizeList, $sizeIndex) + 1px);
767
- }
768
- }
769
-
770
- .vxe-number-input--panel {
771
- @include getPanelStyle(1);
772
- &.size--medium {
773
- @include getPanelStyle(2);
774
- }
775
- &.size--small {
776
- @include getPanelStyle(3);
777
- }
778
- &.size--mini {
779
- @include getPanelStyle(4);
780
255
  }
781
256
  }