← All changes
|
includes/booking-appointment/_src/booking-appointment.css
+115
-4
11.5
→
11.9
View file →
| @@ -120,8 +120,87 @@ | ||
| 120 | 120 | display: grid; |
| 121 | 121 | gap: 10px; |
| 122 | 122 | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| 123 | 123 | } |
| 124 | +.wpbc_booking_appointment__catalog { | |
| 125 | + display: flex; | |
| 126 | + flex-direction: column; | |
| 127 | + gap: 14px; | |
| 128 | +} | |
| 129 | +.wpbc_booking_appointment__catalog_filters { | |
| 130 | + display: grid; | |
| 131 | + gap: 10px; | |
| 132 | + grid-template-columns: minmax(0, 1fr); | |
| 133 | +} | |
| 134 | +.wpbc_booking_appointment__catalog_filters input { | |
| 135 | + background: var(--wpbc-appointment-surface); | |
| 136 | + border: 1px solid var(--wpbc-appointment-border); | |
| 137 | + border-radius: var(--wpbc_form-field-border-radius, 6px); | |
| 138 | + color: var(--wpbc-appointment-surface-text); | |
| 139 | + font: inherit; | |
| 140 | + min-height: 42px; | |
| 141 | + padding: 8px 11px; | |
| 142 | + width: 100%; | |
| 143 | +} | |
| 144 | +.wpbc_booking_appointment__catalog_filters input:focus { | |
| 145 | + border-color: var(--wpbc-appointment-focus); | |
| 146 | + box-shadow: 0 0 0 2px var(--wpbc-appointment-focus-shadow); | |
| 147 | + outline: 0; | |
| 148 | +} | |
| 149 | +.wpbc_booking_appointment__catalog--list .wpbc_booking_appointment__catalog_items { | |
| 150 | + grid-template-columns: minmax(0, 1fr); | |
| 151 | +} | |
| 152 | +.wpbc_booking_appointment__catalog--explicit-columns .wpbc_booking_appointment__catalog_items { | |
| 153 | + grid-template-columns: repeat(var(--wpbc-appointment-catalog-items-per-row), minmax(0, 1fr)); | |
| 154 | +} | |
| 155 | +.wpbc_booking_appointment__catalog--explicit-item-width .wpbc_booking_appointment__catalog_items { | |
| 156 | + grid-template-columns: repeat(auto-fill, minmax(0, var(--wpbc-appointment-catalog-item-track-width))); | |
| 157 | + justify-content: start; | |
| 158 | +} | |
| 159 | +.wpbc_booking_appointment__catalog--explicit-item-width .wpbc_booking_appointment__catalog_card { | |
| 160 | + width: 100%; | |
| 161 | +} | |
| 162 | +.wpbc_booking_appointment__catalog--bounded .wpbc_booking_appointment__catalog_items { | |
| 163 | + justify-items: start; | |
| 164 | +} | |
| 165 | +.wpbc_booking_appointment__catalog--bounded .wpbc_booking_appointment__catalog_card { | |
| 166 | + max-width: var(--wpbc-appointment-catalog-item-max-width); | |
| 167 | + width: 100%; | |
| 168 | +} | |
| 169 | +.wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__catalog_card { | |
| 170 | + align-items: stretch; | |
| 171 | + flex-direction: column; | |
| 172 | + min-height: 260px; | |
| 173 | + max-width: Min( 400px, 100% ); | |
| 174 | +} | |
| 175 | +.wpbc_booking_appointment__catalog--grid.wpbc_booking_appointment__catalog--without-images .wpbc_booking_appointment__catalog_card { | |
| 176 | + min-height: 150px; | |
| 177 | +} | |
| 178 | +.wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__catalog_card--without-image { | |
| 179 | + min-height: 150px; | |
| 180 | +} | |
| 181 | +.wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__service_image, | |
| 182 | +.wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__provider_avatar { | |
| 183 | + border-radius: calc(var(--wpbc_form-field-border-radius, 8px) - 2px); | |
| 184 | + flex-basis: 150px; | |
| 185 | + font-size: 24px; | |
| 186 | + height: 150px; | |
| 187 | + width: 100%; | |
| 188 | +} | |
| 189 | +.wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__choice_mark { | |
| 190 | + background: var(--wpbc-appointment-surface); | |
| 191 | + inset-block-start: 25px; | |
| 192 | + inset-inline-end: 25px; | |
| 193 | + position: absolute; | |
| 194 | +} | |
| 195 | +.wpbc_booking_appointment__catalog--grid .wpbc_booking_appointment__choice_body { | |
| 196 | + flex: 1 1 auto; | |
| 197 | +} | |
| 198 | +.wpbc_booking_appointment__catalog_empty { | |
| 199 | + color: var(--wpbc-appointment-muted); | |
| 200 | + margin: 0; | |
| 201 | + padding: 12px 0; | |
| 202 | +} | |
| 124 | 203 | .wpbc_booking_appointment__choice { |
| 125 | 204 | align-items: center; |
| 126 | 205 | background: var(--wpbc-appointment-surface); |
| 127 | 206 | border: 1px solid var(--wpbc-appointment-border); |
| @@ -134,8 +213,11 @@ | ||
| 134 | 213 | padding: 15px 16px; |
| 135 | 214 | position: relative; |
| 136 | 215 | transition: border-color .15s ease, box-shadow .15s ease; |
| 137 | 216 | } |
| 217 | +.wpbc_booking_appointment__catalog [hidden] { | |
| 218 | + display: none !important; | |
| 219 | +} | |
| 138 | 220 | .wpbc_booking_appointment__choice:hover { |
| 139 | 221 | border-color: var(--wpbc_form-field-focus-border-color, var(--wpbc-appointment-focus)); |
| 140 | 222 | } |
| 141 | 223 | .wpbc_booking_appointment__choice:focus-within { |
| @@ -236,9 +318,9 @@ | ||
| 236 | 318 | align-items: baseline; |
| 237 | 319 | flex-wrap: wrap; |
| 238 | 320 | gap: 7px 12px; |
| 239 | 321 | } |
| 240 | -.wpbc_booking_appointment__selected > span, .wpbc_booking_appointment__booking_header span { | |
| 322 | +.wpbc_booking_appointment__selected > span, .wpbc_booking_appointment__booking_header_content > span { | |
| 241 | 323 | color: var(--wpbc-appointment-muted); |
| 242 | 324 | font-size: 12px; |
| 243 | 325 | text-transform: uppercase; |
| 244 | 326 | } |
| @@ -246,14 +328,23 @@ | ||
| 246 | 328 | color: var(--wpbc-appointment-muted); |
| 247 | 329 | } |
| 248 | 330 | .wpbc_booking_appointment__booking_header { |
| 249 | 331 | align-items: center; |
| 250 | - justify-content: space-between; | |
| 332 | + gap: 16px 24px; | |
| 333 | + justify-content: flex-start; | |
| 251 | 334 | } |
| 252 | -.wpbc_booking_appointment__booking_header > div { | |
| 335 | +.wpbc_booking_appointment__booking_header_content { | |
| 253 | 336 | display: flex; |
| 337 | + flex: 1 1 auto; | |
| 254 | 338 | flex-direction: column; |
| 339 | + min-width: 0; | |
| 255 | 340 | } |
| 341 | +.wpbc_booking_appointment__booking_header_image { | |
| 342 | + flex: 0 0 54px; | |
| 343 | +} | |
| 344 | +.wpbc_booking_appointment__booking_header .wpbc_booking_appointment__change { | |
| 345 | + margin-inline-start: auto; | |
| 346 | +} | |
| 256 | 347 | .wpbc_booking_appointment__selected strong, .wpbc_booking_appointment__booking_header strong { |
| 257 | 348 | color: var(--wpbc-appointment-surface-text); |
| 258 | 349 | } |
| 259 | 350 | .wpbc_booking_appointment__booking_header strong { |
| @@ -325,8 +416,23 @@ | ||
| 325 | 416 | transform: rotate(360deg); |
| 326 | 417 | } |
| 327 | 418 | } |
| 328 | 419 | @media (max-width: 600px) { |
| 420 | + .wpbc_booking_appointment__booking_header { | |
| 421 | + align-items: flex-start; | |
| 422 | + flex-wrap: wrap; | |
| 423 | + gap: 12px 16px; | |
| 424 | + } | |
| 425 | + .wpbc_booking_appointment__booking_header_image { | |
| 426 | + flex-basis: 48px; | |
| 427 | + height: 48px; | |
| 428 | + width: 48px; | |
| 429 | + } | |
| 430 | + .wpbc_booking_appointment__booking_header .wpbc_booking_appointment__change { | |
| 431 | + flex: 1 0 100%; | |
| 432 | + margin-inline-start: 0; | |
| 433 | + text-align: center; | |
| 434 | + } | |
| 329 | 435 | .wpbc_booking_appointment .wpbc_booking_appointment__progress { |
| 330 | 436 | margin-bottom: 22px; |
| 331 | 437 | } |
| 332 | 438 | .wpbc_booking_appointment .wpbc_booking_appointment__progress_step { |
| @@ -332,8 +438,13 @@ | ||
| 332 | 438 | .wpbc_booking_appointment .wpbc_booking_appointment__progress_step { |
| 333 | 439 | font-size: 12px; |
| 334 | 440 | gap: 5px; |
| 335 | 441 | } |
| 336 | - .wpbc_booking_appointment__choices { | |
| 442 | + .wpbc_booking_appointment__choices, | |
| 443 | + .wpbc_booking_appointment__catalog--explicit-columns .wpbc_booking_appointment__catalog_items, | |
| 444 | + .wpbc_booking_appointment__catalog--explicit-item-width .wpbc_booking_appointment__catalog_items { | |
| 337 | 445 | grid-template-columns: 1fr; |
| 446 | + } | |
| 447 | + .wpbc_booking_appointment__catalog--bounded .wpbc_booking_appointment__catalog_card { | |
| 448 | + max-width: none; | |
| 338 | 449 | } |
| 339 | 450 | } |