| @@ -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 | } |
| @@ -63,15 +62,16 @@ | ||
| 63 | 62 | display: flex; |
| 64 | 63 | align-items: center; |
| 65 | 64 | gap: 8px; |
| 66 | 65 | inline-size: 100%; |
| 67 | - border-color: theme.$control-border; | |
| 66 | + min-block-size: 48px; | |
| 67 | + border-color: var(--cs-color-accent); | |
| 68 | 68 | background: transparent; |
| 69 | 69 | padding: 6px 12px; |
| 70 | 70 | |
| 71 | 71 | &:hover:not(:disabled), |
| 72 | 72 | &:focus:not(:disabled) { |
| 73 | - background: #f6f7f7; | |
| 73 | + background: var(--cs-color-surface-subtle); | |
| 74 | 74 | } |
| 75 | 75 | } |
| 76 | 76 | |
| 77 | 77 | &.no-condition .cond-badge { |
| @@ -81,18 +81,17 @@ | ||
| 81 | 81 | } |
| 82 | 82 | |
| 83 | 83 | &.no-condition:hover :not([disabled]) .cond-badge { |
| 84 | 84 | color: #fff; |
| 85 | - background: theme.$accent; | |
| 86 | - border-color: theme.$accent; | |
| 85 | + background: var(--cs-color-accent); | |
| 86 | + border-color: var(--cs-color-accent); | |
| 87 | 87 | } |
| 88 | 88 | } |
| 89 | 89 | |
| 90 | 90 | .snippet-form { |
| 91 | - margin-block-start: 10px; | |
| 92 | 91 | display: grid; |
| 93 | - gap: $sidebar-gap; | |
| 94 | - grid-template-columns: 1fr $sidebar-width; | |
| 92 | + gap: var(--cs-sidebar-gap); | |
| 93 | + grid-template-columns: 1fr var(--cs-sidebar-width); | |
| 95 | 94 | grid-template-areas: 'upper sidebar' 'lower sidebar'; |
| 96 | 95 | transition: all 700ms; |
| 97 | 96 | |
| 98 | 97 | @media (prefers-reduced-motion: reduce) { |
| @@ -119,9 +118,9 @@ | ||
| 119 | 118 | } |
| 120 | 119 | |
| 121 | 120 | .snippet-editor-sidebar { |
| 122 | 121 | grid-area: span 3 / sidebar; |
| 123 | - max-inline-size: $sidebar-width; | |
| 122 | + max-inline-size: var(--cs-sidebar-width); | |
| 124 | 123 | position: sticky; |
| 125 | 124 | overflow: clip; |
| 126 | 125 | |
| 127 | 126 | // Keep the sidebar clear of the fixed WordPress admin bar and leave a |
