| @@ -1,13 +1,11 @@ | ||
| 1 | 1 | @use '../common/theme'; |
| 2 | 2 | |
| 3 | -$sidebar-width: 321px; | |
| 4 | -$sidebar-gap: 30px; | |
| 5 | - | |
| 6 | -.snippet-form #titlediv #title, | |
| 7 | -.snippet-type-container { | |
| 8 | - border-color: #ccc; | |
| 9 | - block-size: 45px | |
| 3 | +.snippet-form #titlediv #title { | |
| 4 | + border-color: var(--cs-color-border); | |
| 5 | + border-radius: 5px; | |
| 6 | + block-size: 45px; | |
| 7 | + margin: 0; | |
| 10 | 8 | } |
| 11 | 9 | |
| 12 | 10 | // The type selector is a react-select control that sizes to its content; pin |
| 13 | 11 | // its bordered control box to the same 45px as the adjacent title field and |
| @@ -17,8 +15,9 @@ | ||
| 17 | 15 | |
| 18 | 16 | // Target the control box only (:first-of-type). The open menu is a later |
| 19 | 17 | // sibling div; matching it here would clamp and flex-row the option list. |
| 20 | 18 | > div:first-of-type { |
| 19 | + border-color: var(--cs-color-border); | |
| 21 | 20 | min-block-size: 45px; |
| 22 | 21 | block-size: 45px; |
| 23 | 22 | max-block-size: 45px; |
| 24 | 23 | } |
| @@ -53,10 +52,11 @@ | ||
| 53 | 52 | .conditions-editor-open { |
| 54 | 53 | .conditions-editor-header { |
| 55 | 54 | display: flex; |
| 56 | 55 | align-items: center; |
| 57 | - justify-content: space-between; | |
| 56 | + justify-content: flex-start; | |
| 58 | 57 | gap: 8px; |
| 58 | + margin-block-end: 8px; | |
| 59 | 59 | } |
| 60 | 60 | |
| 61 | 61 | .button.button-large { |
| 62 | 62 | display: flex; |
| @@ -62,11 +62,17 @@ | ||
| 62 | 62 | display: flex; |
| 63 | 63 | align-items: center; |
| 64 | 64 | gap: 8px; |
| 65 | 65 | inline-size: 100%; |
| 66 | - border-color: #ccc; | |
| 67 | - padding-block: 6px; | |
| 68 | - padding-inline: 12px; | |
| 66 | + min-block-size: 48px; | |
| 67 | + border-color: var(--cs-color-accent); | |
| 68 | + background: transparent; | |
| 69 | + padding: 6px 12px; | |
| 70 | + | |
| 71 | + &:hover:not(:disabled), | |
| 72 | + &:focus:not(:disabled) { | |
| 73 | + background: var(--cs-color-surface-subtle); | |
| 74 | + } | |
| 69 | 75 | } |
| 70 | 76 | |
| 71 | 77 | &.no-condition .cond-badge { |
| 72 | 78 | background: transparent; |
| @@ -75,18 +81,17 @@ | ||
| 75 | 81 | } |
| 76 | 82 | |
| 77 | 83 | &.no-condition:hover :not([disabled]) .cond-badge { |
| 78 | 84 | color: #fff; |
| 79 | - background: theme.$accent; | |
| 80 | - border-color: theme.$accent; | |
| 85 | + background: var(--cs-color-accent); | |
| 86 | + border-color: var(--cs-color-accent); | |
| 81 | 87 | } |
| 82 | 88 | } |
| 83 | 89 | |
| 84 | 90 | .snippet-form { |
| 85 | - margin-block-start: 10px; | |
| 86 | 91 | display: grid; |
| 87 | - gap: $sidebar-gap; | |
| 88 | - grid-template-columns: 1fr $sidebar-width; | |
| 92 | + gap: var(--cs-sidebar-gap); | |
| 93 | + grid-template-columns: 1fr var(--cs-sidebar-width); | |
| 89 | 94 | grid-template-areas: 'upper sidebar' 'lower sidebar'; |
| 90 | 95 | transition: all 700ms; |
| 91 | 96 | |
| 92 | 97 | @media (prefers-reduced-motion: reduce) { |
| @@ -113,12 +118,20 @@ | ||
| 113 | 118 | } |
| 114 | 119 | |
| 115 | 120 | .snippet-editor-sidebar { |
| 116 | 121 | grid-area: span 3 / sidebar; |
| 117 | - max-inline-size: $sidebar-width; | |
| 122 | + max-inline-size: var(--cs-sidebar-width); | |
| 118 | 123 | position: sticky; |
| 119 | - inset-block-start: 32px; | |
| 124 | + overflow: clip; | |
| 125 | + | |
| 126 | + // Keep the sidebar clear of the fixed WordPress admin bar and leave a | |
| 127 | + // usable visual gap beneath it while the editor scrolls. | |
| 128 | + inset-block-start: 48px; | |
| 120 | 129 | align-self: start; |
| 130 | + | |
| 131 | + @media (width <= 782px) { | |
| 132 | + position: static; | |
| 133 | + } | |
| 121 | 134 | } |
| 122 | 135 | |
| 123 | 136 | @media (width <= 1024px) { |
| 124 | 137 | grid-template-columns: 1fr; |
