← All changes
|
includes/page-availability-general/_out/availability_general_page.css
+103
-20
11.2.1
→
11.9
View file →
| @@ -162,12 +162,34 @@ | ||
| 162 | 162 | max-width: 100%; |
| 163 | 163 | width: 100% |
| 164 | 164 | } |
| 165 | 165 | .wpbc_ag_weekday_grid { |
| 166 | + -ms-flex-align: start; | |
| 167 | + align-items: start; | |
| 166 | 168 | display: grid; |
| 169 | + gap: 6px; | |
| 170 | + grid-template-columns: repeat(7,minmax(0,1fr)) | |
| 171 | +} | |
| 172 | +.wpbc_ag_weekday_grid .wpbc_ag_weekday_switch { | |
| 173 | + -ms-flex-align: center; | |
| 174 | + align-items: center; | |
| 175 | + -ms-flex-direction: column; | |
| 176 | + flex-direction: column; | |
| 167 | 177 | gap: 8px; |
| 168 | - grid-template-columns: repeat(2,minmax(0,1fr)) | |
| 178 | + -ms-flex-pack: start; | |
| 179 | + justify-content: flex-start; | |
| 180 | + min-height: 0; | |
| 181 | + min-width: 0; | |
| 182 | + padding: 6px 0 4px; | |
| 183 | + text-align: center | |
| 169 | 184 | } |
| 185 | +.wpbc_ag_weekday_grid .wpbc_ag_switch_label { | |
| 186 | + overflow-wrap: normal; | |
| 187 | + white-space: nowrap | |
| 188 | +} | |
| 189 | +.wpbc_ag_weekday_grid + .wpbc_ag_description { | |
| 190 | + margin-top: 20px | |
| 191 | +} | |
| 170 | 192 | .wpbc_ag_switch { |
| 171 | 193 | -ms-flex-align: center; |
| 172 | 194 | align-items: center; |
| 173 | 195 | background: var(--wpbc-ts-bg,#fff); |
| @@ -400,8 +422,13 @@ | ||
| 400 | 422 | .wpbc_ag_notice { |
| 401 | 423 | border-left: 4px solid #dba617; |
| 402 | 424 | margin: 0 0 12px |
| 403 | 425 | } |
| 426 | +.wpbc_ag_notice_error { | |
| 427 | + background: #fcf0f1; | |
| 428 | + border-color: #d63638; | |
| 429 | + color: #8a2424 | |
| 430 | +} | |
| 404 | 431 | .wpbc_ag_working_time_block { |
| 405 | 432 | border-radius: var(--wpbc-ts-radius,6px); |
| 406 | 433 | margin: 10px 0 0 |
| 407 | 434 | } |
| @@ -417,35 +444,93 @@ | ||
| 417 | 444 | .wpbc_ag_working_time_notice { |
| 418 | 445 | border-left-color: #5459ac |
| 419 | 446 | } |
| 420 | 447 | .wpbc_ag_working_time_rows { |
| 421 | - display: grid; | |
| 422 | - gap: 8px | |
| 448 | + display: -ms-flexbox; | |
| 449 | + display: flex; | |
| 450 | + -ms-flex-direction: column; | |
| 451 | + flex-direction: column; | |
| 452 | + gap: 10px | |
| 423 | 453 | } |
| 424 | 454 | .wpbc_ag_working_time_row { |
| 455 | + -ms-flex-align: start; | |
| 456 | + align-items: flex-start; | |
| 457 | + display: -ms-flexbox; | |
| 458 | + display: flex; | |
| 459 | + -ms-flex-direction: column; | |
| 460 | + flex-direction: column; | |
| 461 | + gap: 6px; | |
| 462 | + min-width: 0; | |
| 463 | + padding: 3px 0 7px; | |
| 464 | + width: 100% | |
| 465 | +} | |
| 466 | +.wpbc_ag_working_time_day { | |
| 467 | + margin: 0; | |
| 468 | + padding: 0 | |
| 469 | +} | |
| 470 | +.wpbc_ag_working_time_intervals { | |
| 471 | + display: -ms-flexbox; | |
| 472 | + display: flex; | |
| 473 | + -ms-flex-direction: column; | |
| 474 | + flex-direction: column; | |
| 475 | + gap: 6px; | |
| 476 | + min-width: 0; | |
| 477 | + width: 100% | |
| 478 | +} | |
| 479 | +.wpbc_ag_working_time_times { | |
| 425 | 480 | -ms-flex-align: center; |
| 426 | 481 | align-items: center; |
| 427 | 482 | display: -ms-flexbox; |
| 428 | 483 | display: flex; |
| 429 | - gap: 8px; | |
| 430 | - -ms-flex-flow: row wrap; | |
| 431 | - flex-flow: row wrap | |
| 484 | + gap: 6px; | |
| 485 | + min-width: 0; | |
| 486 | + width: 100% | |
| 432 | 487 | } |
| 433 | -.wpbc_ag_working_time_day { | |
| 434 | - margin: 0 | |
| 488 | +.wpbc_ag_working_time_times .wpbc_ag_field_control { | |
| 489 | + -ms-flex: 1 1 0px; | |
| 490 | + flex: 1 1 0; | |
| 491 | + min-width: 0; | |
| 492 | + width: auto | |
| 435 | 493 | } |
| 436 | -.wpbc_ag_working_time_times { | |
| 494 | +.wpbc_ag_working_time_add { | |
| 437 | 495 | -ms-flex-align: center; |
| 438 | 496 | align-items: center; |
| 497 | + -ms-flex-item-align: start; | |
| 498 | + align-self: flex-start; | |
| 439 | 499 | display: -ms-inline-flexbox; |
| 440 | 500 | display: inline-flex; |
| 441 | - gap: 6px; | |
| 442 | - -ms-flex: 1 1 auto; | |
| 443 | - flex: 1 1 auto | |
| 501 | + gap: 4px | |
| 444 | 502 | } |
| 445 | -.wpbc_ag_working_time_times .wpbc_ag_field_control { | |
| 446 | - min-width: 84px | |
| 503 | +.wpbc_ag_working_time_remove { | |
| 504 | + -ms-flex-align: center; | |
| 505 | + align-items: center; | |
| 506 | + background: 0 0; | |
| 507 | + border: 0; | |
| 508 | + border-radius: 3px; | |
| 509 | + color: #646970; | |
| 510 | + cursor: pointer; | |
| 511 | + display: -ms-inline-flexbox; | |
| 512 | + display: inline-flex; | |
| 513 | + -ms-flex: 0 0 28px; | |
| 514 | + flex: 0 0 28px; | |
| 515 | + height: 28px; | |
| 516 | + -ms-flex-pack: center; | |
| 517 | + justify-content: center; | |
| 518 | + padding: 0; | |
| 519 | + width: 28px | |
| 447 | 520 | } |
| 521 | +.wpbc_ag_working_time_remove:focus, | |
| 522 | +.wpbc_ag_working_time_remove:hover { | |
| 523 | + color: #d63638 | |
| 524 | +} | |
| 525 | +.wpbc_ag_working_time_remove:focus, | |
| 526 | +.wpbc_ag_working_time_remove:focus-visible { | |
| 527 | + box-shadow: 0 0 0 2px #2271b1; | |
| 528 | + outline: transparent solid 2px | |
| 529 | +} | |
| 530 | +.wpbc_ag_working_time_row:not(.is-enabled) .wpbc_ag_working_time_intervals { | |
| 531 | + opacity: .65 | |
| 532 | +} | |
| 448 | 533 | .wpbc_ag_working_time_custom { |
| 449 | 534 | display: none; |
| 450 | 535 | margin-top: 10px |
| 451 | 536 | } |
| @@ -496,17 +581,15 @@ | ||
| 496 | 581 | .wpbc_ag_preview_controls .button, |
| 497 | 582 | .wpbc_ag_preview_controls select { |
| 498 | 583 | width: 100% |
| 499 | 584 | } |
| 500 | - .wpbc_ag_weekday_grid, | |
| 501 | - .wpbc_ag_working_time_row { | |
| 502 | - grid-template-columns: 1fr | |
| 585 | + .wpbc_ag_weekday_grid { | |
| 586 | + gap: 3px; | |
| 587 | + grid-template-columns: repeat(7,minmax(0,1fr)) | |
| 503 | 588 | } |
| 504 | 589 | .wpbc_ag_working_time_times { |
| 505 | - width: 100% | |
| 590 | + gap: 4px | |
| 506 | 591 | } |
| 507 | 592 | .wpbc_ag_working_time_times .wpbc_ag_field_control { |
| 508 | - -ms-flex: 1 1 auto; | |
| 509 | - flex: 1 1 auto; | |
| 510 | 593 | min-width: 0 |
| 511 | 594 | } |
| 512 | 595 | } |