← All changes
|
includes/page-availability-general/_src/availability_general_page.css
+127
-51
11.4
→
11.9
View file →
| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | /** |
| 2 | 2 | * General Availability admin page. |
| 3 | 3 | */ |
| 4 | 4 | |
| @@ -162,13 +162,34 @@ | ||
| 162 | 162 | max-width: 100%; |
| 163 | 163 | width: 100%; |
| 164 | 164 | } |
| 165 | 165 | |
| 166 | -.wpbc_ag_weekday_grid { | |
| 167 | - display: grid; | |
| 168 | - gap: 8px; | |
| 169 | - grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 170 | -} | |
| 166 | +.wpbc_ag_weekday_grid { | |
| 167 | + align-items: start; | |
| 168 | + display: grid; | |
| 169 | + gap: 6px; | |
| 170 | + grid-template-columns: repeat(7, minmax(0, 1fr)); | |
| 171 | +} | |
| 172 | + | |
| 173 | +.wpbc_ag_weekday_grid .wpbc_ag_weekday_switch { | |
| 174 | + align-items: center; | |
| 175 | + flex-direction: column; | |
| 176 | + gap: 8px; | |
| 177 | + justify-content: flex-start; | |
| 178 | + min-height: 0; | |
| 179 | + min-width: 0; | |
| 180 | + padding: 6px 0 4px; | |
| 181 | + text-align: center; | |
| 182 | +} | |
| 183 | + | |
| 184 | +.wpbc_ag_weekday_grid .wpbc_ag_switch_label { | |
| 185 | + overflow-wrap: normal; | |
| 186 | + white-space: nowrap; | |
| 187 | +} | |
| 188 | + | |
| 189 | +.wpbc_ag_weekday_grid + .wpbc_ag_description { | |
| 190 | + margin-top: 20px; | |
| 191 | +} | |
| 171 | 192 | |
| 172 | 193 | .wpbc_ag_switch { |
| 173 | 194 | align-items: center; |
| 174 | 195 | background: var(--wpbc-ts-bg, #fff); |
| @@ -413,12 +434,18 @@ | ||
| 413 | 434 | line-height: 1.45; |
| 414 | 435 | padding: 10px; |
| 415 | 436 | } |
| 416 | 437 | |
| 417 | -.wpbc_ag_notice { | |
| 418 | - border-left: 4px solid #dba617; | |
| 419 | - margin: 0 0 12px; | |
| 420 | -} | |
| 438 | +.wpbc_ag_notice { | |
| 439 | + border-left: 4px solid #dba617; | |
| 440 | + margin: 0 0 12px; | |
| 441 | +} | |
| 442 | + | |
| 443 | +.wpbc_ag_notice_error { | |
| 444 | + background: #fcf0f1; | |
| 445 | + border-color: #d63638; | |
| 446 | + color: #8a2424; | |
| 447 | +} | |
| 421 | 448 | |
| 422 | 449 | .wpbc_ag_working_time_block { |
| 423 | 450 | /*background: var(--wpbc-ts-bg-soft, #f6f7f7);*/ |
| 424 | 451 | /*border: 1px solid var(--wpbc-ts-border, #dcdcde);*/ |
| @@ -442,35 +469,88 @@ | ||
| 442 | 469 | .wpbc_ag_working_time_notice { |
| 443 | 470 | border-left-color: #5459ac; |
| 444 | 471 | } |
| 445 | 472 | |
| 446 | -.wpbc_ag_working_time_rows { | |
| 447 | - display: grid; | |
| 448 | - gap: 8px; | |
| 449 | -} | |
| 473 | +.wpbc_ag_working_time_rows { | |
| 474 | + display: flex; | |
| 475 | + flex-direction: column; | |
| 476 | + gap: 10px; | |
| 477 | +} | |
| 478 | + | |
| 479 | +.wpbc_ag_working_time_row { | |
| 480 | + align-items: flex-start; | |
| 481 | + display: flex; | |
| 482 | + flex-direction: column; | |
| 483 | + gap: 6px; | |
| 484 | + min-width: 0; | |
| 485 | + padding: 3px 0 7px; | |
| 486 | + width: 100%; | |
| 487 | +} | |
| 488 | + | |
| 489 | +.wpbc_ag_working_time_day { | |
| 490 | + margin: 0; | |
| 491 | + padding: 0; | |
| 492 | +} | |
| 493 | + | |
| 494 | +.wpbc_ag_working_time_intervals { | |
| 495 | + display: flex; | |
| 496 | + flex-direction: column; | |
| 497 | + gap: 6px; | |
| 498 | + min-width: 0; | |
| 499 | + width: 100%; | |
| 500 | +} | |
| 501 | + | |
| 502 | +.wpbc_ag_working_time_times { | |
| 503 | + align-items: center; | |
| 504 | + display: flex; | |
| 505 | + gap: 6px; | |
| 506 | + min-width: 0; | |
| 507 | + width: 100%; | |
| 508 | +} | |
| 509 | + | |
| 510 | +.wpbc_ag_working_time_times .wpbc_ag_field_control { | |
| 511 | + flex: 1 1 0; | |
| 512 | + min-width: 0; | |
| 513 | + width: auto; | |
| 514 | +} | |
| 515 | + | |
| 516 | +.wpbc_ag_working_time_add { | |
| 517 | + align-items: center; | |
| 518 | + align-self: flex-start; | |
| 519 | + display: inline-flex; | |
| 520 | + gap: 4px; | |
| 521 | +} | |
| 522 | + | |
| 523 | +.wpbc_ag_working_time_remove { | |
| 524 | + align-items: center; | |
| 525 | + background: transparent; | |
| 526 | + border: 0; | |
| 527 | + border-radius: 3px; | |
| 528 | + color: #646970; | |
| 529 | + cursor: pointer; | |
| 530 | + display: inline-flex; | |
| 531 | + flex: 0 0 28px; | |
| 532 | + height: 28px; | |
| 533 | + justify-content: center; | |
| 534 | + padding: 0; | |
| 535 | + width: 28px; | |
| 536 | +} | |
| 537 | + | |
| 538 | +.wpbc_ag_working_time_remove:hover, | |
| 539 | +.wpbc_ag_working_time_remove:focus { | |
| 540 | + color: #d63638; | |
| 541 | +} | |
| 542 | + | |
| 543 | +.wpbc_ag_working_time_remove:focus, | |
| 544 | +.wpbc_ag_working_time_remove:focus-visible { | |
| 545 | + box-shadow: 0 0 0 2px #2271b1; | |
| 546 | + outline: 2px solid transparent; | |
| 547 | +} | |
| 548 | + | |
| 549 | +.wpbc_ag_working_time_row:not(.is-enabled) .wpbc_ag_working_time_intervals { | |
| 550 | + opacity: 0.65; | |
| 551 | +} | |
| 450 | 552 | |
| 451 | -.wpbc_ag_working_time_row { | |
| 452 | - align-items: center; | |
| 453 | - display: flex; | |
| 454 | - gap: 8px; | |
| 455 | - flex-flow: row wrap; | |
| 456 | -} | |
| 457 | - | |
| 458 | -.wpbc_ag_working_time_day { | |
| 459 | - margin: 0; | |
| 460 | -} | |
| 461 | - | |
| 462 | -.wpbc_ag_working_time_times { | |
| 463 | - align-items: center; | |
| 464 | - display: inline-flex; | |
| 465 | - gap: 6px; | |
| 466 | - flex: 1 1 auto; | |
| 467 | -} | |
| 468 | - | |
| 469 | -.wpbc_ag_working_time_times .wpbc_ag_field_control { | |
| 470 | - min-width: 84px; | |
| 471 | -} | |
| 472 | - | |
| 473 | 553 | .wpbc_ag_working_time_custom { |
| 474 | 554 | display: none; |
| 475 | 555 | margin-top: 10px; |
| 476 | 556 | } |
| @@ -531,22 +611,18 @@ | ||
| 531 | 611 | .wpbc_ag_preview_controls .button { |
| 532 | 612 | width: 100%; |
| 533 | 613 | } |
| 534 | 614 | |
| 535 | - .wpbc_ag_weekday_grid { | |
| 536 | - grid-template-columns: 1fr; | |
| 537 | - } | |
| 538 | - | |
| 539 | - .wpbc_ag_working_time_row { | |
| 540 | - grid-template-columns: 1fr; | |
| 541 | - } | |
| 542 | - | |
| 543 | - .wpbc_ag_working_time_times { | |
| 544 | - width: 100%; | |
| 545 | - } | |
| 546 | - | |
| 547 | - .wpbc_ag_working_time_times .wpbc_ag_field_control { | |
| 548 | - flex: 1 1 auto; | |
| 549 | - min-width: 0; | |
| 550 | - } | |
| 615 | + .wpbc_ag_weekday_grid { | |
| 616 | + gap: 3px; | |
| 617 | + grid-template-columns: repeat(7, minmax(0, 1fr)); | |
| 618 | + } | |
| 619 | + | |
| 620 | + .wpbc_ag_working_time_times { | |
| 621 | + gap: 4px; | |
| 622 | + } | |
| 623 | + | |
| 624 | + .wpbc_ag_working_time_times .wpbc_ag_field_control { | |
| 625 | + min-width: 0; | |
| 626 | + } | |
| 551 | 627 | |
| 552 | 628 | } |