UNPKG

37.4 kBSCSSView Raw
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$disabled-color-base: #909090;
6$disabled-border-color: #DFE1E6;
7.rc-calendar {
8 box-sizing: border-box;
9 color: #212121;
10}
11.rc-calendar * {
12 box-sizing: border-box;
13}
14.rc-calendar-hidden {
15 display: none;
16}
17.rc-calendar-input-wrap {
18 position: relative;
19 padding: 6px;
20 border-bottom: 1px solid $disabled-border-color;
21}
22.rc-calendar-input-wrap:after {
23 content: '';
24 clear: both;
25}
26.rc-calendar-date-input-wrap {
27 overflow: hidden;
28}
29.rc-calendar-time-picker {
30 position: absolute;
31 width: 100%;
32 top: 34px;
33 background-color: white;
34 height: 217px;
35}
36.rc-calendar-time-picker-panel {
37 width: 100%;
38 position: relative;
39}
40.rc-calendar-time-picker-panel .rc-time-picker-panel-input-wrap {
41 display: none;
42}
43.rc-calendar-time-picker-panel .rc-time-picker-panel-inner {
44 border: none;
45 box-shadow: none;
46}
47.rc-calendar-time-picker-panel .rc-time-picker-panel-select {
48 // width: 84px;
49 max-height: 217px;
50}
51.rc-calendar-time-picker-panel .rc-time-picker-panel-select li {
52 text-align: center;
53 padding: 0;
54 outline: none;
55}
56.rc-calendar-time-picker-panel{
57 .time-split-3{
58 width: 100%;
59 .rc-time-picker-panel-combobox{
60 width: 100%;
61 .rc-time-picker-panel-select{
62 width: 33%;
63 }
64 }
65 }
66 .time-split-2{
67 width: 100%;
68 .rc-time-picker-panel-combobox{
69 width: 100%;
70 .rc-time-picker-panel-select{
71 width: 50%;
72 }
73 }
74 }
75 .time-split-1{
76 width: 100%;
77 .rc-time-picker-panel-combobox{
78 width: 100%;
79 .rc-time-picker-panel-select{
80 width: 100%;
81 }
82 }
83 }
84}
85.rc-calendar-time-picker-wrap {
86 float: left;
87 width: 100%;
88}
89.rc-calendar-time-picker-wrap .rc-time-picker {
90 width: 100%;
91}
92.rc-calendar-time-picker-wrap .rc-time-picker-input {
93 padding: 0;
94 border: 1px solid transparent;
95 outline: 0;
96 height: 22px;
97}
98.rc-calendar-time-picker-wrap .rc-time-picker-icon {
99 display: none;
100}
101.rc-calendar-input {
102 border: 1px solid transparent;
103 width: 100%;
104 color: #212121;
105 cursor: text;
106 line-height: 1.5;
107 outline: 0;
108 height: 22px;
109 &::-ms-clear{//clear去掉叉
110 display: none;
111 }
112}
113.rc-calendar-input-invalid {
114 border-color: red;
115}
116.rc-calendar-clear-btn {
117 z-index: 9999;
118 position: absolute;
119 right: 6px;
120 cursor: pointer;
121 overflow: hidden;
122 width: 20px;
123 height: 20px;
124 text-align: center;
125 line-height: 20px;
126 top: 6px;
127 margin: 0;
128}
129.rc-calendar-clear-btn.uf{
130 color: #424242;
131 opacity: .7;
132}
133.rc-calendar-picker {
134 position: absolute;
135 left: -9999px;
136 top: -9999px;
137 z-index: 1000;
138}
139.rc-calendar-picker-hidden {
140 display: none;
141}
142.rc-calendar-picker-slide-up-enter {
143 animation-duration: .3s;
144 animation-fill-mode: both;
145 transform-origin: 0 0;
146 display: block !important;
147 opacity: 0;
148 animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
149 animation-play-state: paused;
150}
151.rc-calendar-picker-slide-up-appear {
152 animation-duration: .3s;
153 animation-fill-mode: both;
154 transform-origin: 0 0;
155 display: block !important;
156 opacity: 0;
157 animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
158 animation-play-state: paused;
159}
160.rc-calendar-picker-slide-up-leave {
161 animation-duration: .3s;
162 animation-fill-mode: both;
163 transform-origin: 0 0;
164 display: block !important;
165 opacity: 1;
166 animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
167 animation-play-state: paused;
168}
169.rc-calendar-picker-slide-up-enter.rc-calendar-picker-slide-up-enter-active.rc-calendar-picker-placement-bottomLeft,
170.rc-calendar-picker-slide-up-enter.rc-calendar-picker-slide-up-enter-active.rc-calendar-picker-placement-bottomRight,
171.rc-calendar-picker-slide-up-appear.rc-calendar-picker-slide-up-appear-active.rc-calendar-picker-placement-bottomLeft,
172.rc-calendar-picker-slide-up-appear.rc-calendar-picker-slide-up-appear-active.rc-calendar-picker-placement-bottomRight {
173 animation-name: rcDropdownSlideUpIn;
174 animation-play-state: running;
175}
176.rc-calendar-picker-slide-up-enter.rc-calendar-picker-slide-up-enter-active.rc-calendar-picker-placement-topLeft,
177.rc-calendar-picker-slide-up-enter.rc-calendar-picker-slide-up-enter-active.rc-calendar-picker-placement-topRight,
178.rc-calendar-picker-slide-up-appear.rc-calendar-picker-slide-up-appear-active.rc-calendar-picker-placement-topLeft,
179.rc-calendar-picker-slide-up-appear.rc-calendar-picker-slide-up-appear-active.rc-calendar-picker-placement-topRight {
180 animation-name: rcDropdownSlideDownIn;
181 animation-play-state: running;
182}
183.rc-calendar-picker-slide-up-leave.rc-calendar-picker-slide-up-leave-active.rc-calendar-picker-placement-bottomLeft,
184.rc-calendar-picker-slide-up-leave.rc-calendar-picker-slide-up-leave-active.rc-calendar-picker-placement-bottomRight {
185 animation-name: rcDropdownSlideUpOut;
186 animation-play-state: running;
187}
188.rc-calendar-picker-slide-up-leave.rc-calendar-picker-slide-up-leave-active.rc-calendar-picker-placement-topLeft,
189.rc-calendar-picker-slide-up-leave.rc-calendar-picker-slide-up-leave-active.rc-calendar-picker-placement-topRight {
190 animation-name: rcDropdownSlideDownOut;
191 animation-play-state: running;
192}
193@keyframes rcDropdownSlideUpIn {
194 0% {
195 opacity: 0;
196 transform-origin: 0% 0%;
197 transform: scaleY(0);
198 }
199 100% {
200 opacity: 1;
201 transform-origin: 0% 0%;
202 transform: scaleY(1);
203 }
204}
205@keyframes rcDropdownSlideUpOut {
206 0% {
207 opacity: 1;
208 transform-origin: 0% 0%;
209 transform: scaleY(1);
210 }
211 100% {
212 opacity: 0;
213 transform-origin: 0% 0%;
214 transform: scaleY(0);
215 }
216}
217@keyframes rcDropdownSlideDownIn {
218 0% {
219 opacity: 0;
220 transform-origin: 100% 100%;
221 transform: scaleY(0);
222 }
223 100% {
224 opacity: 1;
225 transform-origin: 100% 100%;
226 transform: scaleY(1);
227 }
228}
229@keyframes rcDropdownSlideDownOut {
230 0% {
231 opacity: 1;
232 transform-origin: 100% 100%;
233 transform: scaleY(1);
234 }
235 100% {
236 opacity: 0;
237 transform-origin: 100% 100%;
238 transform: scaleY(0);
239 }
240}
241.rc-calendar {
242 position: relative;
243 outline: none;
244 font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
245 width: 253px;
246 list-style: none;
247 font-size: 12px;
248 text-align: left;
249 background-color: #fff;
250 border-radius: $border-radius-base;
251 box-shadow: 0px 4px 8px -2px rgba(9,30,66,0.25), 0px 0px 1px 0px rgba(9,30,66,0.31);
252 background-clip: padding-box;
253 border: none;
254 line-height: 1.5;
255}
256.rc-calendar-date-panel,
257.rc-calendar-panel {
258 position: relative;
259 outline: none;
260}
261.rc-calendar-week-number {
262 width: 286px;
263}
264.rc-calendar-week-number-cell {
265 text-align: center;
266}
267.rc-calendar-header {
268 padding: 0 10px;
269 height: 34px;
270 line-height: 30px;
271 text-align: center;
272 -moz-user-select: none;
273 -ms-user-select: none;
274 user-select: none;
275 -webkit-user-select: none;
276 border-bottom: 1px solid $disabled-border-color;
277}
278.rc-calendar-header > a {
279 font-weight: bold;
280 display: inline-block;
281 padding: 0px 5px;
282 line-height: 34px;
283 text-align: center;
284 width: 30px;
285}
286.rc-calendar-header > a:hover {
287 cursor: pointer;
288 color: $brand-primary;
289}
290.rc-calendar-header .rc-calendar-prev-month-btn {
291 position: absolute;
292 left: 25px;
293}
294.rc-calendar-header .rc-calendar-prev-month-btn:after {
295 content: '\2039';
296}
297.rc-calendar-header .rc-calendar-next-month-btn {
298 position: absolute;
299 right: 25px;
300}
301.rc-calendar-header .rc-calendar-next-month-btn:after {
302 content: '\203A';
303}
304.rc-calendar-year-select,
305.rc-calendar-month-select,
306.rc-calendar-day-select {
307 display: inline-block;
308 font-size: 12px;
309 color: #212121;
310 padding: 0 8px;
311 line-height: 34px;
312}
313.rc-calendar-year-select:hover,
314.rc-calendar-month-select:hover,
315.rc-calendar-day-select:hover {
316 cursor: pointer;
317 color: $brand-primary-hover;
318}
319.rc-calendar-year-select.rc-calendar-time-status:hover,
320.rc-calendar-month-select.rc-calendar-time-status:hover,
321.rc-calendar-day-select.rc-calendar-time-status:hover {
322 cursor: pointer;
323 color: #212121;
324}
325.rc-calendar-month-panel-prev-year-btn,
326.rc-calendar-month-panel-next-year-btn,
327.rc-calendar-prev-month-btn,
328.rc-calendar-next-month-btn,
329.rc-calendar-prev-year-btn,
330.rc-calendar-next-year-btn {
331 position: absolute;
332 top: 0;
333 cursor: pointer;
334 color: #505F79;
335 font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
336 padding: 0 5px;
337 font-size: 16px;
338 display: inline-block;
339 line-height: 34px;
340}
341.rc-calendar-prev-month-btn:hover,
342.rc-calendar-next-month-btn:hover,
343.rc-calendar-prev-year-btn:hover,
344.rc-calendar-next-year-btn:hover {
345 color: $brand-primary-hover;
346}
347.rc-calendar-next-year-btn {
348 right: 0;
349}
350.rc-calendar-next-year-btn:after {
351 content: '\BB';
352}
353.rc-calendar-prev-year-btn {
354 left: 0;
355}
356.rc-calendar-prev-year-btn:after {
357 content: '\AB';
358}
359.rc-calendar-body {
360 padding: 9px 10px 10px;
361 height: 217px;
362}
363.rc-calendar table {
364 border-collapse: collapse;
365 max-width: 100%;
366 background-color: transparent;
367 width: 100%;
368}
369.rc-calendar table,
370.rc-calendar td,
371.rc-calendar th,
372.rc-calendar td {
373 border: none;
374}
375.rc-calendar .rc-calendar-today {
376 .rc-calendar-date{
377 border: 1px solid $brand-primary;
378 // color: #2196F3;
379 }
380}
381// .rc-calendar .rc-calendar-today.rc-calendar-selected-day {
382// .rc-calendar-date{
383// border: 1px solid $brand-primary;
384// color: #ffffff;
385// }
386// }
387.rc-calendar-table {
388 border-spacing: 0;
389 margin-bottom: 0;
390}
391.rc-calendar-column-header {
392 line-height: 18px;
393 padding: 6px 0;
394 width: 33px;
395 text-align: center;
396}
397.rc-calendar-column-header .rc-calendar-column-header-inner {
398 display: block;
399 font-weight: normal;
400}
401.rc-calendar-week-number-header .rc-calendar-column-header-inner {
402 display: none;
403}
404.rc-calendar-cell {
405 padding: 1px 0;
406}
407.rc-calendar-date {
408 display: block;
409 margin: 0 auto;
410 color: #212121;
411 border-radius: $border-radius-base $border-radius-base;
412 width: 26px;
413 height: 26px;
414 padding: 0;
415 background: transparent;
416 line-height: 26px;
417 text-align: center;
418}
419.rc-calendar-date:hover {
420 background: $hover-bg-color-base;
421 cursor: pointer;
422}
423 .rc-calendar-selected-day:not(.rc-calendar-disabled-cell) .rc-calendar-date {
424 background: $brand-primary;
425 color: #fff!important;
426 }
427.rc-calendar-selected-date .rc-calendar-date {
428 background: $brand-primary;
429 color: #fff!important;
430}
431.rc-calendar-selected-date .rc-calendar-date:hover {
432 background: $brand-primary;
433}
434.rc-calendar-disabled-cell .rc-calendar-date {
435 cursor: not-allowed;
436 color: #bcbcbc;
437 background: #f3f3f3;
438 border-radius: 0;
439 width: auto;
440}
441.rc-calendar-disabled-cell.rc-calendar-selected-date .rc-calendar-date{
442 color: #bcbcbc !important;
443}
444.rc-calendar-disabled-cell .rc-calendar-date:hover {
445 background: #f3f3f3;
446}
447.rc-calendar-disabled-cell-first-of-row .rc-calendar-date {
448 border-top-left-radius: $border-radius-base;
449 border-bottom-left-radius: $border-radius-base;
450}
451.rc-calendar-disabled-cell-last-of-row .rc-calendar-date {
452 border-top-right-radius: $border-radius-base;
453 border-bottom-right-radius: $border-radius-base;
454}
455.rc-calendar-last-month-cell .rc-calendar-date,
456.rc-calendar-next-month-btn-day .rc-calendar-date {
457 color: $disabled-color-base;
458}
459.rc-calendar-footer {
460 border-top: 1px solid $disabled-border-color;
461 padding: 0 10px;
462 line-height: 34px;
463 position: relative;
464}
465.rc-calendar-footer .rc-time-picker {
466 width: 90px;
467}
468.rc-calendar-footer .rc-time-picker-input {
469 height: 24px;
470}
471.rc-calendar-footer-show-ok {
472 text-align: right;
473}
474.rc-calendar-footer-show-ok .rc-calendar-footer-btn {
475 padding-right: 0;
476}
477.rc-calendar-footer-show-ok .rc-calendar-time-picker-btn {
478 margin-left: 0;
479 padding: 0 12px;
480}
481.rc-calendar-footer-show-ok .rc-calendar-today-btn {
482 float: left;
483 padding-left: 0;
484}
485.rc-calendar-footer-show-ok .rc-calendar-footer-btn {
486 text-align: right;
487}
488.rc-calendar-footer-btn {
489 display: block;
490 text-align: center;
491}
492.rc-calendar-footer-btn:after {
493 content: '';
494 display:block;
495 width: 0;
496 height: 0;
497 visibility: hidden;
498 clear: both;
499}
500.rc-calendar-footer-extra {
501 text-align: left;
502}
503.rc-calendar-time-picker-btn {
504 margin-left: 10px;
505}
506.rc-calendar-today-btn,
507.rc-calendar-ok-btn,
508.rc-calendar-time-picker-btn {
509 display: inline-block;
510 text-align: center;
511 color: $brand-primary;
512}
513.rc-calendar-today-btn:hover,
514.rc-calendar-ok-btn:hover,
515.rc-calendar-time-picker-btn:hover {
516 cursor: pointer;
517 color: $brand-primary-hover;
518}
519.rc-calendar-today-btn-disabled,
520.rc-calendar-ok-btn-disabled,
521.rc-calendar-time-picker-btn-disabled {
522 color: $disabled-color-base;
523}
524.rc-calendar-today-btn-disabled:hover,
525.rc-calendar-ok-btn-disabled:hover,
526.rc-calendar-time-picker-btn-disabled:hover {
527 color: $disabled-color-base;
528}
529.rc-calendar-today-btn {
530 padding-left: 0;
531}
532.rc-calendar-time-input {
533 height: 25px;
534 position: relative;
535 display: inline-block;
536 margin: 0 0;
537 padding: 4px 10px;
538 border-radius: 6px 6px;
539 border: 1px solid #d9d9d9;
540 background-color: #ffffff;
541 color: #212121;
542 line-height: 1.5;
543 transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
544 width: 40px;
545}
546.rc-calendar-time-input:hover {
547 border-color: $brand-primary;
548}
549.rc-calendar-time-input:focus {
550 border-color: $brand-primary;
551 box-shadow: 0 0 3px $brand-primary;
552}
553.rc-calendar-time-panel {
554 left: 0;
555 top: 0;
556 bottom: 0;
557 right: 0;
558 background: #ffffff;
559 z-index: 10;
560 position: absolute;
561 outline: none;
562}
563.rc-calendar-time-panel-header {
564 padding: 0 10px;
565 height: 34px;
566 line-height: 34px;
567 position: relative;
568 text-align: center;
569 -moz-user-select: none;
570 -ms-user-select: none;
571 user-select: none;
572 -webkit-user-select: none;
573 border-bottom: 1px solid $disabled-border-color;
574}
575.rc-calendar-time-panel-body {
576 padding: 9px 10px 10px;
577}
578.rc-calendar-time-panel-title {
579 width: 180px;
580 font-weight: bold;
581 display: inline-block;
582 padding: 4px 5px;
583 text-align: center;
584 height: 30px;
585 line-height: 22px;
586 border-radius: 4px;
587}
588.rc-calendar-time-panel-table {
589 table-layout: fixed;
590 width: 100%;
591 height: 255px;
592 border-collapse: separate;
593}
594.rc-calendar-time-panel-cell {
595 text-align: center;
596 height: 42px;
597 vertical-align: middle;
598}
599.rc-calendar-time-panel-time {
600 line-height: 26px;
601 display: block;
602 border-radius: 4px;
603 width: 26px;
604 margin: 0 auto;
605}
606.rc-calendar-time-panel-time:hover {
607 background: #ebfaff;
608 cursor: pointer;
609}
610.rc-calendar-time-panel-selected-cell .rc-calendar-time-panel-time {
611 background: $brand-primary;
612 color: #fff;
613}
614.rc-calendar-time-panel-selected-cell .rc-calendar-time-panel-time:hover {
615 background: $brand-primary;
616 color: #fff;
617}
618.rc-calendar-month-panel {
619 left: 0;
620 top: 0;
621 bottom: 0;
622 right: 0;
623 background: #ffffff;
624 z-index: 10;
625 position: absolute;
626 outline: none;
627}
628.rc-calendar-month-panel > div {
629 height: 100%;
630 display: -ms-flexbox;
631 display: flex;
632 -ms-flex-direction: column;
633 flex-direction: column;
634}
635.rc-calendar-month-panel-hidden {
636 display: none;
637}
638.rc-calendar-month-panel-header {
639 padding: 0 10px;
640 height: 34px;
641 line-height: 30px;
642 position: relative;
643 text-align: center;
644 -moz-user-select: none;
645 -ms-user-select: none;
646 user-select: none;
647 -webkit-user-select: none;
648 border-bottom: 1px solid $disabled-border-color;
649}
650.rc-calendar-month-panel-header > a {
651 display: inline-block;
652 text-align: center;
653 width: 30px;
654}
655.rc-calendar-month-panel-header > a:hover {
656 cursor: pointer;
657 color: $brand-primary-hover;
658}
659.rc-calendar-month-panel-prev-year-btn,
660.rc-calendar-month-panel-next-year-btn {
661 position: absolute;
662 top: 0;
663}
664.rc-calendar-month-panel-next-year-btn:after {
665 content: '\BB';
666}
667.rc-calendar-month-panel-prev-year-btn {
668 -webkit-user-select: none;
669 -moz-user-select: none;
670 -ms-user-select: none;
671 user-select: none;
672 left: 0;
673}
674.rc-calendar-month-panel-prev-year-btn:after {
675 content: '\AB';
676}
677.rc-calendar-month-panel .rc-calendar-month-panel-year-select {
678 width: 180px;
679}
680.rc-calendar-month-panel-year-select-arrow {
681 display: none;
682}
683.rc-calendar-month-panel-next-year-btn {
684 -webkit-user-select: none;
685 -moz-user-select: none;
686 -ms-user-select: none;
687 user-select: none;
688 right: 0;
689}
690.rc-calendar-month-panel-body {
691 -ms-flex: 1;
692 flex: 1;
693 padding: 9px 10px 10px;
694}
695.rc-calendar-month-panel-footer {
696 border-top: 1px solid $disabled-border-color;
697 line-height: 38px;
698}
699.rc-calendar-month-panel-table {
700 table-layout: fixed;
701 width: 100%;
702 height: 100%;
703 border-collapse: separate;
704}
705.rc-calendar-month-panel-cell {
706 text-align: center;
707}
708.rc-calendar-month-panel-cell .rc-calendar-month-panel-month {
709 display: block;
710 width: 46px;
711 margin: 0 auto;
712 color: #212121;
713 border-radius: $border-radius-base $border-radius-base;
714 height: 36px;
715 padding: 0;
716 background: transparent;
717 line-height: 36px;
718 text-align: center;
719}
720.rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
721 background: $hover-bg-color-base;
722 cursor: pointer;
723}
724.rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month {
725 color: #bfbfbf;
726}
727.rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month:hover {
728 background: white;
729 cursor: not-allowed;
730}
731.rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
732 background: $brand-primary;
733 color: #fff;
734}
735.rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month:hover {
736 background: $brand-primary;
737 color: #fff;
738}
739.rc-calendar-month-header-wrap {
740 position: relative;
741 height: 308px;
742}
743.rc-calendar-year-panel {
744 left: 0;
745 top: 0;
746 bottom: 0;
747 right: 0;
748 background: #ffffff;
749 z-index: 10;
750 position: absolute;
751 outline: none;
752}
753.rc-calendar-year-panel > div {
754 height: 100%;
755 display: -ms-flexbox;
756 display: flex;
757 -ms-flex-direction: column;
758 flex-direction: column;
759}
760.rc-calendar-year-panel-hidden {
761 display: none;
762}
763.rc-calendar-year-panel-header {
764 padding: 0 10px;
765 height: 34px;
766 line-height: 30px;
767 position: relative;
768 text-align: center;
769 -moz-user-select: none;
770 -ms-user-select: none;
771 user-select: none;
772 -webkit-user-select: none;
773 border-bottom: 1px solid $disabled-border-color;
774}
775.rc-calendar-year-panel-header > a {
776 display: inline-block;
777 padding: 1px 5px;
778 text-align: center;
779 width: 30px;
780}
781.rc-calendar-year-panel-header > a:hover {
782 cursor: pointer;
783 color: $brand-primary-hover;
784}
785.rc-calendar-year-panel-prev-decade-btn,
786.rc-calendar-year-panel-next-decade-btn {
787 position: absolute;
788 top: 0;
789}
790.rc-calendar-year-panel-next-decade-btn:after {
791 content: '\BB';
792}
793.rc-calendar-year-panel-prev-decade-btn {
794 -webkit-user-select: none;
795 -moz-user-select: none;
796 -ms-user-select: none;
797 user-select: none;
798 left: 0;
799}
800.rc-calendar-year-panel-prev-decade-btn:after {
801 content: '\AB';
802}
803.rc-calendar-year-panel .rc-calendar-year-panel-decade-select {
804 width: 180px;
805}
806.rc-calendar-year-panel-decade-select-arrow {
807 display: none;
808}
809.rc-calendar-year-panel-next-decade-btn {
810 -webkit-user-select: none;
811 -moz-user-select: none;
812 -ms-user-select: none;
813 user-select: none;
814 right: 0;
815}
816.rc-calendar-year-panel-body {
817 -ms-flex: 1;
818 flex: 1;
819 padding: 9px 10px 10px;
820 min-height: 210px;
821}
822.rc-calendar-year-panel-footer {
823 border-top: 1px solid $disabled-border-color;
824 line-height: 38px;
825}
826.rc-calendar-year-panel-table {
827 table-layout: fixed;
828 width: 100%;
829 height: 100%;
830 border-collapse: separate;
831}
832.rc-calendar-year-panel-cell {
833 text-align: center;
834}
835.rc-calendar-year-panel-year {
836 display: block;
837 width: 46px;
838 margin: 0 auto;
839 color: #212121;
840 border-radius: $border-radius-base $border-radius-base;
841 height: 36px;
842 padding: 0;
843 background: transparent;
844 line-height: 36px;
845 text-align: center;
846}
847.rc-calendar-year-panel-year:hover {
848 background: $hover-bg-color-base;
849 cursor: pointer;
850}
851.rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year {
852 background: $brand-primary;
853 color: #fff;
854}
855.rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year:hover {
856 background: $brand-primary;
857 color: #fff;
858}
859.rc-calendar-year-panel-last-decade-cell .rc-calendar-year-panel-year,
860.rc-calendar-year-panel-next-decade-cell .rc-calendar-year-panel-year {
861 -moz-user-select: none;
862 -ms-user-select: none;
863 user-select: none;
864 -webkit-user-select: none;
865 color: $disabled-color-base;
866}
867.rc-calendar-decade-panel {
868 left: 0;
869 top: 0;
870 bottom: 0;
871 right: 0;
872 background: #ffffff;
873 z-index: 10;
874 position: absolute;
875 outline: none;
876 display: -ms-flexbox;
877 display: flex;
878 -ms-flex-direction: column;
879 flex-direction: column;
880}
881.rc-calendar-decade-panel-hidden {
882 display: none;
883}
884.rc-calendar-decade-panel-header {
885 padding: 0 10px;
886 height: 34px;
887 line-height: 34px;
888 position: relative;
889 text-align: center;
890 -moz-user-select: none;
891 -ms-user-select: none;
892 user-select: none;
893 -webkit-user-select: none;
894 border-bottom: 1px solid $disabled-border-color;
895}
896.rc-calendar-decade-panel-header > a {
897 display: inline-block;
898 padding: 0px 5px;
899 text-align: center;
900 width: 30px;
901}
902.rc-calendar-decade-panel-header > a:hover {
903 cursor: pointer;
904 color: $brand-primary;
905}
906.rc-calendar-decade-panel-prev-century-btn,
907.rc-calendar-decade-panel-next-century-btn {
908 position: absolute;
909 top: 0;
910}
911.rc-calendar-decade-panel-next-century-btn:after {
912 content: '\BB';
913}
914.rc-calendar-decade-panel-prev-century-btn {
915 -webkit-user-select: none;
916 -moz-user-select: none;
917 -ms-user-select: none;
918 user-select: none;
919 left: 0;
920}
921.rc-calendar-decade-panel-prev-century-btn:after {
922 content: '\AB';
923}
924.rc-calendar-decade-panel-next-century-btn {
925 -webkit-user-select: none;
926 -moz-user-select: none;
927 -ms-user-select: none;
928 user-select: none;
929 right: 0;
930}
931.rc-calendar-decade-panel-body {
932 -ms-flex: 1;
933 flex: 1;
934 padding: 9px 10px 10px;
935}
936.rc-calendar-decade-panel-footer {
937 border-top: 1px solid $disabled-border-color;
938 line-height: 38px;
939}
940.rc-calendar-decade-panel-table {
941 table-layout: fixed;
942 width: 100%;
943 height: 100%;
944 border-collapse: separate;
945}
946.rc-calendar-decade-panel-cell {
947 text-align: center;
948}
949.rc-calendar-decade-panel-decade {
950 display: block;
951 margin: 0 auto;
952 color: #212121;
953 border-radius: $border-radius-base $border-radius-base;
954 height: 36px;
955 padding: 0;
956 background: transparent;
957 line-height: 36px;
958 text-align: center;
959}
960.rc-calendar-decade-panel-decade:hover {
961 background: $hover-bg-color-base;
962 cursor: pointer;
963}
964.rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade {
965 background: $brand-primary;
966 color: #fff;
967}
968.rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade:hover {
969 background: $brand-primary;
970 color: #fff;
971}
972.rc-calendar-decade-panel-last-century-cell .rc-calendar-decade-panel-decade,
973.rc-calendar-decade-panel-next-century-cell .rc-calendar-decade-panel-decade {
974 -moz-user-select: none;
975 -ms-user-select: none;
976 user-select: none;
977 -webkit-user-select: none;
978 color: $disabled-color-base;
979}
980.rc-calendar-range {
981 width: 502px;
982 overflow: hidden;
983}
984.rc-calendar-range-part {
985 width: 50%;
986 position: relative;
987}
988.rc-calendar-range-part .rc-calendar-time-picker {
989 top: 69px;
990 .rc-calendar-time-picker-panel {
991 margin-top: -35px;
992 height: 218px;
993 border-bottom: 1px solid #e9e9e9;
994 background: #fff;
995 }
996}
997.rc-calendar-range-part .rc-calendar-time-picker-panel-select {
998 width: 77px;
999}
1000.rc-calendar-range-left {
1001 float: left;
1002}
1003.rc-calendar-show-time-picker .rc-calendar-range-left .rc-calendar-header{
1004 border-right: 1px solid $disabled-border-color;
1005}
1006.rc-calendar-range-left .rc-calendar-time-picker-panel {
1007 border-right: 1px solid $disabled-border-color;
1008}
1009.rc-calendar-range-right {
1010 float: right;
1011}
1012.rc-calendar-range-right .rc-calendar-time-picker-panel {
1013 // left: 21px;
1014 border-left: 1px solid $disabled-border-color;
1015}
1016.rc-calendar-show-time-picker .rc-calendar-range-right .rc-calendar-header{
1017 border-left: 1px solid $disabled-border-color;
1018}
1019.rc-calendar-range-right .rc-calendar-time-picker-panel-select:first-child {
1020 border-left: 1px solid #e9e9e9;
1021}
1022.rc-calendar-range-middle {
1023 position: absolute;
1024 margin-left: -10px;
1025 text-align: center;
1026 height: 35px;
1027 line-height: 35px;
1028}
1029.rc-calendar-range .rc-calendar-date-panel::after {
1030 content: ".";
1031 display: block;
1032 height: 0;
1033 clear: both;
1034 visibility: hidden;
1035}
1036.rc-calendar-range .rc-calendar-input-wrap {
1037 height: 35px;
1038}
1039.rc-calendar-range .rc-calendar-input,
1040.rc-calendar-range .rc-time-picker-input {
1041 padding: 1px 7px;
1042 height: 22px;
1043}
1044.rc-calendar-range .rc-calendar-body,
1045.rc-calendar-range .rc-calendar-decade-panel-body,
1046.rc-calendar-range .rc-calendar-year-panel-body,
1047.rc-calendar-range .rc-calendar-month-panel-body {
1048 border-bottom: 1px solid #e9e9e9;
1049 background: #fff;
1050}
1051.rc-calendar-range.rc-calendar-week-number {
1052 width: 574px;
1053}
1054.rc-calendar-range.rc-calendar-week-number .rc-calendar-range-part {
1055 width: 286px;
1056}
1057.rc-calendar-range.rc-calendar-week-number .rc-calendar-range-part .rc-calendar-time-picker {
1058 top: 69px;
1059}
1060.rc-calendar-range.rc-calendar-week-number .rc-calendar-range-part .rc-calendar-time-picker-panel-select {
1061 width: 89px;
1062}
1063.rc-calendar-range.rc-calendar-week-number .rc-calendar-range-right .rc-calendar-time-picker-panel {
1064 left: 36px;
1065}
1066.rc-calendar-range .rc-calendar-year-panel,
1067.rc-calendar-range .rc-calendar-month-panel,
1068.rc-calendar-range .rc-calendar-decade-panel {
1069 top: 0;
1070 >.rc-calendar-decade-panel-header{
1071 display: block;
1072 }
1073}
1074.rc-calendar-range .rc-calendar-panel .rc-calendar-date-panel .rc-calendar-range-part .rc-calendar-range-out{
1075 position: relative;
1076}
1077.rc-calendar-range .rc-calendar-month-panel .rc-calendar-year-panel {
1078 top: 0;
1079}
1080.rc-calendar-range .rc-calendar-decade-panel-table,
1081.rc-calendar-range .rc-calendar-year-panel-table,
1082.rc-calendar-range .rc-calendar-month-panel-table {
1083 height: 198px;
1084 background: #fff;
1085}
1086.rc-calendar-range .rc-calendar-in-range-cell {
1087 background: $selected-bg-color-base;
1088 border-radius: 0;
1089}
1090.rc-calendar-range-bottom .rc-calendar-footer-btn{
1091 text-align: right;
1092}
1093.rc-calendar-range .rc-calendar-footer {
1094 border-top: none;
1095}
1096.rc-calendar-range .rc-calendar-footer-btn {
1097 padding: 8px 8px;
1098}
1099.rc-calendar-range .rc-calendar-ok-btn {
1100 position: static;
1101}
1102.rc-calendar-range .rc-calendar-today-btn {
1103 float: left;
1104}
1105.rc-calendar-full {
1106 width: 275px;
1107}
1108.rc-calendar-full-header {
1109 padding: 5px 10px;
1110 text-align: center;
1111 -moz-user-select: none;
1112 -ms-user-select: none;
1113 user-select: none;
1114 -webkit-user-select: none;
1115 border-bottom: 1px solid $disabled-border-color;
1116 overflow: hidden;
1117}
1118.rc-calendar-full-header-month-select,
1119.rc-calendar-full-header-year-select {
1120 width: 70px;
1121 float: right;
1122 margin-right: 5px;
1123}
1124.rc-calendar-full-header-switcher {
1125 float: right;
1126 display: inline-block;
1127}
1128.rc-calendar-full-header-switcher-normal:hover {
1129 border-color: $brand-primary;
1130 box-shadow: 0 0 2px $brand-primary;
1131 cursor: pointer;
1132}
1133.rc-calendar-full-header-switcher-focus {
1134 border-color: $brand-primary;
1135 background-color: $brand-primary;
1136 color: #fff;
1137}
1138.rc-calendar-full-header-switcher > span {
1139 float: left;
1140 height: 28px;
1141 line-height: 24px;
1142 border: 1px solid #d9d9d9;
1143 padding: 0 10px;
1144 color: #212121;
1145}
1146.rc-calendar-full-header-switcher > span:first-child {
1147 border-top-left-radius: 4px;
1148 border-bottom-left-radius: 4px;
1149 border-right: none;
1150}
1151.rc-calendar-full-header-switcher > span:last-child {
1152 border-top-right-radius: 4px;
1153 border-bottom-right-radius: 4px;
1154 border-left: none;
1155}
1156.rc-calendar-fullscreen {
1157 width: auto;
1158}
1159.rc-calendar-fullscreen .rc-calendar-full-header {
1160 border-bottom: none;
1161}
1162.rc-calendar-fullscreen .rc-calendar-column-header {
1163 text-align: right;
1164 padding-right: 12px;
1165}
1166.rc-calendar-fullscreen .rc-calendar-cell {
1167 padding: 0;
1168}
1169.rc-calendar-fullscreen .rc-calendar-cell .rc-calendar-date,
1170.rc-calendar-fullscreen .rc-calendar-month-panel-cell .rc-calendar-month-panel-month {
1171 display: block;
1172 height: 116px;
1173 width: auto;
1174 border-radius: 0;
1175 margin: 0 4px;
1176 border: none;
1177 border-top: 2px solid #eee;
1178 text-align: right;
1179 padding-right: 8px;
1180}
1181.rc-calendar-fullscreen .rc-calendar-selected-day .rc-calendar-date,
1182.rc-calendar-fullscreen .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
1183 background-color: #ebfaff;
1184 color: #212121;
1185}
1186.rc-calendar-fullscreen .rc-calendar-today .rc-calendar-date,
1187.rc-calendar-fullscreen .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
1188 border-top-color: #3FC7FA;
1189 color: #3FC7FA;
1190}
1191
1192
1193//timepicker
1194.rc-time-picker {
1195 display: inline-block;
1196 position: relative;
1197 box-sizing: border-box;
1198}
1199.rc-time-picker * {
1200 box-sizing: border-box;
1201}
1202.rc-time-picker-clear {
1203 position: absolute;
1204 right: 6px;
1205 cursor: pointer;
1206 overflow: hidden;
1207 width: 20px;
1208 height: 20px;
1209 text-align: center;
1210 line-height: 20px;
1211 top: 3px;
1212 margin: 0;
1213}
1214.rc-time-picker-clear-icon:after {
1215 content: "x";
1216 font-size: 12px;
1217 font-style: normal;
1218 color: #aaa;
1219 display: inline-block;
1220 line-height: 1;
1221 height: 20px;
1222 width: 20px;
1223 transition: color 0.3s ease;
1224}
1225.rc-time-picker-clear-icon:hover:after {
1226 color: #212121;
1227}
1228.rc-time-picker-input {
1229 width: 100%;
1230 position: relative;
1231 display: inline-block;
1232 padding: 4px 7px;
1233 height: 28px;
1234 cursor: text;
1235 font-size: 12px;
1236 line-height: 1.5;
1237 color: #212121;
1238 background-color: #fff;
1239 background-image: none;
1240 border: 1px solid #d9d9d9;
1241 border-radius: 4px;
1242 transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
1243}
1244.rc-time-picker-input[disabled] {
1245 color: #ccc;
1246 background: #f7f7f7;
1247 cursor: not-allowed;
1248}
1249.rc-time-picker-panel {
1250 z-index: 1070;
1251 width: 170px;
1252 position: absolute;
1253 box-sizing: border-box;
1254}
1255.rc-time-picker-panel * {
1256 box-sizing: border-box;
1257}
1258.rc-time-picker-panel-inner {
1259 display: inline-block;
1260 position: relative;
1261 outline: none;
1262 list-style: none;
1263 font-size: 12px;
1264 text-align: left;
1265 background-color: #fff;
1266 border-radius: 4px;
1267 box-shadow: 0 1px 5px #ccc;
1268 background-clip: padding-box;
1269 border: 1px solid $disabled-border-color;
1270 line-height: 1.5;
1271}
1272.rc-time-picker-panel-narrow {
1273 max-width: 113px;
1274}
1275.rc-time-picker-panel-input {
1276 margin: 0;
1277 padding: 0;
1278 width: 100%;
1279 cursor: auto;
1280 line-height: 1.5;
1281 outline: 0;
1282 border: 1px solid transparent;
1283}
1284.rc-time-picker-panel-input-wrap {
1285 box-sizing: border-box;
1286 position: relative;
1287 padding: 6px;
1288 border-bottom: 1px solid #e9e9e9;
1289}
1290.rc-time-picker-panel-input-invalid {
1291 border-color: red;
1292}
1293.rc-time-picker-panel-select {
1294 float: left;
1295 font-size: 12px;
1296 border: 1px solid #e9e9e9;
1297 border-width: 0 1px;
1298 margin-left: -1px;
1299 box-sizing: border-box;
1300 width: 56px;
1301 max-height: 144px;
1302 overflow-y: auto;
1303 position: relative;
1304}
1305.rc-time-picker-panel-select-active {
1306 overflow-y: auto;
1307}
1308.rc-time-picker-panel-select:first-child {
1309 border-left: 0;
1310 margin-left: 0;
1311}
1312.rc-time-picker-panel-select:last-child {
1313 border-right: 0;
1314}
1315.rc-time-picker-panel-select ul {
1316 list-style: none;
1317 box-sizing: border-box;
1318 margin: 0;
1319 padding: 0;
1320 width: 100%;
1321}
1322.rc-time-picker-panel-select li {
1323 list-style: none;
1324 margin: 0;
1325 padding: 0 0 0 16px;
1326 width: 100%;
1327 height: 24px;
1328 line-height: 24px;
1329 text-align: left;
1330 cursor: pointer;
1331 -webkit-user-select: none;
1332 -moz-user-select: none;
1333 -ms-user-select: none;
1334 user-select: none;
1335}
1336.rc-time-picker-panel-select li:hover {
1337 background: $hover-bg-color-base;
1338}
1339li.rc-time-picker-panel-select-option-selected {
1340 &, &:hover{
1341 background: $selected-bg-color-base;
1342 color: $brand-primary;
1343 }
1344}
1345li.rc-time-picker-panel-select-option-disabled {
1346 color: #909090;
1347}
1348li.rc-time-picker-panel-select-option-disabled:hover {
1349 background: transparent;
1350 cursor: not-allowed;
1351}
1352
1353
1354//非rc
1355.calendar-picker.u-input-group{
1356 .uf-close-c{
1357 color: #424242;
1358 opacity: .7;
1359 }
1360}
1361.rc-calendar{
1362 >.rc-calendar-year-panel{
1363 position: relative;
1364 border: 1px solid $disabled-border-color;
1365 box-shadow: 0 1px 5px #ccc;
1366 }
1367}
1368.datepicker-input-group{
1369 &.u-input-group{
1370 display: block;
1371 cursor: pointer;
1372 }
1373 .u-input-group-btn{
1374 .uf-close-c{
1375 color: #424242;
1376 opacity: .7;
1377 }
1378 }
1379}
1380//年
1381.rc-calendar>.rc-calendar-year-panel{
1382 .rc-calendar-decade-panel{
1383 color: #212121;
1384 top: 35px;
1385 border: 1px solid $disabled-border-color;
1386 }
1387}
1388//年月
1389.rc-calendar-month-calendar{
1390 .rc-calendar-year-panel{
1391 position: relative;
1392 }
1393 .rc-calendar-month-panel{
1394 position: relative;
1395 }
1396 .rc-calendar-month-header-wrap{
1397 .rc-calendar-header-btns{
1398 display: none;
1399 }
1400 }
1401
1402}
1403.rc-calendar-month-header-wrap {
1404 position: relative;
1405 height: 280px;
1406}
1407//周
1408.week-calendar-footer {
1409 text-align: center;
1410}
1411.week-calendar-footer-button{
1412 padding: 3px 20px;
1413 color: $brand-primary;
1414 position: relative;
1415 display: inline-block;
1416 font-weight: 500;
1417 line-height: 1;
1418 letter-spacing: 0;
1419 overflow: hidden;
1420 will-change: box-shadow, transform;
1421 outline: none;
1422 cursor: pointer;
1423 text-decoration: none;
1424 text-align: center;
1425 vertical-align: middle;
1426 font-size: 12px;
1427 line-height: 32px;
1428}
1429.week-calendar .rc-calendar-tbody > tr:hover
1430.rc-calendar-date {
1431 background: #EBECF0;
1432}
1433.week-calendar .rc-calendar-tbody > tr:hover
1434.rc-calendar-selected-day .rc-calendar-date {
1435 background: $brand-primary;
1436}
1437.week-calendar{
1438 .rc-calendar-footer{
1439 padding: 0;
1440 height: 38px;
1441 }
1442}
1443.rc-calendar-btn-ok{
1444 padding: 0;
1445 min-width: 40px;
1446 position: relative;
1447 top: -2px;
1448}
1449.datepicker-input-group.u-input-group:hover{
1450 & > input {
1451 border-color: #66afe9;
1452 }
1453 & > .u-form-control[disabled]{
1454 border-color: $form-control-disable-border-color;
1455 }
1456}
1457.calendar-picker.u-input-group:hover{
1458 & > input {
1459 border-color: #66afe9;
1460 }
1461 & > .u-form-control[disabled]{
1462 border-color: $form-control-disable-border-color;
1463 }
1464}
1465// u-table 单元格中的 DatePicker
1466.u-table-tbody {
1467 th.rc-calendar-column-header {
1468 padding: 6px 0;
1469 text-align: center;
1470 }
1471 td.rc-calendar-cell {
1472 padding: 1px 0;
1473 .rc-calendar-date {
1474 margin: 0 3.5px;
1475 }
1476 }
1477 .rc-calendar-year-select, .rc-calendar-month-select, .rc-calendar-today-btn, .rc-calendar-next-month-btn, .rc-calendar-next-year-btn, .rc-calendar-prev-month-btn, .rc-calendar-prev-year-btn,
1478 .rc-calendar-year-panel-decade-select, .rc-calendar-year-panel-prev-decade-btn, .rc-calendar-year-panel-next-decade-btn,
1479 .rc-calendar-decade-panel-prev-century-btn, .rc-calendar-decade-panel-next-century-btn,
1480 .rc-calendar-month-panel-year-select, .rc-calendar-month-panel-prev-year-btn, .rc-calendar-month-panel-next-year-btn {
1481 color: #212121;
1482 &:hover {
1483 color: #e60012;
1484 }
1485 }
1486 .rc-calendar-year-panel-year, .rc-calendar-decade-panel-decade, .rc-calendar-month-panel-month {
1487 color: #212121;
1488 }
1489 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year,
1490 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade,
1491 .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
1492 color: #fff;
1493 }
1494}
1495.u-table .u-table-scroll tr {
1496 td.rc-calendar-cell:first-child, th.rc-calendar-column-header:first-child {
1497 padding-left: 0;
1498 }
1499}
1500.u-table .rc-calendar-table thead tr:last-child {
1501 border-bottom: none;
1502}
\No newline at end of file