2 * Datetimepicker for Bootstrap 3
3 //! version : 4.0.0-beta
4 * https://github.com/Eonasdan/bootstrap-datetimepicker/
6 .bootstrap-datetimepicker-widget.dropdown-menu {
11 @media (min-width: 768px) {
12 .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
16 @media (min-width: 992px) {
17 .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
21 @media (min-width: 1200px) {
22 .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
26 .bootstrap-datetimepicker-widget.dropdown-menu:before,
27 .bootstrap-datetimepicker-widget.dropdown-menu:after {
29 display: inline-block;
32 .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
33 border-left: 7px solid transparent;
34 border-right: 7px solid transparent;
35 border-bottom: 7px solid #ccc;
36 border-bottom-color: rgba(0, 0, 0, 0.2);
40 .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
41 border-left: 6px solid transparent;
42 border-right: 6px solid transparent;
43 border-bottom: 6px solid white;
47 .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
48 border-left: 7px solid transparent;
49 border-right: 7px solid transparent;
50 border-top: 7px solid #ccc;
51 border-top-color: rgba(0, 0, 0, 0.2);
55 .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
56 border-left: 6px solid transparent;
57 border-right: 6px solid transparent;
58 border-top: 6px solid white;
62 .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
66 .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
70 .bootstrap-datetimepicker-widget .list-unstyled {
73 .bootstrap-datetimepicker-widget a[data-action] {
76 .bootstrap-datetimepicker-widget a[data-action]:active {
79 .bootstrap-datetimepicker-widget .timepicker-hour,
80 .bootstrap-datetimepicker-widget .timepicker-minute,
81 .bootstrap-datetimepicker-widget .timepicker-second {
87 .bootstrap-datetimepicker-widget button[data-action] {
90 .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
97 clip: rect(0, 0, 0, 0);
99 content: "Increment Hours";
101 .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
108 clip: rect(0, 0, 0, 0);
110 content: "Increment Minutes";
112 .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
119 clip: rect(0, 0, 0, 0);
121 content: "Decrement Hours";
123 .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
130 clip: rect(0, 0, 0, 0);
132 content: "Decrement Minutes";
134 .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
141 clip: rect(0, 0, 0, 0);
143 content: "Show Hours";
145 .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
152 clip: rect(0, 0, 0, 0);
154 content: "Show Minutes";
156 .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
163 clip: rect(0, 0, 0, 0);
165 content: "Toggle AM/PM";
167 .bootstrap-datetimepicker-widget .picker-switch {
170 .bootstrap-datetimepicker-widget .picker-switch::after {
177 clip: rect(0, 0, 0, 0);
179 content: "Toggle Date and Time Screens";
181 .bootstrap-datetimepicker-widget .picker-switch td {
186 line-height: inherit;
188 .bootstrap-datetimepicker-widget .picker-switch td span {
193 .bootstrap-datetimepicker-widget table {
197 .bootstrap-datetimepicker-widget td,
198 .bootstrap-datetimepicker-widget th {
202 .bootstrap-datetimepicker-widget th {
207 .bootstrap-datetimepicker-widget th.picker-switch {
210 .bootstrap-datetimepicker-widget th.disabled,
211 .bootstrap-datetimepicker-widget th.disabled:hover {
216 .bootstrap-datetimepicker-widget th.prev::after {
223 clip: rect(0, 0, 0, 0);
225 content: "Previous Month";
227 .bootstrap-datetimepicker-widget th.next::after {
234 clip: rect(0, 0, 0, 0);
236 content: "Next Month";
238 .bootstrap-datetimepicker-widget thead tr:first-child th {
241 .bootstrap-datetimepicker-widget thead tr:first-child th:hover {
244 .bootstrap-datetimepicker-widget td {
249 .bootstrap-datetimepicker-widget td.cw {
255 .bootstrap-datetimepicker-widget td.day {
260 .bootstrap-datetimepicker-widget td.day:hover,
261 .bootstrap-datetimepicker-widget td.hour:hover,
262 .bootstrap-datetimepicker-widget td.minute:hover,
263 .bootstrap-datetimepicker-widget td.second:hover {
267 .bootstrap-datetimepicker-widget td.old,
268 .bootstrap-datetimepicker-widget td.new {
271 .bootstrap-datetimepicker-widget td.today {
274 .bootstrap-datetimepicker-widget td.today:before {
276 display: inline-block;
277 border-left: 7px solid transparent;
278 border-bottom: 7px solid #428bca;
279 border-top-color: rgba(0, 0, 0, 0.2);
284 .bootstrap-datetimepicker-widget td.active,
285 .bootstrap-datetimepicker-widget td.active:hover {
286 background-color: #428bca;
288 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
290 .bootstrap-datetimepicker-widget td.active.today:before {
291 border-bottom-color: #fff;
293 .bootstrap-datetimepicker-widget td.disabled,
294 .bootstrap-datetimepicker-widget td.disabled:hover {
299 .bootstrap-datetimepicker-widget td span {
300 display: inline-block;
308 .bootstrap-datetimepicker-widget td span:hover {
311 .bootstrap-datetimepicker-widget td span.active {
312 background-color: #428bca;
314 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
316 .bootstrap-datetimepicker-widget td span.old {
319 .bootstrap-datetimepicker-widget td span.disabled,
320 .bootstrap-datetimepicker-widget td span.disabled:hover {
325 .bootstrap-datetimepicker-widget.usetwentyfour td.hour {
329 .input-group.date .input-group-addon {
339 clip: rect(0, 0, 0, 0);