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