1/*!
2 * Datetimepicker for Bootstrap 3
3 * version : 4.17.42
4 * https://github.com/Eonasdan/bootstrap-datetimepicker/
5 */
6@bs-datetimepicker-timepicker-font-size: 1.2em;
7@bs-datetimepicker-active-bg: @btn-primary-bg;
8@bs-datetimepicker-active-color: @btn-primary-color;
9@bs-datetimepicker-border-radius: @border-radius-base;
10@bs-datetimepicker-btn-hover-bg: @gray-lighter;
11@bs-datetimepicker-disabled-color: @gray-light;
12@bs-datetimepicker-alternate-color: @gray-light;
13@bs-datetimepicker-secondary-border-color: #ccc;
14@bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2);
15@bs-datetimepicker-primary-border-color: white;
16@bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
17
18.bootstrap-datetimepicker-widget {
19    list-style: none;
20
21    &.dropdown-menu {
22        margin: 2px 0;
23        padding: 4px;
24        width: 19em;
25
26        &.timepicker-sbs {
27            @media (min-width: @screen-sm-min) {
28                width: 38em;
29            }
30
31            @media (min-width: @screen-md-min) {
32                width: 38em;
33            }
34
35            @media (min-width: @screen-lg-min) {
36                width: 38em;
37            }
38        }
39
40        &:before, &:after {
41            content: '';
42            display: inline-block;
43            position: absolute;
44        }
45
46        &.bottom {
47            &:before {
48                border-left: 7px solid transparent;
49                border-right: 7px solid transparent;
50                border-bottom: 7px solid @bs-datetimepicker-secondary-border-color;
51                border-bottom-color: @bs-datetimepicker-secondary-border-color-rgba;
52                top: -7px;
53                left: 7px;
54            }
55
56            &:after {
57                border-left: 6px solid transparent;
58                border-right: 6px solid transparent;
59                border-bottom: 6px solid @bs-datetimepicker-primary-border-color;
60                top: -6px;
61                left: 8px;
62            }
63        }
64
65        &.top {
66            &:before {
67                border-left: 7px solid transparent;
68                border-right: 7px solid transparent;
69                border-top: 7px solid @bs-datetimepicker-secondary-border-color;
70                border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
71                bottom: -7px;
72                left: 6px;
73            }
74
75            &:after {
76                border-left: 6px solid transparent;
77                border-right: 6px solid transparent;
78                border-top: 6px solid @bs-datetimepicker-primary-border-color;
79                bottom: -6px;
80                left: 7px;
81            }
82        }
83
84        &.pull-right {
85            &:before {
86                left: auto;
87                right: 6px;
88            }
89
90            &:after {
91                left: auto;
92                right: 7px;
93            }
94        }
95    }
96
97    .list-unstyled {
98        margin: 0;
99    }
100
101    a[data-action] {
102        padding: 6px 0;
103    }
104
105    a[data-action]:active {
106        box-shadow: none;
107    }
108
109    .timepicker-hour, .timepicker-minute, .timepicker-second {
110        width: 54px;
111        font-weight: bold;
112        font-size: @bs-datetimepicker-timepicker-font-size;
113        margin: 0;
114    }
115
116    button[data-action] {
117        padding: 6px;
118    }
119
120    .btn[data-action="incrementHours"]::after {
121        .sr-only();
122        content: "Increment Hours";
123    }
124
125    .btn[data-action="incrementMinutes"]::after {
126        .sr-only();
127        content: "Increment Minutes";
128    }
129
130    .btn[data-action="decrementHours"]::after {
131        .sr-only();
132        content: "Decrement Hours";
133    }
134
135    .btn[data-action="decrementMinutes"]::after {
136        .sr-only();
137        content: "Decrement Minutes";
138    }
139
140    .btn[data-action="showHours"]::after {
141        .sr-only();
142        content: "Show Hours";
143    }
144
145    .btn[data-action="showMinutes"]::after {
146        .sr-only();
147        content: "Show Minutes";
148    }
149
150    .btn[data-action="togglePeriod"]::after {
151        .sr-only();
152        content: "Toggle AM/PM";
153    }
154
155    .btn[data-action="clear"]::after {
156        .sr-only();
157        content: "Clear the picker";
158    }
159
160    .btn[data-action="today"]::after {
161        .sr-only();
162        content: "Set the date to today";
163    }
164
165    .picker-switch {
166        text-align: center;
167
168        &::after {
169            .sr-only();
170            content: "Toggle Date and Time Screens";
171        }
172
173        td {
174            padding: 0;
175            margin: 0;
176            height: auto;
177            width: auto;
178            line-height: inherit;
179
180            span {
181                line-height: 2.5;
182                height: 2.5em;
183                width: 100%;
184            }
185        }
186    }
187
188    table {
189        width: 100%;
190        margin: 0;
191
192
193        & td,
194        & th {
195            text-align: center;
196            border-radius: @bs-datetimepicker-border-radius;
197        }
198
199        & th {
200            height: 20px;
201            line-height: 20px;
202            width: 20px;
203
204            &.picker-switch {
205                width: 145px;
206            }
207
208            &.disabled,
209            &.disabled:hover {
210                background: none;
211                color: @bs-datetimepicker-disabled-color;
212                cursor: not-allowed;
213            }
214
215            &.prev::after {
216                .sr-only();
217                content: "Previous Month";
218            }
219
220            &.next::after {
221                .sr-only();
222                content: "Next Month";
223            }
224        }
225
226        & thead tr:first-child th {
227            cursor: pointer;
228
229            &:hover {
230                background: @bs-datetimepicker-btn-hover-bg;
231            }
232        }
233
234        & td {
235            height: 54px;
236            line-height: 54px;
237            width: 54px;
238
239            &.cw {
240                font-size: .8em;
241                height: 20px;
242                line-height: 20px;
243                color: @bs-datetimepicker-alternate-color;
244            }
245
246            &.day {
247                height: 20px;
248                line-height: 20px;
249                width: 20px;
250            }
251
252            &.day:hover,
253            &.hour:hover,
254            &.minute:hover,
255            &.second:hover {
256                background: @bs-datetimepicker-btn-hover-bg;
257                cursor: pointer;
258            }
259
260            &.old,
261            &.new {
262                color: @bs-datetimepicker-alternate-color;
263            }
264
265            &.today {
266                position: relative;
267
268                &:before {
269                    content: '';
270                    display: inline-block;
271                    border: solid transparent;
272                    border-width: 0 0 7px 7px;
273                    border-bottom-color: @bs-datetimepicker-active-bg;
274                    border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
275                    position: absolute;
276                    bottom: 4px;
277                    right: 4px;
278                }
279            }
280
281            &.active,
282            &.active:hover {
283                background-color: @bs-datetimepicker-active-bg;
284                color: @bs-datetimepicker-active-color;
285                text-shadow: @bs-datetimepicker-text-shadow;
286            }
287
288            &.active.today:before {
289                border-bottom-color: #fff;
290            }
291
292            &.disabled,
293            &.disabled:hover {
294                background: none;
295                color: @bs-datetimepicker-disabled-color;
296                cursor: not-allowed;
297            }
298
299            span {
300                display: inline-block;
301                width: 54px;
302                height: 54px;
303                line-height: 54px;
304                margin: 2px 1.5px;
305                cursor: pointer;
306                border-radius: @bs-datetimepicker-border-radius;
307
308                &:hover {
309                    background: @bs-datetimepicker-btn-hover-bg;
310                }
311
312                &.active {
313                    background-color: @bs-datetimepicker-active-bg;
314                    color: @bs-datetimepicker-active-color;
315                    text-shadow: @bs-datetimepicker-text-shadow;
316                }
317
318                &.old {
319                    color: @bs-datetimepicker-alternate-color;
320                }
321
322                &.disabled,
323                &.disabled:hover {
324                    background: none;
325                    color: @bs-datetimepicker-disabled-color;
326                    cursor: not-allowed;
327                }
328            }
329        }
330    }
331
332    &.usetwentyfour {
333        td.hour {
334            height: 27px;
335            line-height: 27px;
336        }
337    }
338
339	&.wider {
340		width: 21em;
341	}
342
343	& .datepicker-decades .decade {
344        line-height: 1.8em !important;
345    }
346}
347
348.input-group.date {
349    & .input-group-addon {
350        cursor: pointer;
351    }
352}
353