PluginProbe
Booking Calendar / 11.8.4
Booking Calendar v11.8.4
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 10.11 All 204 releases
booking / includes / booking-resource-selector / _src / booking-resource-selector.css

booking-resource-selector.css in Booking Calendar 11.8.4, at includes/booking-resource-selector/_src/booking-resource-selector.css

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