1 | @import '~react-dates/lib/css/_datepicker.css';
|
2 |
|
3 | .DateInput {
|
4 | font-size: 16px;
|
5 | font-weight: normal;
|
6 | line-height: normal;
|
7 | }
|
8 |
|
9 | .SingleDatePicker,
|
10 | .DateRangePicker {
|
11 | width: 100%;
|
12 | }
|
13 |
|
14 | .DateRangePickerInput_arrow {
|
15 | padding: 0.375rem 0.75rem;
|
16 | background-color: #e9ecef;
|
17 | border: 1px solid #ced4da;
|
18 | border-left: none;
|
19 | border-right: none;
|
20 | }
|
21 |
|
22 | .DateRangePickerInput_calendarIcon,
|
23 | .SingleDatePickerInput_calendarIcon {
|
24 | background-color: #e9ecef;
|
25 | margin-right: 0;
|
26 | margin-left: 0;
|
27 | border-top-right-radius: 5px;
|
28 | border-bottom-right-radius: 5px;
|
29 | }
|
30 |
|
31 | .DateRangePickerInput_calendarIcon:hover,
|
32 | .SingleDatePickerInput_calendarIcon:hover {
|
33 | color: #212529;
|
34 | background-color: #d4d9d9;
|
35 | border-color: #cdd3d3;
|
36 | }
|
37 |
|
38 | .DateRangePickerInput_calendarIcon:focus,
|
39 | .SingleDatePickerInput_calendarIcon:focus {
|
40 | box-shadow: 0 0 0 0.2rem rgba(202, 205, 206, 0.5);
|
41 | outline: 0;
|
42 | }
|
43 |
|
44 |
|
45 | .current-day-highlight {
|
46 | .CalendarDay__today {
|
47 | background: #2261b5;
|
48 | color: #fff;
|
49 | }
|
50 | }
|
51 |
|
52 | .SingleDatePickerInput__withBorder,
|
53 | .DateRangePickerInput__withBorder {
|
54 | border-radius: 0.25em;
|
55 | width: 100%;
|
56 | display: flex;
|
57 | border: none;
|
58 | }
|
59 |
|
60 |
|
61 | .DateInput {
|
62 | border-radius: 0.25em;
|
63 | flex: 1;
|
64 | }
|
65 |
|
66 |
|
67 | .DateInput_input {
|
68 | font-size: 16px;
|
69 | font-weight: normal;
|
70 | height: calc(1.5em + 0.75rem + 2px);
|
71 | line-height: normal;
|
72 | padding: 0.375rem 0.75rem;
|
73 | border: 1px solid #ced4da;
|
74 | border-radius: 0.25rem;
|
75 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
76 | }
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 | .av-calendar-show .SingleDatePicker input.DateInput_input {
|
84 | border-top-right-radius: 0;
|
85 | border-bottom-right-radius: 0;
|
86 | border-right: none;
|
87 | }
|
88 |
|
89 | .DateRangePickerInput .DateInput:nth-of-type(1) input.DateInput_input {
|
90 | border-top-right-radius: 0;
|
91 | border-bottom-right-radius: 0;
|
92 | };
|
93 |
|
94 | .DateRangePickerInput .DateRangePickerInput_arrow ~ .DateInput input.DateInput_input {
|
95 | border-top-left-radius: 0;
|
96 | border-bottom-left-radius: 0;
|
97 | };
|
98 | .av-calendar-show .DateRangePickerInput .DateRangePickerInput_arrow ~ .DateInput input.DateInput_input{
|
99 | border-top-right-radius: 0;
|
100 | border-bottom-right-radius: 0;
|
101 | border-right: none;
|
102 |
|
103 |
|
104 | }
|
105 |
|
106 | .CalendarDay__selected,
|
107 | .CalendarDay__selected:active,
|
108 | .CalendarDay__selected:hover {
|
109 | background: #2261b5;
|
110 | border: 1px double #2261b5;
|
111 | color: #fff;
|
112 | }
|
113 |
|
114 | .DayPickerKeyboardShortcuts_show__bottomRight::before {
|
115 | border-top: 26px solid transparent;
|
116 | border-right: 33px solid #2261b5;
|
117 | bottom: 0;
|
118 | right: 0;
|
119 | }
|
120 |
|
121 | .DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
|
122 | border-right: 33px solid #007cc2;
|
123 | }
|
124 |
|
125 | .DateRangePicker {
|
126 | border-radius: 0.25em;
|
127 | }
|
128 |
|
129 | .DateRangePickerInput {
|
130 | border-radius: 0.25em;
|
131 | }
|
132 |
|
133 | .CalendarDay__hovered_span:hover {
|
134 | border: 1px double #007cc2;
|
135 | color: #2261b5;
|
136 | background: #afdaf4;
|
137 | }
|
138 |
|
139 | .CalendarDay__hovered_span,
|
140 | .CalendarDay__hovered_span:hover {
|
141 | border: 1px double #007cc2;
|
142 | color: #2261b5;
|
143 | background: #afdaf4;
|
144 | }
|
145 |
|
146 | .CalendarDay__selected_span {
|
147 | background: #08a0f6;
|
148 | border: 1px double #007cc2;
|
149 | color: #fff;
|
150 | }
|
151 |
|
152 | .CalendarDay__selected_span:hover {
|
153 | background: #0595e6;
|
154 | border: 1px double #007cc2;
|
155 | color: #fff;
|
156 | }
|
157 |
|
158 |
|
159 | .is-invalid {
|
160 | .SingleDatePicker input.DateInput_input,.DateRangePickerInput .DateRangePickerInput_arrow, .DateRangePickerInput input.DateInput_input {
|
161 | border-color: #dc3545;
|
162 | }
|
163 | .DateRangePickerInput .DateInput:nth-of-type(1) input.DateInput_input {
|
164 | border-right-color: #cdd3d3;
|
165 | }
|
166 |
|
167 | .DateRangePickerInput .DateRangePickerInput_arrow ~ .DateInput input.DateInput_input {
|
168 | border-left-color: #cdd3d3
|
169 | }
|
170 | }
|
171 |
|