← All changes
|
includes/page-availability-general/_src/availability_general_page.css
+163
-12
11.0
→
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); |
| @@ -176,9 +197,11 @@ | ||
| 176 | 197 | cursor: pointer; |
| 177 | 198 | display: flex; |
| 178 | 199 | gap: 8px; |
| 179 | 200 | min-height: 36px; |
| 180 | - padding: 6px 8px; | |
| 201 | + padding: 6px 0; | |
| 202 | + flex: 0 1 auto; | |
| 203 | + min-width: 70px; | |
| 181 | 204 | } |
| 182 | 205 | |
| 183 | 206 | .wpbc_ag_switch input { |
| 184 | 207 | height: 1px; |
| @@ -411,13 +434,132 @@ | ||
| 411 | 434 | line-height: 1.45; |
| 412 | 435 | padding: 10px; |
| 413 | 436 | } |
| 414 | 437 | |
| 415 | -.wpbc_ag_notice { | |
| 416 | - border-left: 4px solid #dba617; | |
| 417 | - margin: 0 0 12px; | |
| 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 | +} | |
| 448 | + | |
| 449 | +.wpbc_ag_working_time_block { | |
| 450 | + /*background: var(--wpbc-ts-bg-soft, #f6f7f7);*/ | |
| 451 | + /*border: 1px solid var(--wpbc-ts-border, #dcdcde);*/ | |
| 452 | + border-radius: var(--wpbc-ts-radius, 6px); | |
| 453 | + margin: 10px 0 0; | |
| 454 | + /*padding: 10px;*/ | |
| 418 | 455 | } |
| 419 | 456 | |
| 457 | +.wpbc_ag_working_time_block.is-disabled { | |
| 458 | + opacity: 0.58; | |
| 459 | +} | |
| 460 | + | |
| 461 | +.wpbc_ag_working_time_block.is-disabled .wpbc_ag_description { | |
| 462 | + color: #8c8f94; | |
| 463 | +} | |
| 464 | + | |
| 465 | +.wpbc_ag_working_time_block h4 { | |
| 466 | + margin: 0 0 10px; | |
| 467 | +} | |
| 468 | + | |
| 469 | +.wpbc_ag_working_time_notice { | |
| 470 | + border-left-color: #5459ac; | |
| 471 | +} | |
| 472 | + | |
| 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 | +} | |
| 552 | + | |
| 553 | +.wpbc_ag_working_time_custom { | |
| 554 | + display: none; | |
| 555 | + margin-top: 10px; | |
| 556 | +} | |
| 557 | + | |
| 558 | +.wpbc_ag_working_time_custom.is-visible { | |
| 559 | + display: block; | |
| 560 | +} | |
| 561 | + | |
| 420 | 562 | .wpbc_ag_scope_title { |
| 421 | 563 | color: #1d2327; |
| 422 | 564 | font-weight: 600; |
| 423 | 565 | margin-bottom: 4px; |
| @@ -469,9 +611,18 @@ | ||
| 469 | 611 | .wpbc_ag_preview_controls .button { |
| 470 | 612 | width: 100%; |
| 471 | 613 | } |
| 472 | 614 | |
| 473 | - .wpbc_ag_weekday_grid { | |
| 474 | - grid-template-columns: 1fr; | |
| 475 | - } | |
| 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 | + } | |
| 476 | 627 | |
| 477 | 628 | } |