PluginProbe
Booking Calendar / 11.9
Booking Calendar v11.9
11.9 11.8.4 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 All 205 releases
booking / includes / booking-appointment / _out / booking-appointment.css

booking-appointment.css in Booking Calendar 11.9, at includes/booking-appointment/_out/booking-appointment.css

505 lines 16.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpbc_booking_appointment {
2 box-sizing: border-box;
3 margin: 0 auto;
4 max-width: 860px;
5 position: relative
6 }
7 .wpbc_booking_appointment__loading,
8 .wpbc_booking_ui_theme_scope {
9 --wpbc-appointment-accent: var(--wpbc_form-choice-checked-border-color, #465160);
10 --wpbc-appointment-accent-text: var(--wpbc_form-accent-contrast-color, var(--wpbc_form-button-text-color, #fff));
11 --wpbc-appointment-border: var(--wpbc_form-field-border-color, #dcdcde);
12 --wpbc-appointment-error: var(--wpbc_form-label-error-color, #d63638);
13 --wpbc-appointment-focus: var(--wpbc_form-choice-focus-color, var(--wpbc_form-field-focus-border-color, #465160));
14 --wpbc-appointment-focus-shadow: var(--wpbc_form-field-focus-shadow-color, var(--wpbc-appointment-focus));
15 --wpbc-appointment-muted: var(--wpbc_form-label-sublabel-color, #646970);
16 --wpbc-appointment-surface: var(--wpbc_form-field-background-color, #fff);
17 --wpbc-appointment-surface-text: var(--wpbc_form-field-text-color, #1d2327);
18 --wpbc-appointment-text: var(--wpbc_form-label-color, #1d2327);
19 color: var(--wpbc-appointment-text)
20 }
21 .wpbc_booking_appointment *,
22 .wpbc_booking_appointment ::after,
23 .wpbc_booking_appointment ::before {
24 box-sizing: border-box
25 }
26 .wpbc_booking_appointment:not([data-appointment-stage=booking]) > .wpbc_booking_appointment__stage {
27 background: var(--wpbc-bfb-form-background,#fff);
28 border: var(--wpbc-bfb-form-border-width,1px) solid var(--wpbc-bfb-form-border-color,#ccc);
29 border-radius: var(--wpbc-bfb-form-border-radius,2px);
30 box-shadow: var(--wpbc-bfb-form-box-shadow,rgba(0,0,0,.05) 0 2px 6px 0);
31 padding: var(--wpbc-bfb-form-padding,10px 30px)
32 }
33 .wpbc_booking_appointment .wpbc_booking_appointment__progress {
34 -ms-flex-align: start;
35 align-items: start;
36 display: grid;
37 grid-template-columns: repeat(3,minmax(0,1fr));
38 list-style: none;
39 margin: 0 0 28px;
40 padding: 0;
41 width: 100%
42 }
43 .wpbc_booking_appointment[data-appointment-stage=booking] > .wpbc_booking_appointment__stage > .wpbc_booking_appointment__progress {
44 background: var(--wpbc-bfb-form-background,#fff);
45 border: var(--wpbc-bfb-form-border-width,1px) solid var(--wpbc-bfb-form-border-color,#ccc);
46 border-radius: var(--wpbc-bfb-form-border-radius,2px);
47 box-shadow: var(--wpbc-bfb-form-box-shadow,rgba(0,0,0,.05) 0 2px 6px 0);
48 padding: var(--wpbc-bfb-form-padding,10px 30px)
49 }
50 .wpbc_booking_appointment .wpbc_booking_appointment__progress_step {
51 -ms-flex-align: center;
52 align-items: center;
53 color: var(--wpbc-appointment-muted);
54 display: -ms-flexbox;
55 display: flex;
56 -ms-flex-direction: column;
57 flex-direction: column;
58 font-size: 13px;
59 gap: 7px;
60 line-height: 1.35;
61 min-width: 0;
62 position: relative;
63 text-align: center;
64 margin: 0
65 }
66 .wpbc_booking_appointment .wpbc_booking_appointment__progress_step:not(:last-child)::after {
67 background: var(--wpbc-appointment-border);
68 content: "";
69 height: 1px;
70 left: calc(50% + 15px);
71 position: absolute;
72 right: calc(-50% + 15px);
73 top: 15px
74 }
75 .wpbc_booking_appointment .wpbc_booking_appointment__progress_step.is-complete::after {
76 background: var(--wpbc-appointment-accent)
77 }
78 .wpbc_booking_appointment .wpbc_booking_appointment__progress_number {
79 -ms-flex-align: center;
80 align-items: center;
81 background: var(--wpbc-appointment-surface);
82 border: 1px solid var(--wpbc-appointment-border);
83 border-radius: 50%;
84 color: var(--wpbc-appointment-surface-text);
85 display: -ms-inline-flexbox;
86 display: inline-flex;
87 -ms-flex: 0 0 30px;
88 flex: 0 0 30px;
89 font-weight: 600;
90 height: 30px;
91 -ms-flex-pack: center;
92 justify-content: center;
93 line-height: 1;
94 position: relative;
95 width: 30px;
96 z-index: 1
97 }
98 .wpbc_booking_appointment .wpbc_booking_appointment__progress_label {
99 display: block;
100 max-width: 100%
101 }
102 .wpbc_booking_appointment .wpbc_booking_appointment__progress_step.is-active {
103 color: var(--wpbc-appointment-text);
104 font-weight: 600
105 }
106 .wpbc_booking_appointment .wpbc_booking_appointment__progress_step.is-active .wpbc_booking_appointment__progress_number,
107 .wpbc_booking_appointment .wpbc_booking_appointment__progress_step.is-complete .wpbc_booking_appointment__progress_number {
108 background: var(--wpbc-appointment-accent);
109 border-color: var(--wpbc-appointment-accent);
110 color: var(--wpbc-appointment-accent-text)
111 }
112 .wpbc_booking_appointment__heading {
113 margin: 0 0 18px
114 }
115 .wpbc_booking_appointment__heading h3 {
116 color: var(--wpbc-appointment-text);
117 font-size: 24px;
118 line-height: 1.25;
119 margin: 0 0 5px
120 }
121 .wpbc_booking_appointment__heading h3:focus {
122 border-radius: var(--wpbc_form-field-border-radius,8px);
123 box-shadow: 0 0 0 2px var(--wpbc_form-button-focus-inner-color,var(--wpbc-bfb-form-background,var(--wpbc_form-field-background-color,#fff)));
124 outline: 0 dashed var(--wpbc_form-button-focus-outline-color,var(--wpbc_form-field-focus-border-color,var(--wpbc_form-button-background-color,#066aab)));
125 outline-offset: 2px
126 }
127 .wpbc_booking_appointment__heading p {
128 color: var(--wpbc-appointment-muted);
129 margin: 0
130 }
131 .wpbc_booking_appointment__choices {
132 display: grid;
133 gap: 10px;
134 grid-template-columns: repeat(auto-fit,minmax(280px,1fr))
135 }
136 .wpbc_booking_appointment__catalog {
137 display: -ms-flexbox;
138 display: flex;
139 -ms-flex-direction: column;
140 flex-direction: column;
141 gap: 14px
142 }
143 .wpbc_booking_appointment__catalog_filters {
144 display: grid;
145 gap: 10px;
146 grid-template-columns: minmax(0,1fr)
147 }
148 .wpbc_booking_appointment__catalog_filters input {
149 background: var(--wpbc-appointment-surface);
150 border: 1px solid var(--wpbc-appointment-border);
151 border-radius: var(--wpbc_form-field-border-radius,6px);
152 color: var(--wpbc-appointment-surface-text);
153 font: inherit;
154 min-height: 42px;
155 padding: 8px 11px;
156 width: 100%
157 }
158 .wpbc_booking_appointment__catalog_filters input:focus {
159 border-color: var(--wpbc-appointment-focus);
160 box-shadow: 0 0 0 2px var(--wpbc-appointment-focus-shadow);
161 outline: 0
162 }
163 .wpbc_booking_appointment__catalog--list .wpbc_booking_appointment__catalog_items {
164 grid-template-columns: minmax(0,1fr)
165 }
166 .wpbc_booking_appointment__catalog--explicit-columns .wpbc_booking_appointment__catalog_items {
167 grid-template-columns: repeat(var(--wpbc-appointment-catalog-items-per-row),minmax(0,1fr))
168 }
169 .wpbc_booking_appointment__catalog--explicit-item-width .wpbc_booking_appointment__catalog_items {
170 grid-template-columns: repeat(auto-fill,minmax(0,var(--wpbc-appointment-catalog-item-track-width)));
171 -ms-flex-pack: start;
172 justify-content: start
173 }
174 .wpbc_booking_appointment__catalog--explicit-item-width .wpbc_booking_appointment__catalog_card {
175 width: 100%
176 }
177 .wpbc_booking_appointment__catalog--bounded .wpbc_booking_appointment__catalog_items {
178 justify-items: start
179 }
180 .wpbc_booking_appointment__catalog--bounded .wpbc_booking_appointment__catalog_card {
181 max-width: var(--wpbc-appointment-catalog-item-max-width);
182 width: 100%
183 }
184 .wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__catalog_card {
185 -ms-flex-align: stretch;
186 align-items: stretch;
187 -ms-flex-direction: column;
188 flex-direction: column;
189 min-height: 260px;
190 max-width: min(400px,100%)
191 }
192 .wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__catalog_card--without-image,
193 .wpbc_booking_appointment__catalog--grid.wpbc_booking_appointment__catalog--without-images .wpbc_booking_appointment__catalog_card {
194 min-height: 150px
195 }
196 .wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__provider_avatar,
197 .wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__service_image {
198 border-radius: calc(var(--wpbc_form-field-border-radius,8px) - 2px);
199 -ms-flex-preferred-size: 150px;
200 flex-basis: 150px;
201 font-size: 24px;
202 height: 150px;
203 width: 100%
204 }
205 .wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__choice_mark {
206 background: var(--wpbc-appointment-surface);
207 inset-block-start: 25px;
208 inset-inline-end: 25px;
209 position: absolute
210 }
211 .wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__choice_body {
212 -ms-flex: 1 1 auto;
213 flex: 1 1 auto
214 }
215 .wpbc_booking_appointment__catalog_empty {
216 color: var(--wpbc-appointment-muted);
217 margin: 0;
218 padding: 12px 0
219 }
220 .wpbc_booking_appointment__choice {
221 -ms-flex-align: center;
222 align-items: center;
223 background: var(--wpbc-appointment-surface);
224 border: 1px solid var(--wpbc-appointment-border);
225 border-radius: var(--wpbc_form-field-border-radius,8px);
226 color: var(--wpbc-appointment-surface-text);
227 cursor: pointer;
228 display: -ms-flexbox;
229 display: flex;
230 gap: 12px;
231 min-height: 86px;
232 padding: 15px 16px;
233 position: relative;
234 transition: border-color .15s,box-shadow .15s
235 }
236 .wpbc_booking_appointment__catalog [hidden] {
237 display: none!important
238 }
239 .wpbc_booking_appointment__choice:hover {
240 border-color: var(--wpbc_form-field-focus-border-color,var(--wpbc-appointment-focus))
241 }
242 .wpbc_booking_appointment__choice:focus-within {
243 box-shadow: 0 0 0 2px var(--wpbc-appointment-focus-shadow);
244 outline: 0
245 }
246 .wpbc_booking_appointment__choice > input {
247 opacity: 0;
248 pointer-events: none;
249 position: absolute
250 }
251 .wpbc_booking_appointment__choice.is-selected,
252 .wpbc_booking_appointment__choice:has(input:checked) {
253 border-color: var(--wpbc-appointment-accent);
254 box-shadow: inset 3px 0 0 var(--wpbc-appointment-accent)
255 }
256 .wpbc_booking_appointment__choice_body {
257 display: -ms-flexbox;
258 display: flex;
259 -ms-flex: 1;
260 flex: 1;
261 -ms-flex-direction: column;
262 flex-direction: column;
263 min-width: 0
264 }
265 .wpbc_booking_appointment__choice_body strong {
266 color: var(--wpbc-appointment-surface-text);
267 font-size: 16px;
268 line-height: 1.3
269 }
270 .wpbc_booking_appointment__choice_description,
271 .wpbc_booking_appointment__choice_meta {
272 color: var(--wpbc-appointment-muted);
273 font-size: 13px;
274 line-height: 1.4;
275 margin-top: 3px
276 }
277 .wpbc_booking_appointment__choice_mark {
278 border: 2px solid var(--wpbc-appointment-border);
279 border-radius: 50%;
280 -ms-flex: 0 0 auto;
281 flex: 0 0 auto;
282 height: 18px;
283 width: 18px
284 }
285 .wpbc_booking_appointment__choice input:checked ~ .wpbc_booking_appointment__choice_mark {
286 border: 5px solid var(--wpbc-appointment-accent)
287 }
288 .wpbc_booking_appointment__service_image {
289 background: var(--wpbc_form-field-background-color,var(--wpbc-appointment-surface));
290 box-sizing: border-box;
291 display: block;
292 -ms-flex: 0 0 54px;
293 flex: 0 0 54px;
294 height: 54px;
295 overflow: hidden;
296 width: 54px;
297 border-radius: 50%;
298 border: 2px solid var(--wpbc_form-field-background-color,var(--wpbc-appointment-surface));
299 outline: 1px solid var(--wpbc-appointment-border)
300 }
301 .wpbc_booking_appointment__service_image img {
302 display: block;
303 height: 100%;
304 object-fit: cover;
305 width: 100%
306 }
307 .wpbc_booking_appointment__provider_avatar {
308 -ms-flex-align: center;
309 align-items: center;
310 background: var(--wpbc-appointment-provider-avatar-background,var(--wpbc_form-button-light-background-color,#eef0ff));
311 border: 1px solid var(--wpbc-appointment-provider-avatar-border-color,var(--wpbc_form-button-light-border-color,var(--wpbc-appointment-border)));
312 border-radius: 50%;
313 color: var(--wpbc-appointment-provider-avatar-text-color,var(--wpbc_form-button-light-text-color,#3044a5));
314 display: -ms-inline-flexbox;
315 display: inline-flex;
316 -ms-flex: 0 0 44px;
317 flex: 0 0 44px;
318 font-weight: 600;
319 height: 44px;
320 -ms-flex-pack: center;
321 justify-content: center;
322 overflow: hidden;
323 width: 44px
324 }
325 .wpbc_booking_appointment__provider_avatar img {
326 display: block;
327 height: 100%;
328 object-fit: cover;
329 width: 100%
330 }
331 .wpbc_booking_appointment__actions {
332 display: -ms-flexbox;
333 display: flex;
334 gap: 10px;
335 -ms-flex-pack: end;
336 justify-content: flex-end;
337 margin-top: 20px
338 }
339 .wpbc_booking_appointment__booking_header,
340 .wpbc_booking_appointment__selected {
341 background: var(--wpbc-appointment-surface);
342 background-color: color-mix(in srgb,var(--wpbc-bfb-form-background) 90%,transparent);
343 border: 1px solid var(--wpbc-appointment-border);
344 border-radius: var(--wpbc-bfb-form-border-radius,7px);
345 color: var(--wpbc-appointment-surface-text);
346 display: -ms-flexbox;
347 display: flex;
348 margin-bottom: 22px;
349 padding: 13px 16px
350 }
351 .wpbc_booking_appointment__selected {
352 -ms-flex-align: baseline;
353 align-items: baseline;
354 -ms-flex-wrap: wrap;
355 flex-wrap: wrap;
356 gap: 7px 12px
357 }
358 .wpbc_booking_appointment__booking_header_content > span,
359 .wpbc_booking_appointment__selected > span {
360 color: var(--wpbc-appointment-muted);
361 font-size: 12px;
362 text-transform: uppercase
363 }
364 .wpbc_booking_appointment__booking_header small,
365 .wpbc_booking_appointment__selected small {
366 color: var(--wpbc-appointment-muted)
367 }
368 .wpbc_booking_appointment__booking_header {
369 -ms-flex-align: center;
370 align-items: center;
371 gap: 16px 24px;
372 -ms-flex-pack: start;
373 justify-content: flex-start
374 }
375 .wpbc_booking_appointment__booking_header_content {
376 display: -ms-flexbox;
377 display: flex;
378 -ms-flex: 1 1 auto;
379 flex: 1 1 auto;
380 -ms-flex-direction: column;
381 flex-direction: column;
382 min-width: 0
383 }
384 .wpbc_booking_appointment__booking_header_image {
385 -ms-flex: 0 0 54px;
386 flex: 0 0 54px
387 }
388 .wpbc_booking_appointment__booking_header .wpbc_booking_appointment__change {
389 margin-inline-start: auto
390 }
391 .wpbc_booking_appointment__booking_header strong,
392 .wpbc_booking_appointment__selected strong {
393 color: var(--wpbc-appointment-surface-text)
394 }
395 .wpbc_booking_appointment__booking_header strong {
396 font-size: 18px;
397 margin: 2px 0
398 }
399 .wpbc_booking_appointment__ajax_notice,
400 .wpbc_booking_appointment__notice {
401 background: var(--wpbc-appointment-surface);
402 border: 1px solid var(--wpbc-appointment-error);
403 border-left-width: 4px;
404 border-radius: var(--wpbc_form-field-border-radius,4px);
405 color: var(--wpbc-appointment-error);
406 padding: 12px 14px
407 }
408 .wpbc_booking_appointment__notice--empty {
409 border-color: var(--wpbc-appointment-focus);
410 color: var(--wpbc-appointment-text)
411 }
412 .wpbc_booking_appointment__ajax_notice {
413 margin-top: 12px
414 }
415 .wpbc_booking_appointment__notice_action {
416 color: inherit;
417 font-weight: 600;
418 text-decoration: underline;
419 text-underline-offset: 2px
420 }
421 .wpbc_booking_appointment__notice_action:focus,
422 .wpbc_booking_appointment__notice_action:hover {
423 color: inherit;
424 text-decoration-thickness: 2px
425 }
426 .wpbc_booking_appointment__loading {
427 -ms-flex-align: center;
428 align-items: center;
429 background: var(--wpbc-appointment-surface);
430 background-color: color-mix(in srgb,var(--wpbc-appointment-surface) 98%,transparent);
431 color: var(--wpbc-appointment-surface-text);
432 inset: 0;
433 -ms-flex-pack: center;
434 justify-content: center;
435 position: absolute;
436 z-index: 9999
437 }
438 .wpbc_booking_appointment__loading:not([hidden]) {
439 display: -ms-flexbox;
440 display: flex
441 }
442 .wpbc_booking_appointment__spinner {
443 animation: .8s linear infinite wpbc-appointment-spin;
444 border: 2px solid var(--wpbc-appointment-border);
445 border-radius: 50%;
446 border-top-color: var(--wpbc-appointment-accent);
447 height: 22px;
448 margin-right: 9px;
449 width: 22px
450 }
451 .wpbc_booking_appointment__fixed_duration_field {
452 display: none!important
453 }
454 .wpbc_booking_appointment .wpbc_booking_appointment__time_notice {
455 display: -ms-flexbox;
456 display: flex;
457 gap: 7px;
458 margin: 10px 0 0;
459 max-width: 100%
460 }
461 .wpbc_booking_appointment .wpbc_booking_appointment__time_notice .menu_icon {
462 -ms-flex: 0 0 auto;
463 flex: 0 0 auto
464 }
465 @keyframes wpbc-appointment-spin {
466 to {
467 transform: rotate(360deg)
468 }
469 }
470 @media (max-width:600px) {
471 .wpbc_booking_appointment__booking_header {
472 -ms-flex-align: start;
473 align-items: flex-start;
474 -ms-flex-wrap: wrap;
475 flex-wrap: wrap;
476 gap: 12px 16px
477 }
478 .wpbc_booking_appointment__booking_header_image {
479 -ms-flex-preferred-size: 48px;
480 flex-basis: 48px;
481 height: 48px;
482 width: 48px
483 }
484 .wpbc_booking_appointment__booking_header .wpbc_booking_appointment__change {
485 -ms-flex: 1 0 100%;
486 flex: 1 0 100%;
487 margin-inline-start: 0;
488 text-align: center
489 }
490 .wpbc_booking_appointment .wpbc_booking_appointment__progress {
491 margin-bottom: 22px
492 }
493 .wpbc_booking_appointment .wpbc_booking_appointment__progress_step {
494 font-size: 12px;
495 gap: 5px
496 }
497 .wpbc_booking_appointment__catalog--explicit-columns .wpbc_booking_appointment__catalog_items,
498 .wpbc_booking_appointment__catalog--explicit-item-width .wpbc_booking_appointment__catalog_items,
499 .wpbc_booking_appointment__choices {
500 grid-template-columns: 1fr
501 }
502 .wpbc_booking_appointment__catalog--bounded .wpbc_booking_appointment__catalog_card {
503 max-width: none
504 }
505 }