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