PluginProbe
Booking Calendar / 11.7
Booking Calendar v11.7
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-resource-selector / _out / booking-resource-selector.css

booking-resource-selector.css in Booking Calendar 11.7, at includes/booking-resource-selector/_out/booking-resource-selector.css

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