PluginProbe
Booking Calendar / 10.1.3
Booking Calendar v10.1.3
11.8.3 11.8.2 11.8.1 11.8 11.7 11.6.1 11.6 11.5 11.4.3 11.4.2 11.4.1 11.4 11.3 11.2.1 11.2 11.1 11.0 10.15.7 10.15.6 10.1.3 10.10 10.10.1 10.10.2 10.11 10.11.2 All 203 releases
booking / includes / _toolbar_ui / _src / toolbar_ui.css

toolbar_ui.css in Booking Calendar 10.1.3, at includes/_toolbar_ui/_src/toolbar_ui.css

1,242 lines 36.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* UI Toolbar *************************************************************************************************/
2 /* To Compile file: Alt + F12 and run command: "gulp wpbc" */
3
4 /* 1. Default Button Style ------------------------------------------------------------------------------------------ */
5 .ui_element .wpbc_ui_button,
6 .ui_element .wpbc_button_as_icon {
7 display: flex;
8 flex-flow: row nowrap;
9 justify-content: flex-start;
10 align-items: center;
11
12 text-decoration: none;
13 /*font-size: 13px;*/
14 /*line-height: 2.15384615; !* 28px *!*/
15 /*min-height: 30px;*/
16 min-height: 24px;
17 margin: 0;
18 padding: 0 10px 2px;
19 padding-bottom: 1px;
20 cursor: pointer;
21 /*border-width: 1px; - Defined at Several elements in a Group. Point #2. */
22 border-style: solid;
23 -webkit-appearance: none;
24 /*border-radius: 3px; - Defined at Several elements in a Group. Point #2. */
25 white-space: nowrap;
26 box-sizing: border-box;
27 }
28 .ui_element .wpbc_button_as_icon {
29 border:none;
30 }
31 .ui_element .wpbc_ui_button,
32 .ui_element .wpbc_ui_button-secondary {
33 color: #555;
34 border-color: #d8d8d8;
35 background: #f7f7f7;
36 vertical-align: top;
37 }
38 /* :hover ---- */
39 .ui_element .wpbc_ui_button.hover:not(.inactive),
40 .ui_element .wpbc_ui_button:hover:not(.inactive),
41 .ui_element .wpbc_ui_button-secondary:hover:not(.inactive){
42 background: #fafafa;
43 border-color: #d8d8d8;;
44 color: #23282d;
45 text-decoration: none;
46 }
47 .ui_element .wpbc_ui_button.hover.inactive,
48 .ui_element .wpbc_ui_button.inactive:hover,
49 .ui_element .wpbc_ui_button-secondary.inactive:hover{
50 cursor: default;
51 }
52 /* :focus ---- */
53 .ui_element .wpbc_ui_button.focus,
54 .ui_element .wpbc_ui_button:focus,
55 .ui_element .wpbc_ui_button-secondary:focus {
56 background: #fafafa;
57 border-color: #d8d8d8;
58 color: #23282d;
59 /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */
60 box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8);
61 z-index: 1;
62 text-decoration: none;
63
64 /* Only visible in Windows High Contrast mode */
65 outline: 2px solid transparent;
66 /* Reset inherited offset from Gutenberg */
67 outline-offset: 0;
68 }
69 /* :active ---- */
70 .wpbc_ui_dropdown.open > .wpbc_ui_button:not(.inactive),
71 .ui_element .wpbc_ui_button:active:not(.inactive),
72 .ui_element .wpbc_ui_button-secondary:active:not(.inactive) {
73 background: #f6f7f7;
74 border-color: #d8d8d8;
75 box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .3);
76 transform: translateY(1px);
77 outline: 0;
78 text-decoration: none;
79 }
80 /* :disabled ---- */
81 .ui_element .wpbc_ui_button:disabled,
82 .ui_element .wpbc_ui_button[disabled],
83 .ui_element.disabled .wpbc_ui_button,
84 .ui_element .wpbc_ui_button.disabled,
85 .ui_element .wpbc_ui_button-secondary[disabled],
86 .ui_element .wpbc_ui_button-secondary:disabled,
87 .ui_element .wpbc_ui_button-secondary.disabled,
88 .ui_element .wpbc_ui_button-disabled {
89 color: #a7aaad !important;
90 border-color: #dcdcde !important;
91 background: #f6f7f7 !important;
92 box-shadow: none !important;
93 cursor: default;
94 transform: none !important;
95 }
96 /* .active CLASS - pressed button, pressed state e.g. a selected setting */
97 .ui_element .wpbc_ui_button.active:not(.inactive),
98 .ui_element .wpbc_ui_button.active:hover:not(.inactive) {
99 background: #f6f7f7;
100 border-color: #d8d8d8;
101 box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .3);
102 transform: translateY(1px);
103 outline: 0;
104 text-decoration: none;
105 }
106 .ui_element .wpbc_ui_button.active:focus:not(.inactive) {
107 border-color: #3582c4;
108 box-shadow:inset 0 1px 5px -3px #0a4b78, 0 0 1px 1px rgba(79, 148, 212, 0.1);
109 }
110
111 /* 2. Primary Button Style ----------------------------------------------------------------------------------------- */
112 .ui_element .wpbc_ui_button_primary {
113 background: #0085ba;
114 border-color: #0073aa #006799 #006799;
115 color: #fff;
116 text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
117 text-decoration: none;
118 box-shadow: 0 1px 0px #f1f1f1;
119 /*background: #2271b1;*/
120 /*border-color: #2271b1;*/
121 /*color: #fff;*/
122 /*text-decoration: none;*/
123 /*text-shadow: none;*/
124 }
125 /* :hover, :focus ---- */
126 .ui_element .wpbc_ui_button_primary.hover:not(.inactive),
127 .ui_element .wpbc_ui_button_primary:hover:not(.inactive),
128 .ui_element .wpbc_ui_button_primary.focus:not(.inactive),
129 .ui_element .wpbc_ui_button_primary:focus:not(.inactive) {
130 /*background: #135e96;*/
131 /*border-color: #135e96;*/
132 /*color: #fff;*/
133 background: #008ec2;
134 border-color: #006799;
135 color: #fff;
136 }
137 /* :focus ---- */
138 .ui_element .wpbc_ui_button_primary.focus:not(.inactive),
139 .ui_element .wpbc_ui_button_primary:focus:not(.inactive) {
140 box-shadow:0 0 0 0px #fff, 0 0 2px 1px #a4d7ff;
141 }
142 /* :active ---- */
143 .ui_element .wpbc_ui_button_primary.active:not(.inactive),
144 .ui_element .wpbc_ui_button_primary.active:hover:not(.inactive),
145 .ui_element .wpbc_ui_button_primary.active:focus:not(.inactive),
146 .ui_element .wpbc_ui_button_primary:active:not(.inactive) {
147 background: #0c7ca8;
148 border-color: #0b79a4;
149 box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .3);
150 color: #fff;
151 }
152 /* :disabled ---- */
153 .ui_element .wpbc_ui_button_primary[disabled],
154 .ui_element .wpbc_ui_button_primary:disabled,
155 .ui_element .wpbc_ui_button_primary-disabled,
156 .ui_element .wpbc_ui_button_primary.disabled {
157 color: #a7aaad !important;
158 background: #f6f7f7 !important;
159 border-color: #dcdcde !important;
160 box-shadow: none !important;
161 text-shadow: none !important;
162 cursor: default;
163 }
164
165 /* 2.1 Danger (Red) Button Style ----------------------------------------------------------------------------------------- */
166 .ui_element .wpbc_ui_button_danger {
167 background: #de605c;
168 border-color: #c05d5a;
169 color: #f7f7f7;
170 text-shadow: 0 0px #ba5956;
171 text-decoration: none;
172 box-shadow: 0 1px 0px #f1f1f1;
173 }
174 /* :hover, :focus ---- */
175 .ui_element .wpbc_ui_button_danger.hover:not(.inactive),
176 .ui_element .wpbc_ui_button_danger:hover:not(.inactive),
177 .ui_element .wpbc_ui_button_danger.focus:not(.inactive),
178 .ui_element .wpbc_ui_button_danger:focus:not(.inactive) {
179 background: #e6716f;
180 border-color: #d58582;
181 color: #fdfdfd;
182 text-shadow: none;
183 }
184 /* :focus ---- */
185 .ui_element .wpbc_ui_button_danger.focus:not(.inactive),
186 .ui_element .wpbc_ui_button_danger:focus:not(.inactive) {
187 box-shadow:0 0 0 0px #fff, 0 0 2px 1px #a4d7ff;
188 }
189 /* :active ---- */
190 .ui_element .wpbc_ui_button_danger.active:not(.inactive),
191 .ui_element .wpbc_ui_button_danger.active:hover:not(.inactive),
192 .ui_element .wpbc_ui_button_danger.active:focus:not(.inactive),
193 .ui_element .wpbc_ui_button_danger:active:not(.inactive) {
194 background: #ba4c48;
195 border-color: #c05d5a;
196 box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .1);
197 color: #f3f2f2;
198 }
199 /* :disabled ---- */
200 .ui_element .wpbc_ui_button_danger[disabled],
201 .ui_element .wpbc_ui_button_danger:disabled,
202 .ui_element .wpbc_ui_button_danger-disabled,
203 .ui_element .wpbc_ui_button_danger.disabled {
204 color: #a7aaad !important;
205 background: #f6f7f7 !important;
206 border-color: #dcdcde !important;
207 box-shadow: none !important;
208 text-shadow: none !important;
209 cursor: default;
210 }
211 @media (max-width: 782px) {
212 .ui_element .in-button-text {
213 display: none;
214 }
215 }
216
217 /* 3.1 Text --------------------------------------------------------------------------------------------------------- */
218 .ui_element .wpbc_ui_text {
219 border: 1px solid #d6d6d6;
220 flex: 1 1 120px;
221 }
222 /* :focus ---- */
223 .ui_element .wpbc_ui_text.focus,
224 .ui_element .wpbc_ui_text:focus {
225
226 border-color: #2271b1;
227 box-shadow: 0 0 0 1px #2271b1;
228
229 border-color: #d8d8d8;
230 /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */
231 box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8);
232 z-index: 1;
233 /* Only visible in Windows High Contrast mode */
234 outline: 2px solid transparent;
235 }
236
237 /* 3.2 Select-box ------------------------------------------------------------------------------------------------- */
238 .ui_element .wpbc_ui_select {
239 border: 1px solid #d6d6d6;
240 flex: 1 1 auto;
241 }
242 /* :focus ---- */
243 .ui_element .wpbc_ui_select.focus,
244 .ui_element .wpbc_ui_select:focus {
245
246 border-color: #2271b1;
247 box-shadow: 0 0 0 1px #2271b1;
248
249 border-color: #d8d8d8;
250 /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */
251 box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8);
252 z-index: 1;
253 /* Only visible in Windows High Contrast mode */
254 outline: 2px solid transparent;
255 }
256
257 /* 3.3 Check-box & Radio ----------------------------------------------------------------------------------------- */
258 .ui_element .wpbc_ui_checkbox,
259 .ui_element .wpbc_ui_radio {
260 border: 1px solid #bcbcbc;
261 border-radius: 4px;
262 background: #fff;
263 color: #50575e;
264 clear: none;
265 cursor: pointer;
266 display: inline-block;
267 line-height: 0 !important;
268 height: 1rem !important;
269 margin: -0.25rem 0.25rem 0 0;
270 outline: 0;
271 padding: 0 !important;
272 text-align: center;
273 vertical-align: middle;
274 width: 1rem;
275 min-width: 1rem;
276 -webkit-appearance: none;
277 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
278 transition: .05s border-color ease-in-out;
279
280 margin: 0;
281 align-self: center;
282 }
283 .ui_element .wpbc_ui_radio {
284 border-radius: 50%;
285 margin-right: 0.25rem;
286 line-height: 0.71428571;
287 }
288 /* :focus ---- */
289 .ui_element .wpbc_ui_checkbox.focus,
290 .ui_element .wpbc_ui_checkbox:focus,
291 .ui_element .wpbc_ui_radio.focus,
292 .ui_element .wpbc_ui_radio:focus {
293
294 border-color: #2271b1;
295 box-shadow: 0 0 0 1px #2271b1;
296
297 border-color: #d8d8d8;
298 /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */
299 box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8);
300 z-index: 1;
301 /* Only visible in Windows High Contrast mode */
302 outline: 2px solid transparent !important;
303 }
304 .ui_element .wpbc_ui_radio + .wpbc_ui_control_label,
305 .ui_element .wpbc_ui_checkbox + .wpbc_ui_control_label {
306 padding-left: 5px;
307 padding-right: 5px;
308 }
309 /* If radio button inside of the "button" element (border bounded), then need to center vertical position */
310 .ui_element .wpbc_ui_control.wpbc_ui_button .wpbc_ui_radio + .wpbc_ui_control_label,
311 .ui_element .wpbc_ui_control.wpbc_ui_button .wpbc_ui_checkbox + .wpbc_ui_control_label {
312 margin:0;
313 }
314 @media screen and (max-width: 782px) {
315 .ui_element .wpbc_ui_checkbox,
316 .ui_element .wpbc_ui_radio {
317 height: 1.5625rem !important;
318 width: 1.5625rem;
319 }
320 }
321 /* 3.3.5 Toggle elements, instead of checkboxes ------------------------------------------------------------------ */
322 .wpbc_ui__toggle {
323 align-items:flex-start;
324 display:flex;
325 gap:10px;
326 }
327 .wpbc_ui__toggle input[type=checkbox] {
328 display:none;
329 height:0;
330 width:0;
331 }
332 .wpbc_ui__toggle input[type=checkbox]:checked+label.wpbc_ui__toggle_icon {
333 background-color:#036aab;
334 }
335 .wpbc_ui__toggle input[type=checkbox]:checked+label.wpbc_ui__toggle_icon:after {
336 left:calc( 100% - 13px - 2px);
337 }
338 .wpbc_ui__toggle span,
339 .wpbc_ui__toggle label {
340 align-items:flex-start;
341 display:flex;
342 gap:10px;
343 margin:0;
344 vertical-align:unset;
345 }
346 .wpbc_ui__toggle .wpbc_ui__toggle_label:hover {
347 cursor:pointer;
348 }
349 .wpbc_ui__toggle .wpbc_ui__toggle_status {
350 color:#86919e;
351 font-size:12px;
352 line-height:14px;
353 margin:2px 5px;
354 }
355 .wpbc_ui__toggle .wpbc_ui__toggle_icon {
356 background-color:#bbbbbb;
357 border-radius:8.5px;
358 cursor:pointer;
359 display:inline-block;
360 height:17px;
361 margin:0 1px;
362 position:relative;
363 text-indent:-9999px;
364 width:27px;
365 flex:0 0 auto;
366 }
367 .wpbc_ui__toggle .wpbc_ui__toggle_icon:after {
368 background:#ffffff;
369 border-radius:50%;
370 content:"";
371 height:13px;
372 left:2px;
373 position:absolute;
374 top:2px;
375 width:13px;
376 transition-property:all;
377 transition-duration:0.25s;
378 transition-timing-function:ease-out;
379 }
380 .wpbc_ui__toggle .wpbc-help-tooltip {
381 margin:0 !important;
382 }
383 .wpbc_ui__toggle:hover input:checked+label.wpbc_ui__toggle_icon {
384 background-color:#215d8f;
385 }
386 .wpbc_ui__toggle:hover .wpbc_ui__toggle_icon {
387 background-color:#777777;
388 }
389 /* Fix compatibility for toggle */
390 .wpbc_ui__toggle:hover input:disabled+label.wpbc_ui__toggle_icon,
391 .wpbc_ui__toggle input[type=checkbox]:disabled+label.wpbc_ui__toggle_icon {
392 background-color:#ddd;
393 cursor:not-allowed;
394 }
395 .wpbc_ui__toggle input[type=checkbox]:checked:disabled+label.wpbc_ui__toggle_icon{
396 background-color:#c9dbe6
397 }
398 .ui_element .wpbc_ui__toggle {
399 align-items: center;
400 }
401 .wpbc_ajx_toolbar .ui_container.ui_container_small .ui_group .ui_element .wpbc_ui__toggle > *{
402 margin:0;
403 }
404 /* Fix compatibility for toggle - Settings Tables */
405 .form-table td fieldset .wpbc_ui__toggle{
406 margin: 5px 0;
407 display: inline-flex;
408 }
409 .form-table td fieldset .wpbc_ui__toggle input[type=checkbox]+label.wpbc_ui__toggle_icon {
410 margin:3px 0 0.5em !important
411 }
412 .form-table td fieldset .wpbc_ui__toggle label *,
413 .form-table td fieldset .wpbc_ui__toggle label {
414 line-height:1.6;
415 /*display:flex;*/
416 /*justify-content:center;*/
417 /*align-items:center;*/
418 margin:0 1px !important;
419 }
420 .wpbc_ui__toggle input[type=checkbox].wpbc_visible_but_out_screen {
421 display:block;
422 visibility: hidden;
423 position: absolute;
424 }
425 /* Red toggle */
426 .wpbc_toggle_danger.wpbc_ui__toggle input[type=checkbox]:checked+label.wpbc_ui__toggle_icon {
427 background-color:#d63638;
428 }
429 .wpbc_toggle_danger.wpbc_ui__toggle:hover input:checked+label.wpbc_ui__toggle_icon {
430 background-color:#d63638;
431 }
432 /* 3.4. Addon ------------------------------------------------------------------------------------------------------ */
433 .ui_element .wpbc_ui_addon {
434 flex: 0 1 auto;
435 display: flex;
436 flex-flow: row wrap;
437 justify-content: stretch;
438 align-items: center;
439 }
440
441 /* 3.5 Labels ------------------------------------------------------------------------------------------------------ */
442 .ui_element label.wpbc_ui_control_label {
443 flex: 0 1 auto;
444 display: flex;
445 flex-flow: row wrap;
446 justify-content: flex-start;
447 align-items: center;
448 padding: 0 5px 2px 0;
449 padding-bottom: 1px;
450 }
451 .ui_element label.wpbc_ui_control_label + .wpbc_ui_control:first-of-type {
452 border-top-left-radius: 3px !important;
453 border-bottom-left-radius: 3px !important;
454 }
455
456 /* 3.6. Separator ------------------------------------------------------------------------------------------------------ */
457 .ui_element .wpbc_ui_separtor {
458 flex: 0 1 auto;
459 display: flex;
460 flex-flow: row wrap;
461 justify-content: stretch;
462 align-items: center;
463
464 border-right: 1px solid #ccc;
465 }
466
467 /* 3.7. Horizontal Text Bar ------------------------------------------------------------------------------------------------------ */
468 .ui_element .wpbc_option_separator,
469 .ui_element .wpbc_option_step {
470 padding-right: 10px;
471 padding-left: 10px;
472 font-weight: 600;
473 border-bottom: 4px solid transparent;
474 padding-bottom: 9px;
475 margin-bottom: -9px;
476 }
477 .ui_element .wpbc_passed_step {
478 border-bottom: 4px solid #d0d3c0;
479 /*border-bottom: 4px solid #c8c0b7;*/
480 }
481 .ui_element .wpbc_selected_step {
482 border-bottom: 4px solid #aac71e;
483 /*border-bottom: 4px solid #c7751e;*/
484 }
485
486 /**********************************************************************************************************************/
487 /* 4. Dropdown List */
488 /**********************************************************************************************************************/
489 .ui_element .wpbc_ui_dropdown__outside_label{
490 flex: 0 1 auto;
491 display: flex;
492 flex-flow: row nowrap;
493 justify-content: flex-start;
494 align-items: center;
495 padding: 0 10px 2px 0;
496 padding-bottom: 1px;
497 }
498 .ui_element .wpbc_ui_dropdown {
499 flex: 0 1 auto;
500
501 display: flex;
502 flex-flow: row nowrap;
503 justify-content: flex-start;
504 align-items: stretch;
505
506 position: relative;
507 }
508 .ui_element .wpbc_ui_dropdown * {
509 box-sizing: border-box;
510 }
511 .ui_element .wpbc_ui_dropdown .wpbc_ui_dropdown__inside_label{
512 font-weight: 600;
513 margin:0;
514 padding:0 0.5em 0 0;
515 }
516 .ui_element .wpbc_ui_dropdown .wpbc_ui_dropdown__inside_caret {
517 display: inline-block;
518 width: 0;
519 height: 0;
520 margin-left: 7px;
521 vertical-align: middle;
522 border-top: 4px dashed;
523 border-top: 4px solid \9;
524 border-right: 4px solid transparent;
525 border-left: 4px solid transparent;
526 }
527 /* ---------------------------------------------------------------------------------------------------------- */
528 /* BORDER RADIUS */
529 /* ---------------------------------------------------------------------------------------------------------- */
530 .ui_element .wpbc_ui_dropdown:last-child > .wpbc_ui_button:last-of-type {
531 border-top-right-radius: 3px;
532 border-bottom-right-radius: 3px;
533 }
534 /* In case, if have several elements in .ui_element (like "button dropdown button"), - make borders not round */
535 /* Left border not round */
536 .ui_element .wpbc_ui_dropdown:not(:first-child) > .wpbc_ui_button:first-child{
537 border-top-left-radius: 0;
538 border-bottom-left-radius: 0;
539 }
540 /* Right border not round */
541 .ui_element .wpbc_ui_dropdown:not(:last-child) > .wpbc_ui_button:last-child{
542 border-top-right-radius: 0;
543 border-bottom-right-radius: 0;
544 }
545 /* If we have outside label, then we need to make left border round */
546 .ui_element .wpbc_ui_dropdown__outside_label + .wpbc_ui_dropdown > .wpbc_ui_button:first-child{
547 border-top-left-radius: 3px;
548 border-bottom-left-radius: 3px;
549 }
550 /* ---------------------------------------------------------------------------------------------------------- */
551 /* OPTIONS (Drop Down Menu) in Dropdown List */
552 /* ---------------------------------------------------------------------------------------------------------- */
553 /* Complex OPTION - this option include some INPUT elements --------------- */
554 .wpbc_ui_dropdown .ui_dropdown_menu li.ui_complex_option_element{
555 display: flex;
556 flex-flow: row wrap;
557 justify-content: flex-start;
558 align-items: center;
559
560 margin:0;
561 padding: 0 15px;
562 }
563 .wpbc_ui_dropdown ul.ui_dropdown_menu li.ui_complex_option_element .ui_element {
564 flex: 0 1 50%;
565
566 display: flex;
567 flex-flow: row nowrap;
568 justify-content: flex-start;
569 align-items: center;
570
571 margin:0;
572 padding: 4px 0;
573 }
574 .wpbc_ui_dropdown ul.ui_dropdown_menu li.ui_complex_option_element .ui_element > * {
575 flex: 0 1 auto;
576
577 margin:0;
578 height:auto;
579 max-width: 210px;
580 }
581 /* ---------------------------- General backdrop --------------------------- */
582 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu {
583 display: none;
584
585 position: absolute;
586 top: 100%;
587 left: 0;
588 z-index: 1000;
589 float: left;
590
591 min-width: 160px;
592 padding: 5px 0;
593 margin: 0;
594
595 list-style: none;
596
597 text-align: left;
598
599 background-color: #ffffff;
600 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
601
602 border: 1px solid #cccccc;
603 border: 1px solid rgba(0, 0, 0, 0.15);
604
605 border-radius: 0 0 3px 3px;
606 background-clip: padding-box;
607 }
608 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu-left {
609 }
610 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu-right {
611 left: auto;
612 right:0;
613 }
614 .ui_element .wpbc_ui_dropdown ul.ui_dropdown_menu *{
615 font-size: 13px;
616 }
617 @media screen and (max-width: 782px) {
618 .ui_element .wpbc_ui_dropdown ul.ui_dropdown_menu *{
619 font-size: 14px;
620 line-height: 2em;
621 }
622 }
623 /* ---------------------------- Open --------------------------------------- */
624 .ui_element .wpbc_ui_dropdown.open > .ui_dropdown_menu {
625 display: block;
626 }
627 /* ---------------------------- Align: left | right ------------------------ */
628 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu.pull-right,
629 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu.ui_dropdown_menu_right {
630 left: auto;
631 right: 0;
632 }
633 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu.ui_dropdown_menu_left {
634 left: 0;
635 right: auto;
636 }
637 /* ---------------------------- Divider ------------------------------------ */
638 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu hr{
639 height: 1px;
640 margin: 5px 0;
641 overflow: hidden;
642 background: none;
643 border: 0;
644 border-top: 1px solid #eeeeee;
645 }
646 /* ---------------------------- Header ------------------------------------- */
647 .wpbc_ui_dropdown .ui_dropdown_menu li.dropdown-header {
648 padding:0 15px;
649 color: #999;
650 font-size: 0.8em;
651 font-style: italic;
652 font-weight: 600;
653 }
654 /* ---------------------------- LI ----------------------------------------- */
655 .wpbc_ui_dropdown .ui_dropdown_menu li {
656 padding:0;
657 margin:0;
658 }
659 /* ---------------------------- A ------------------------------------------ */
660 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu a {
661 clear: both;
662 display: block;
663 font-weight: 400;
664 padding: 5px 15px;
665 white-space: nowrap;
666 /*font-size: 13px;*/
667 line-height: 18px;
668 }
669 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > li > a {
670 color: #333333;
671 text-decoration: none;
672 font-weight: 400;
673 padding:5px 15px;
674 white-space: nowrap;
675
676 display: block;
677 clear: both;
678
679 font-size: 1em;
680 line-height: 1.42857143;
681 }
682 /* ---------------------------- A :hover :focus .active -------------------- */
683 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > li > a:hover,
684 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > li > a:focus,
685 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .active > a,
686 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .active > a:hover,
687 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .active > a:focus {
688 color: #fff;
689 background: #08c;
690 text-decoration: none;
691 outline: none;
692 box-shadow: none;
693 }
694 /* ---------------------------- .disabled A ------------------------------ */
695 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a,
696 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:hover,
697 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:focus {
698 color: #ccc;
699 }
700 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:hover,
701 .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:focus {
702 text-decoration: none;
703 background-color: transparent;
704 background-image: none;
705 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
706 cursor: not-allowed;
707 }
708
709 .ui_element .wpbc_ui_dropdown .dropdown-backdrop {
710 position: fixed;
711 left: 0;
712 right: 0;
713 bottom: 0;
714 top: 0;
715 z-index: 990;
716 }
717
718 /**********************************************************************************************************************/
719
720 /* 5. Several elements in a ".ui_element" group -------------------------------------------------------------------- */
721 .ui_element .wpbc_ui_control {
722 border-radius: 0;
723 border-width:1px;
724 /*border-right-width:0;*/
725 border-right-width:1px;
726 margin-right:-1px!important;
727 }
728 .ui_element .wpbc_ui_control:first-child{
729 border-radius: 3px 0 0 3px;
730 }
731 .ui_element .wpbc_ui_control:last-child {
732 border-radius: 0 3px 3px 0;
733 border-width:1px;
734 }
735 .ui_element .wpbc_ui_control:first-child:last-child {
736 border-radius: 3px;
737 }
738
739 /**********************************************************************************************************************/
740 /** Toolbar */
741 /**********************************************************************************************************************/
742
743 .ui_nowrap {
744 flex-wrap:nowrap !important;
745 }
746
747 /* Toolbar --------------------------------------------------------------------------------------------------------- */
748 .wpbc_ajx_toolbar {
749 position:relative;
750 margin: 0 0 10px 50px;
751 }
752 .wpbc_ajx_toolbar * {
753 box-sizing: border-box;
754 }
755 /* Row of simple buttons somewhere in a page */
756 .wpbc_ajx_toolbar.wpbc_buttons_row {
757 position: initial;
758 margin:0;
759 float:left;
760
761 }
762 .wpbc_ajx_toolbar.wpbc_buttons_row .ui_container {
763 background: none;
764 border: none;
765 margin: 0;
766 padding: 0;
767 }
768 .wpbc_ajx_toolbar.wpbc_no_background .ui_container{
769 background: none;
770 border: none;
771 margin: 0;
772 padding: 0;
773 }
774 .wpbc_ajx_toolbar.wpbc_background_transparent .ui_container{
775 background: none;
776 border: none;
777 }
778 /* Container ------------------------------------------------------------------------------------------------------- */
779 .wpbc_ajx_toolbar .ui_container{
780 display: flex;
781 flex-flow: row wrap;
782 justify-content: flex-start;
783 align-items: stretch;
784
785 margin: 0;
786
787 box-shadow: none;
788 border: 1px solid #ccc;
789 border-top: none;
790 background: #f5f5f5;
791
792 font-size:14px;
793 padding: 6px 15px;
794 }
795 .wpbc_ajx_toolbar .ui_container:last-child{
796 border-radius: 0 0 2px 2px;
797 }
798 /* Toolbar wthout backgound and borders, for ability to insert elements somewhere in a page ----------------------------
799 * //FixIn: 9.6.1.5
800 ?><div class="wpbc_ajx_toolbar wpbc_no_borders"><?php
801 ?><div class="ui_container ui_container_small"><?php
802 ?><div class="ui_group"><?php
803 ?><div class="ui_element"><?php
804 wpbc_ajx__ui__options_checkbox__send_emails( $escaped_search_request_params, wpbc_ajx_get__request_params__names_default( 'default' ) );
805 ?></div><?php
806 ?></div><?php
807 ?></div><?php
808 ?></div><?php
809 */
810 .wpbc_ajx_toolbar.wpbc_no_borders .ui_container{
811 border: none;
812 background:transparent;
813 padding:0;
814 }
815 div.wpbc_ajx_toolbar.wpbc_no_borders {
816 margin:0;
817 }
818 .wpbc_ajx_under_toolbar_row {
819 display:flex;
820 flex-flow: row wrap;
821 justify-content: flex-start;
822 align-items: center;
823 }
824 .wpbc_ajx_under_toolbar_row .wpbc_ajx_booking_pagination {
825 margin-left:auto;
826 }
827 /* Groups in container --------------------------------------------------------------------------------------------- */
828 .wpbc_ajx_toolbar .ui_container .ui_group{
829 flex: 0 1 auto;
830 padding: 0;
831
832 display: flex;
833 flex-flow: row wrap;
834 justify-content: flex-start;
835 align-items: stretch;
836 border:none;
837 margin: 0 20px 0 0;
838 }
839 .wpbc_ajx_toolbar .ui_container .ui_group:last-child {
840 margin: 0;
841 }
842 .wpbc_not_toolbar_is_send_emails {
843 border-left: 1px solid #dbdbdb;
844 padding-left: 10px;
845 }
846 /* Elements -------------------------------------------------------------------------------------------------------- */
847 .wpbc_ajx_toolbar .ui_container .ui_group .ui_element {
848 display: flex;
849 flex-flow: row wrap;
850 justify-content: flex-start;
851 align-items: stretch;
852 flex: 0 1 auto;
853 position: relative;
854
855 margin: 0px 15px 0px 0;
856 }
857 .wpbc_ajx_toolbar .ui_container .ui_group .ui_element:last-child {
858 margin-right: 0;
859 }
860 .wpbc_ajx_toolbar .ui_container .ui_group .ui_element > * {
861 margin: 5px 0;
862 }
863
864 .ui_elements_divider {
865 margin-left: 15px;
866 }
867 /**********************************************************************************************************************/
868 /** Customization */
869 /**********************************************************************************************************************/
870 .wpbc_ajx_toolbar .ui_container.ui_container_small *,
871 .wpbc_ajx_toolbar .ui_container.ui_container_mini *,
872 .wpbc_ajx_toolbar .ui_container.ui_container_micro *{
873 font-size:13px;
874 }
875 .wpbc_ajx_toolbar .ui_container.ui_container_mini {
876 padding: 3px 15px;
877 }
878 @media (max-width: 782px) {
879 .wpbc_ajx_toolbar .ui_container.ui_container_small *,
880 .wpbc_ajx_toolbar .ui_container.ui_container_mini *,
881 .wpbc_ajx_toolbar .ui_container.ui_container_micro *{
882 font-size:14px;
883 }
884 }
885 /* Elements Height ------------------------------------------------------------------------------------------------- */
886 .wpbc_ajx_toolbar .ui_container .ui_group .ui_element > * {
887 height: 38px;
888 }
889 .wpbc_ajx_toolbar .ui_container.ui_container_small .ui_group .ui_element > *,
890 .wpbc_ajx_toolbar .ui_container.ui_container_mini .ui_group .ui_element > * {
891 height: 30px;
892 }
893 .wpbc_ajx_toolbar .ui_container.ui_container_micro .ui_group .ui_element > *,
894 .wpbc_ajx_toolbar .ui_container .ui_group .ui_element.ui_element_micro > *{
895 height: 22px;
896 line-height:1;
897 }
898 /* Micro Elements ------------------------------------------------------------------------------------------------- */
899 .wpbc_ajx_toolbar .ui_container .ui_group .ui_element.ui_element_micro {
900 margin-right: 5px;
901 align-items: center;
902 }
903 .wpbc_ajx_toolbar .ui_container .ui_group .ui_element.ui_element_micro:last-child{
904 margin-right: 0;
905 }
906
907 @media (max-width: 782px) {
908 .wpbc_ajx_toolbar.wpbc_buttons_row .ui_container .ui_group .ui_element > *,
909 #toolbar_booking_listing.wpbc_ajx_toolbar .ui_container .ui_group .ui_element > * {
910 height: 38px;
911 }
912 .wpbc_ajx_toolbar.wpbc_buttons_row .ui_container .ui_group .ui_element > .wpbc_ui_button,
913 #toolbar_booking_listing.wpbc_ajx_toolbar .ui_container .ui_group .ui_element > .wpbc_ui_button {
914 padding: 0 15px 2px;
915 padding-bottom: 1px;
916 display: flex;
917 flex-flow: row wrap;
918 justify-content: center;
919 align-items: center;
920 }
921 }
922
923 /* Keyword -------------------------------------------------------------------------------------------------------- */
924 .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__dates_status {
925 margin-right:2.5em;
926 }
927 .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__keyword {
928 flex: 1 1 auto;
929 }
930 .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__keyword .ui_element{
931 flex: 1 1 auto;
932 }
933 .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__keyword .ui_element .wpbc_search_field {
934 width: 100%;
935 }
936
937 /* 2nd row -------------------------------------------------------------------------------------------------------- */
938 .wpbc_ajx_toolbar .ui_container.ui_container_filter_row_2 {
939 padding: 4px 15px;
940 }
941 .wpbc_ajx_toolbar .ui_container.ui_container_filter_row_2 .ui_group.ui_group__statuses {
942 flex: 1 1 auto;
943 }
944
945
946
947 /**********************************************************************************************************************/
948 /** Booking resources - Chosen
949 /**********************************************************************************************************************/
950
951 /**
952 * Choozen Structure
953
954 <select multiple="MULTIPLE"...
955
956 div#wh_booking_type_chosen .chzn-container.chzn-container-multi .chzn-with-drop.chzn-container-active (if active)
957 ul.chzn-choices
958 li.search-choice
959 <span>
960 a.search-choice-close
961
962 li.search-field
963 input[type="text"].chzn-search-input .default (if no selected values)
964
965 div.chzn-drop
966 ul.chzn-results
967 li.result-selected || li.active-result .highlighted (if active)
968 */
969
970 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi {
971 flex: 1 1 auto;
972
973 display: flex;
974 flex-flow: column wrap;
975 justify-content: center;
976 align-items: center;
977
978 height: initial;
979 width: auto !important;
980 min-width: 10em;
981
982 margin-right: -1px;
983 }
984 @media (max-width: 782px) {
985 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi {
986 height: initial !important;
987 }
988 }
989 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices {
990 flex: 1 1 auto;
991
992 display: flex;
993 flex-flow: row wrap;
994 justify-content: flex-start;
995 align-items: center;
996 align-content: center;
997
998 margin: 0;
999 padding: 0 0 0 5px;
1000
1001 height: auto;
1002 min-height: 28px !important;
1003
1004 border-radius: 3px 0 0 3px;
1005 }
1006 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi.chzn-container-active ul.chzn-choices {
1007 border-color: #d8d8d8 !important;
1008 box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8) !important;
1009 z-index: 1;
1010 outline: 2px solid transparent;
1011 }
1012
1013 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-choice{
1014 flex: 0 1 auto;
1015
1016 display: flex;
1017 flex-flow: row nowrap;
1018 justify-content: flex-start;
1019 align-items: baseline;
1020
1021 margin: 3px 7px 3px 0;
1022 padding: 4px 7px 4px 8px;
1023 }
1024 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-choice span {
1025 word-wrap: break-word;
1026 }
1027 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-choice a.search-choice-close{
1028 font-family: "Glyphicons Halflings";
1029 font-style: normal;
1030 font-weight: 400;
1031 font-size: 9px;
1032
1033 color: #555;
1034 text-decoration: none;
1035
1036 position: relative;
1037 top: auto;
1038 left: auto;
1039 right: auto;
1040 bottom: auto;
1041
1042 margin: 0 0 0 1em;
1043
1044 display: flex;
1045 flex-flow: column wrap;
1046 justify-content: center;
1047 align-content: center;
1048
1049 width: auto;
1050 height: auto;
1051 }
1052 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-choice a.search-choice-close:before {
1053 content: "\e014";
1054 }
1055 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-choice a.search-choice-close:hover {
1056 text-decoration: none;
1057 }
1058
1059
1060 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-field{
1061 flex: 0 1 1px;
1062
1063 display: flex;
1064 flex-flow: row wrap;
1065 justify-content: flex-start;
1066 align-items: center;
1067
1068 margin: 0px 0 0px 0;
1069 padding: 0;
1070
1071 white-space: nowrap;
1072 }
1073 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-field input[type="text"].default {
1074 min-width: 12em;
1075 }
1076 .ui_container .ui_group .ui_element .chzn-container.chzn-container-multi ul.chzn-choices li.search-field input[type="text"] {
1077 font-family: inherit;
1078 }
1079
1080 .ui_container .ui_group .ui_element .chzn-container div.chzn-drop ul.chzn-results li.highlighted {
1081 color: #fff;
1082 background: #08c;
1083 text-decoration: none;
1084 outline: none;
1085 box-shadow: none;
1086 }
1087
1088 /*
1089 #wh_booking_type_chosen {
1090 width: auto !important;
1091 display: flex;
1092 flex-flow: row wrap;
1093 justify-content: center;
1094 align-items: stretch;
1095 flex: 1 1 auto;
1096 height: initial;
1097 min-width: 10em;
1098 }
1099
1100 #wh_booking_type_chosen .chzn-choices {
1101 display: flex;
1102 flex-flow: row wrap;
1103 justify-content: stretch;
1104 align-items: center;
1105 margin: 0px 0px;
1106 padding: 0 5px;
1107 min-height: auto !important;
1108 flex: 1 1 auto;
1109 border-radius: 3px 0 0 3px;
1110 }
1111
1112 .chzn-container-multi .chzn-choices .search-choice a.search-choice-close {
1113 background: none;
1114 display: inline-block;
1115 font-family: "Glyphicons Halflings";
1116 font-style: normal;
1117 font-weight: 400;
1118 font-size: 9px;
1119 line-height: 1;
1120 position: relative;
1121 top: 0px;
1122 left: 15px;
1123 color: #555;
1124 text-decoration: none;
1125 }
1126 .chzn-container-multi .chzn-choices .search-choice a.search-choice-close:hover {
1127 text-decoration: none;
1128 }
1129 .chzn-container-multi .chzn-choices .search-choice a.search-choice-close:before {
1130 content: "\e014";
1131 }
1132
1133 #wh_booking_type_chosen .chzn-search-input.default {
1134 min-width: 12em;
1135 }
1136 #wh_booking_type_chosen.chzn-container.chzn-container-multi.chzn-container-active .chzn-choices {
1137
1138 border-color: #d8d8d8 !important;
1139 box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8) !important;
1140 z-index: 1;
1141 outline: 2px solid transparent;
1142 }
1143 .chzn-container-multi .chzn-choices li.search-field input[type="text"] {
1144 font-family: inherit;
1145 }
1146 .chzn-container .chzn-results li.highlighted {
1147 color: #fff;
1148 background: #08c;
1149 text-decoration: none;
1150 outline: none;
1151 box-shadow: none;
1152 }
1153 /**/
1154
1155 /**********************************************************************************************************************/
1156 /* Blur ----------------------------------------------------------------------------------------------------------- */
1157 .wpbc_blur {
1158 filter: blur(0.75px);
1159 pointer-events: none;
1160 user-select: none
1161 }
1162
1163 .wpbc_upgrade_note {
1164 position: absolute;
1165 top: 50%;
1166 background-color: #fff;
1167 padding: 10px;
1168 border: 1px solid #D1D1D1;
1169 box-shadow: 0 3px 10px #5e5e5e33;
1170 color: #141b38;
1171 font-size: 15px;
1172 font-weight: 600;
1173 width: 100%;
1174 text-align: center;
1175
1176 line-height: 2em;
1177 }
1178 .wpbc_upgrade_note a {
1179 text-decoration: none;
1180 border-bottom: 1px dashed;
1181 }
1182 .wpbc_upgrade_note a:hover {
1183 text-decoration: none;
1184 border-bottom: 1px solid;
1185 }
1186
1187 /*[dir=ltr]*/
1188 .wpbc_upgrade_note {
1189 left: 50%;
1190 transform: translate(-50%) translateY(-50%)
1191 }
1192 /*
1193 [dir=rtl] .wpbc_upgrade_note {
1194 right: 50%;
1195 transform: translate(50%) translateY(-50%)
1196 }*/
1197 .wpbc_upgrade_note.wpbc_upgrade_theme_green {
1198 width: 70%;
1199 height: 4em;
1200 display: flex;
1201 flex-flow: column wrap;
1202 justify-content: center;
1203 align-content: center;
1204 align-items: center;
1205 border: 3px solid #5e9b05bd;
1206 border-radius: 10px;
1207 font-size: 16px;
1208 }
1209
1210 /* Big Green Upgrade Widget Container : 2024-03-14 */
1211 .wpbc_upgrade_widget{
1212 transform: translate(0) translateY(0);
1213 position: relative;
1214 z-index: 999;
1215 }
1216 .wpbc_upgrade_widget .wpbc_upgrade_widget_container {
1217 background: #fff;
1218 position: relative;
1219 }
1220 .wpbc_upgrade_widget .wpbc_upgrade_widget_container .wpbc_upgrade_note {
1221 width: 70%;
1222 height: auto;
1223 display: flex;
1224 flex-flow: row nowrap;
1225 justify-content: center;
1226 align-content: flex-start;
1227 align-items: center;
1228 }
1229 .wpbc_upgrade_widget .wpbc_upgrade_widget_container .wpbc_upgrade_note div:first-child{
1230 margin: auto;
1231 }
1232 .wpbc_upgrade_widget .wpbc_upgrade_widget_container .wpbc_upgrade_note .wpbc_panel_get_started_dismiss {
1233 align-self: flex-start;
1234 margin-left: auto;
1235 padding: 4px 10px;
1236
1237 text-decoration: none;
1238 font-weight: 600;
1239 background: #fff;
1240 border-radius: 7px;
1241 border: none;
1242 }