← All changes
|
includes/booking-resource-selector/_out/booking-resource-selector.css
+171
-2
11.5
→
11.9
View file →
| @@ -122,11 +122,154 @@ | ||
| 122 | 122 | margin: 0 |
| 123 | 123 | } |
| 124 | 124 | .wpbc_booking_resource_selector__choices { |
| 125 | 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; | |
| 126 | 138 | gap: 10px; |
| 127 | - grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) | |
| 139 | + grid-template-columns: minmax(0,1fr) | |
| 128 | 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 | +} | |
| 129 | 272 | .wpbc_booking_resource_selector__choice { |
| 130 | 273 | -ms-flex-align: center; |
| 131 | 274 | align-items: center; |
| 132 | 275 | background: var(--wpbc-resource-selector-surface); |
| @@ -153,13 +296,22 @@ | ||
| 153 | 296 | opacity: 0; |
| 154 | 297 | pointer-events: none; |
| 155 | 298 | position: absolute |
| 156 | 299 | } |
| 157 | -.wpbc_booking_resource_selector__choice.is-selected, | |
| 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 | +} | |
| 158 | 307 | .wpbc_booking_resource_selector__choice:has(input:checked) { |
| 159 | 308 | border-color: var(--wpbc-resource-selector-accent); |
| 160 | 309 | box-shadow: inset 3px 0 0 var(--wpbc-resource-selector-accent) |
| 161 | 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 | +} | |
| 162 | 314 | .wpbc_booking_resource_selector__choice_body { |
| 163 | 315 | display: -ms-flexbox; |
| 164 | 316 | display: flex; |
| 165 | 317 | -ms-flex: 1; |
| @@ -299,8 +451,16 @@ | ||
| 299 | 451 | to { |
| 300 | 452 | transform: rotate(360deg) |
| 301 | 453 | } |
| 302 | 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 | +} | |
| 303 | 463 | @media (max-width:600px) { |
| 304 | 464 | .wpbc_booking_resource_selector:not([data-resource-selector-stage=booking]) > .wpbc_booking_resource_selector__stage, |
| 305 | 465 | .wpbc_booking_resource_selector[data-resource-selector-stage=booking] > .wpbc_booking_resource_selector__stage > .wpbc_booking_resource_selector__progress { |
| 306 | 466 | padding: 16px |
| @@ -317,8 +477,17 @@ | ||
| 317 | 477 | justify-content: stretch |
| 318 | 478 | } |
| 319 | 479 | .wpbc_booking_resource_selector__actions .wpbc_button { |
| 320 | 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 | |
| 321 | 490 | } |
| 322 | 491 | } |
| 323 | 492 | @media (prefers-reduced-motion:reduce) { |
| 324 | 493 | .wpbc_booking_resource_selector__choice { |