source: admin-center/trunk/fuentes/admin-center.install/usr/share/admin-center/lib/bower_components/eonasdan-bootstrap-datetimepicker/src/less/_bootstrap-datetimepicker.less @ 6782

Last change on this file since 6782 was 6782, checked in by kbut, 20 months ago

add moment and datetimepicker bootstrap plugin

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