3ed5b8a50101b1258bbb4f0d525abea2f7d0f575
[Packages/TYPO3.CMS.git] / typo3 / contrib / twbs / bootstrap-datetimepicker.less
1 /*!
2 * Datetimepicker for Bootstrap v3
3 //! version : 3.1.3
4 * https://github.com/Eonasdan/bootstrap-datetimepicker/
5 */
6 .bootstrap-datetimepicker-widget {
7 top: 0;
8 left: 0;
9 width: 250px;
10 padding: 4px;
11 margin-top: 1px;
12 z-index: 99999 !important;
13 border-radius: @border-radius-base;
14
15 &.timepicker-sbs {
16 width: 600px;
17 }
18
19 &.bottom {
20 &:before {
21 content: '';
22 display: inline-block;
23 border-left: 7px solid transparent;
24 border-right: 7px solid transparent;
25 border-bottom: 7px solid #ccc;
26 border-bottom-color: rgba(0,0,0,.2);
27 position: absolute;
28 top: -7px;
29 left: 7px;
30 }
31
32 &:after {
33 content: '';
34 display: inline-block;
35 border-left: 6px solid transparent;
36 border-right: 6px solid transparent;
37 border-bottom: 6px solid white;
38 position: absolute;
39 top: -6px;
40 left: 8px;
41 }
42 }
43
44 &.top {
45 &:before {
46 content: '';
47 display: inline-block;
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,.2);
52 position: absolute;
53 bottom: -7px;
54 left: 6px;
55 }
56
57 &:after {
58 content: '';
59 display: inline-block;
60 border-left: 6px solid transparent;
61 border-right: 6px solid transparent;
62 border-top: 6px solid white;
63 position: absolute;
64 bottom: -6px;
65 left: 7px;
66 }
67 }
68
69 & .dow {
70 width: 14.2857%;
71 }
72
73 &.pull-right {
74 &:before {
75 left: auto;
76 right: 6px;
77 }
78
79 &:after {
80 left: auto;
81 right: 7px;
82 }
83 }
84
85 >ul {
86 list-style-type: none;
87 margin: 0;
88 }
89
90 a[data-action] {
91 padding: 6px 0;
92 }
93
94 a[data-action]:active {
95 box-shadow: none;
96 }
97
98 .timepicker-hour, .timepicker-minute, .timepicker-second {
99 width: 54px;
100 font-weight: bold;
101 font-size: 1.2em;
102 margin: 0;
103 }
104
105 button[data-action] {
106 padding: 6px;
107 }
108
109 table[data-hour-format="12"] .separator {
110 width: 4px;
111 padding: 0;
112 margin: 0;
113 }
114
115 .datepicker > div {
116 display: none;
117 }
118
119 .picker-switch {
120 text-align: center;
121 }
122
123 table {
124 width: 100%;
125 margin: 0;
126 }
127
128 td,
129 th {
130 text-align: center;
131 border-radius: @border-radius-base;
132 }
133
134 td {
135 height: 54px;
136 line-height: 54px;
137 width: 54px;
138
139 &.cw
140 {
141 font-size: 10px;
142 height: 20px;
143 line-height: 20px;
144 color: @gray-light;
145 }
146
147 &.day
148 {
149 height: 20px;
150 line-height: 20px;
151 width: 20px;
152 }
153
154 &.day:hover,
155 &.hour:hover,
156 &.minute:hover,
157 &.second:hover {
158 background: @gray-lighter;
159 cursor: pointer;
160 }
161
162 &.old,
163 &.new {
164 color: @gray-light;
165 }
166
167 &.today {
168 position: relative;
169
170 &:before {
171 content: '';
172 display: inline-block;
173 border-left: 7px solid transparent;
174 border-bottom: 7px solid @btn-primary-bg;
175 border-top-color: rgba(0, 0, 0, 0.2);
176 position: absolute;
177 bottom: 4px;
178 right: 4px;
179 }
180 }
181
182 &.active,
183 &.active:hover {
184 background-color: @btn-primary-bg;
185 color: @btn-primary-color;
186 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
187 }
188
189 &.active.today:before {
190 border-bottom-color: #fff;
191 }
192
193 &.disabled,
194 &.disabled:hover {
195 background: none;
196 color: @gray-light;
197 cursor: not-allowed;
198 }
199
200 span {
201 display: inline-block;
202 width: 54px;
203 height: 54px;
204 line-height: 54px;
205 margin: 2px 1.5px;
206 cursor: pointer;
207 border-radius: @border-radius-base;
208
209 &:hover {
210 background: @gray-lighter;
211 }
212
213 &.active {
214 background-color: @btn-primary-bg;
215 color: @btn-primary-color;
216 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
217 }
218
219 &.old {
220 color: @gray-light;
221 }
222
223 &.disabled,
224 &.disabled:hover {
225 background: none;
226 color: @gray-light;
227 cursor: not-allowed;
228 }
229 }
230 }
231
232 th {
233 height: 20px;
234 line-height: 20px;
235 width: 20px;
236
237 &.picker-switch {
238 width: 145px;
239 }
240
241 &.next,
242 &.prev {
243 font-size: @font-size-base * 1.5;
244 }
245
246 &.disabled,
247 &.disabled:hover {
248 background: none;
249 color: @gray-light;
250 cursor: not-allowed;
251 }
252 }
253
254 thead tr:first-child th {
255 cursor: pointer;
256
257 &:hover {
258 background: @gray-lighter;
259 }
260 }
261 }
262
263 .input-group {
264 &.date {
265 .input-group-addon span {
266 display: block;
267 cursor: pointer;
268 width: 16px;
269 height: 16px;
270 }
271 }
272 }
273
274 .bootstrap-datetimepicker-widget.left-oriented {
275 &:before {
276 left: auto;
277 right: 6px;
278 }
279
280 &:after {
281 left: auto;
282 right: 7px;
283 }
284 }
285
286 .bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td {
287 padding: 0px !important;
288 }
289
290 @media screen and (max-width: 767px) {
291 .bootstrap-datetimepicker-widget.timepicker-sbs {
292 width: 283px;
293 }
294 }