← All changes
|
includes/booking-appointment/_out/booking-appointment.css
+127
-5
11.5
→
11.9
View file →
| @@ -132,8 +132,92 @@ | ||
| 132 | 132 | display: grid; |
| 133 | 133 | gap: 10px; |
| 134 | 134 | grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) |
| 135 | 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 | +} | |
| 136 | 220 | .wpbc_booking_appointment__choice { |
| 137 | 221 | -ms-flex-align: center; |
| 138 | 222 | align-items: center; |
| 139 | 223 | background: var(--wpbc-appointment-surface); |
| @@ -148,8 +232,11 @@ | ||
| 148 | 232 | padding: 15px 16px; |
| 149 | 233 | position: relative; |
| 150 | 234 | transition: border-color .15s,box-shadow .15s |
| 151 | 235 | } |
| 236 | +.wpbc_booking_appointment__catalog [hidden] { | |
| 237 | + display: none!important | |
| 238 | +} | |
| 152 | 239 | .wpbc_booking_appointment__choice:hover { |
| 153 | 240 | border-color: var(--wpbc_form-field-focus-border-color,var(--wpbc-appointment-focus)) |
| 154 | 241 | } |
| 155 | 242 | .wpbc_booking_appointment__choice:focus-within { |
| @@ -267,9 +354,9 @@ | ||
| 267 | 354 | -ms-flex-wrap: wrap; |
| 268 | 355 | flex-wrap: wrap; |
| 269 | 356 | gap: 7px 12px |
| 270 | 357 | } |
| 271 | -.wpbc_booking_appointment__booking_header span, | |
| 358 | +.wpbc_booking_appointment__booking_header_content > span, | |
| 272 | 359 | .wpbc_booking_appointment__selected > span { |
| 273 | 360 | color: var(--wpbc-appointment-muted); |
| 274 | 361 | font-size: 12px; |
| 275 | 362 | text-transform: uppercase |
| @@ -280,17 +367,28 @@ | ||
| 280 | 367 | } |
| 281 | 368 | .wpbc_booking_appointment__booking_header { |
| 282 | 369 | -ms-flex-align: center; |
| 283 | 370 | align-items: center; |
| 284 | - -ms-flex-pack: justify; | |
| 285 | - justify-content: space-between | |
| 371 | + gap: 16px 24px; | |
| 372 | + -ms-flex-pack: start; | |
| 373 | + justify-content: flex-start | |
| 286 | 374 | } |
| 287 | -.wpbc_booking_appointment__booking_header > div { | |
| 375 | +.wpbc_booking_appointment__booking_header_content { | |
| 288 | 376 | display: -ms-flexbox; |
| 289 | 377 | display: flex; |
| 378 | + -ms-flex: 1 1 auto; | |
| 379 | + flex: 1 1 auto; | |
| 290 | 380 | -ms-flex-direction: column; |
| 291 | - flex-direction: column | |
| 381 | + flex-direction: column; | |
| 382 | + min-width: 0 | |
| 292 | 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 | +} | |
| 293 | 391 | .wpbc_booking_appointment__booking_header strong, |
| 294 | 392 | .wpbc_booking_appointment__selected strong { |
| 295 | 393 | color: var(--wpbc-appointment-surface-text) |
| 296 | 394 | } |
| @@ -369,8 +467,27 @@ | ||
| 369 | 467 | transform: rotate(360deg) |
| 370 | 468 | } |
| 371 | 469 | } |
| 372 | 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 | + } | |
| 373 | 490 | .wpbc_booking_appointment .wpbc_booking_appointment__progress { |
| 374 | 491 | margin-bottom: 22px |
| 375 | 492 | } |
| 376 | 493 | .wpbc_booking_appointment .wpbc_booking_appointment__progress_step { |
| @@ -376,8 +493,13 @@ | ||
| 376 | 493 | .wpbc_booking_appointment .wpbc_booking_appointment__progress_step { |
| 377 | 494 | font-size: 12px; |
| 378 | 495 | gap: 5px |
| 379 | 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, | |
| 380 | 499 | .wpbc_booking_appointment__choices { |
| 381 | 500 | grid-template-columns: 1fr |
| 501 | + } | |
| 502 | + .wpbc_booking_appointment__catalog--bounded .wpbc_booking_appointment__catalog_card { | |
| 503 | + max-width: none | |
| 382 | 504 | } |
| 383 | 505 | } |