← All changes
|
includes/booking-resource-selector/_src/booking-resource-selector.css
+161
-2
11.5
→
11.9
View file →
| @@ -114,11 +114,140 @@ | ||
| 114 | 114 | margin: 0; |
| 115 | 115 | } |
| 116 | 116 | .wpbc_booking_resource_selector__choices { |
| 117 | 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; | |
| 118 | 128 | gap: 10px; |
| 119 | - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| 129 | + grid-template-columns: minmax(0, 1fr); | |
| 120 | 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 | +} | |
| 121 | 250 | .wpbc_booking_resource_selector__choice { |
| 122 | 251 | align-items: center; |
| 123 | 252 | background: var(--wpbc-resource-selector-surface); |
| 124 | 253 | border: 1px solid var(--wpbc-resource-selector-border); |
| @@ -143,13 +272,22 @@ | ||
| 143 | 272 | opacity: 0; |
| 144 | 273 | pointer-events: none; |
| 145 | 274 | position: absolute; |
| 146 | 275 | } |
| 147 | -.wpbc_booking_resource_selector__choice:has(input:checked), | |
| 148 | 276 | .wpbc_booking_resource_selector__choice.is-selected { |
| 149 | 277 | border-color: var(--wpbc-resource-selector-accent); |
| 150 | 278 | box-shadow: inset 3px 0 0 var(--wpbc-resource-selector-accent); |
| 151 | 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 | +} | |
| 152 | 290 | .wpbc_booking_resource_selector__choice_body { |
| 153 | 291 | display: flex; |
| 154 | 292 | flex: 1; |
| 155 | 293 | flex-direction: column; |
| @@ -271,8 +409,16 @@ | ||
| 271 | 409 | to { |
| 272 | 410 | transform: rotate(360deg); |
| 273 | 411 | } |
| 274 | 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 | +} | |
| 275 | 421 | @media (max-width: 600px) { |
| 276 | 422 | .wpbc_booking_resource_selector:not([data-resource-selector-stage="booking"]) > .wpbc_booking_resource_selector__stage, |
| 277 | 423 | .wpbc_booking_resource_selector[data-resource-selector-stage="booking"] > .wpbc_booking_resource_selector__stage > .wpbc_booking_resource_selector__progress { |
| 278 | 424 | padding: 16px; |
| @@ -286,8 +432,21 @@ | ||
| 286 | 432 | justify-content: stretch; |
| 287 | 433 | } |
| 288 | 434 | .wpbc_booking_resource_selector__actions .wpbc_button { |
| 289 | 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; | |
| 290 | 449 | } |
| 291 | 450 | } |
| 292 | 451 | @media (prefers-reduced-motion: reduce) { |
| 293 | 452 | .wpbc_booking_resource_selector__choice { |