blob: 86f4b775e9922b6376a7145f2563fa544a055b1d [file] [log] [blame]
Dirk Vogt5c448042017-12-06 10:42:28 +01001.daterangepicker {
2 position: absolute;
3 color: inherit;
4 background-color: #fff;
5 border-radius: 4px;
6 width: 278px;
7 padding: 4px;
8 margin-top: 1px;
9 top: 100px;
10 left: 20px;
11 /* Calendars */ }
12 .daterangepicker:before, .daterangepicker:after {
13 position: absolute;
14 display: inline-block;
15 border-bottom-color: rgba(0, 0, 0, 0.2);
16 content: ''; }
17 .daterangepicker:before {
18 top: -7px;
19 border-right: 7px solid transparent;
20 border-left: 7px solid transparent;
21 border-bottom: 7px solid #ccc; }
22 .daterangepicker:after {
23 top: -6px;
24 border-right: 6px solid transparent;
25 border-bottom: 6px solid #fff;
26 border-left: 6px solid transparent; }
27 .daterangepicker.opensleft:before {
28 right: 9px; }
29 .daterangepicker.opensleft:after {
30 right: 10px; }
31 .daterangepicker.openscenter:before {
32 left: 0;
33 right: 0;
34 width: 0;
35 margin-left: auto;
36 margin-right: auto; }
37 .daterangepicker.openscenter:after {
38 left: 0;
39 right: 0;
40 width: 0;
41 margin-left: auto;
42 margin-right: auto; }
43 .daterangepicker.opensright:before {
44 left: 9px; }
45 .daterangepicker.opensright:after {
46 left: 10px; }
47 .daterangepicker.dropup {
48 margin-top: -5px; }
49 .daterangepicker.dropup:before {
50 top: initial;
51 bottom: -7px;
52 border-bottom: initial;
53 border-top: 7px solid #ccc; }
54 .daterangepicker.dropup:after {
55 top: initial;
56 bottom: -6px;
57 border-bottom: initial;
58 border-top: 6px solid #fff; }
59 .daterangepicker.dropdown-menu {
60 max-width: none;
61 z-index: 3001; }
62 .daterangepicker.single .ranges, .daterangepicker.single .calendar {
63 float: none; }
64 .daterangepicker.show-calendar .calendar {
65 display: block; }
66 .daterangepicker .calendar {
67 display: none;
68 max-width: 270px;
69 margin: 4px; }
70 .daterangepicker .calendar.single .calendar-table {
71 border: none; }
72 .daterangepicker .calendar th, .daterangepicker .calendar td {
73 white-space: nowrap;
74 text-align: center;
75 min-width: 32px; }
76 .daterangepicker .calendar-table {
77 border: 1px solid #fff;
78 padding: 4px;
79 border-radius: 4px;
80 background-color: #fff; }
81 .daterangepicker table {
82 width: 100%;
83 margin: 0; }
84 .daterangepicker td, .daterangepicker th {
85 text-align: center;
86 width: 20px;
87 height: 20px;
88 border-radius: 4px;
89 border: 1px solid transparent;
90 white-space: nowrap;
91 cursor: pointer; }
92 .daterangepicker td.available:hover, .daterangepicker th.available:hover {
93 background-color: #eee;
94 border-color: transparent;
95 color: inherit; }
96 .daterangepicker td.week, .daterangepicker th.week {
97 font-size: 80%;
98 color: #ccc; }
99 .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
100 background-color: #fff;
101 border-color: transparent;
102 color: #999; }
103 .daterangepicker td.in-range {
104 background-color: #ebf4f8;
105 border-color: transparent;
106 color: #000;
107 border-radius: 0; }
108 .daterangepicker td.start-date {
109 border-radius: 4px 0 0 4px; }
110 .daterangepicker td.end-date {
111 border-radius: 0 4px 4px 0; }
112 .daterangepicker td.start-date.end-date {
113 border-radius: 4px; }
114 .daterangepicker td.active, .daterangepicker td.active:hover {
115 background-color: #357ebd;
116 border-color: transparent;
117 color: #fff; }
118 .daterangepicker th.month {
119 width: auto; }
120 .daterangepicker td.disabled, .daterangepicker option.disabled {
121 color: #999;
122 cursor: not-allowed;
123 text-decoration: line-through; }
124 .daterangepicker select.monthselect, .daterangepicker select.yearselect {
125 font-size: 12px;
126 padding: 1px;
127 height: auto;
128 margin: 0;
129 cursor: default; }
130 .daterangepicker select.monthselect {
131 margin-right: 2%;
132 width: 56%; }
133 .daterangepicker select.yearselect {
134 width: 40%; }
135 .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
136 width: 50px;
137 margin-bottom: 0; }
138 .daterangepicker .input-mini {
139 border: 1px solid #ccc;
140 border-radius: 4px;
141 color: #555;
142 height: 30px;
143 line-height: 30px;
144 display: block;
145 vertical-align: middle;
146 margin: 0 0 5px 0;
147 padding: 0 6px 0 28px;
148 width: 100%; }
149 .daterangepicker .input-mini.active {
150 border: 1px solid #08c;
151 border-radius: 4px; }
152 .daterangepicker .daterangepicker_input {
153 position: relative; }
154 .daterangepicker .daterangepicker_input i {
155 position: absolute;
156 left: 8px;
157 top: 8px; }
158 .daterangepicker.rtl .input-mini {
159 padding-right: 28px;
160 padding-left: 6px; }
161 .daterangepicker.rtl .daterangepicker_input i {
162 left: auto;
163 right: 8px; }
164 .daterangepicker .calendar-time {
165 text-align: center;
166 margin: 5px auto;
167 line-height: 30px;
168 position: relative;
169 padding-left: 28px; }
170 .daterangepicker .calendar-time select.disabled {
171 color: #ccc;
172 cursor: not-allowed; }
173
174.ranges {
175 font-size: 11px;
176 float: none;
177 margin: 4px;
178 text-align: left; }
179 .ranges ul {
180 list-style: none;
181 margin: 0 auto;
182 padding: 0;
183 width: 100%; }
184 .ranges li {
185 font-size: 13px;
186 background-color: #f5f5f5;
187 border: 1px solid #f5f5f5;
188 border-radius: 4px;
189 color: #08c;
190 padding: 3px 12px;
191 margin-bottom: 8px;
192 cursor: pointer; }
193 .ranges li:hover {
194 background-color: #08c;
195 border: 1px solid #08c;
196 color: #fff; }
197 .ranges li.active {
198 background-color: #08c;
199 border: 1px solid #08c;
200 color: #fff; }
201
202/* Larger Screen Styling */
203@media (min-width: 564px) {
204 .daterangepicker {
205 width: auto; }
206 .daterangepicker .ranges ul {
207 width: 160px; }
208 .daterangepicker.single .ranges ul {
209 width: 100%; }
210 .daterangepicker.single .calendar.left {
211 clear: none; }
212 .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
213 float: left; }
214 .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
215 float: right; }
216 .daterangepicker.ltr {
217 direction: ltr;
218 text-align: left; }
219 .daterangepicker.ltr .calendar.left {
220 clear: left;
221 margin-right: 0; }
222 .daterangepicker.ltr .calendar.left .calendar-table {
223 border-right: none;
224 border-top-right-radius: 0;
225 border-bottom-right-radius: 0; }
226 .daterangepicker.ltr .calendar.right {
227 margin-left: 0; }
228 .daterangepicker.ltr .calendar.right .calendar-table {
229 border-left: none;
230 border-top-left-radius: 0;
231 border-bottom-left-radius: 0; }
232 .daterangepicker.ltr .left .daterangepicker_input {
233 padding-right: 12px; }
234 .daterangepicker.ltr .calendar.left .calendar-table {
235 padding-right: 12px; }
236 .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
237 float: left; }
238 .daterangepicker.rtl {
239 direction: rtl;
240 text-align: right; }
241 .daterangepicker.rtl .calendar.left {
242 clear: right;
243 margin-left: 0; }
244 .daterangepicker.rtl .calendar.left .calendar-table {
245 border-left: none;
246 border-top-left-radius: 0;
247 border-bottom-left-radius: 0; }
248 .daterangepicker.rtl .calendar.right {
249 margin-right: 0; }
250 .daterangepicker.rtl .calendar.right .calendar-table {
251 border-right: none;
252 border-top-right-radius: 0;
253 border-bottom-right-radius: 0; }
254 .daterangepicker.rtl .left .daterangepicker_input {
255 padding-left: 12px; }
256 .daterangepicker.rtl .calendar.left .calendar-table {
257 padding-left: 12px; }
258 .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
259 text-align: right;
260 float: right; } }
261@media (min-width: 730px) {
262 .daterangepicker .ranges {
263 width: auto; }
264 .daterangepicker.ltr .ranges {
265 float: left; }
266 .daterangepicker.rtl .ranges {
267 float: right; }
268 .daterangepicker .calendar.left {
269 clear: none !important; } }