| @@ -67,14 +67,8 @@ | ||
| 67 | 67 | /** |
| 68 | 68 | * Focus styles. |
| 69 | 69 | */ |
| 70 | 70 | /** |
| 71 | - * Standard focus rings for the WordPress Design System. | |
| 72 | - * | |
| 73 | - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| 74 | - * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| 75 | - */ | |
| 76 | -/** | |
| 77 | 71 | * Applies editor left position to the selector passed as argument |
| 78 | 72 | */ |
| 79 | 73 | /** |
| 80 | 74 | * Styles that are reused verbatim in a few places |
| @@ -112,9 +106,12 @@ | ||
| 112 | 106 | } |
| 113 | 107 | } |
| 114 | 108 | |
| 115 | 109 | .commands-command-menu { |
| 110 | + border-radius: 4px; | |
| 111 | + width: calc(100% - 32px); | |
| 116 | 112 | margin: auto; |
| 113 | + max-width: 400px; | |
| 117 | 114 | position: relative; |
| 118 | 115 | top: calc(5% + 64px); |
| 119 | 116 | } |
| 120 | 117 | @media (min-width: 600px) { |
| @@ -161,9 +158,9 @@ | ||
| 161 | 158 | } |
| 162 | 159 | .commands-command-menu__container [cmdk-input] { |
| 163 | 160 | border: none; |
| 164 | 161 | width: 100%; |
| 165 | - padding: 12px 4px; | |
| 162 | + padding: 16px 4px; | |
| 166 | 163 | outline: none; |
| 167 | 164 | color: #1e1e1e; |
| 168 | 165 | margin: 0; |
| 169 | 166 | font-size: 15px; |
| @@ -169,11 +166,8 @@ | ||
| 169 | 166 | font-size: 15px; |
| 170 | 167 | line-height: 24px; |
| 171 | 168 | border-radius: 0; |
| 172 | 169 | } |
| 173 | -.commands-command-menu__container [cmdk-input]::-moz-placeholder { | |
| 174 | - color: #757575; | |
| 175 | -} | |
| 176 | 170 | .commands-command-menu__container [cmdk-input]::placeholder { |
| 177 | 171 | color: #757575; |
| 178 | 172 | } |
| 179 | 173 | .commands-command-menu__container [cmdk-input]:focus { |
| @@ -180,15 +174,22 @@ | ||
| 180 | 174 | box-shadow: none; |
| 181 | 175 | outline: none; |
| 182 | 176 | } |
| 183 | 177 | .commands-command-menu__container [cmdk-item] { |
| 184 | - cursor: var(--wpds-cursor-control, pointer); | |
| 178 | + border-radius: 2px; | |
| 179 | + cursor: pointer; | |
| 185 | 180 | display: flex; |
| 186 | 181 | align-items: center; |
| 187 | - padding: 4px 0; | |
| 188 | 182 | color: #1e1e1e; |
| 189 | 183 | font-size: 13px; |
| 190 | 184 | } |
| 185 | +.commands-command-menu__container [cmdk-item][aria-selected=true], .commands-command-menu__container [cmdk-item]:active { | |
| 186 | + background: var(--wp-admin-theme-color); | |
| 187 | + color: #fff; | |
| 188 | +} | |
| 189 | +.commands-command-menu__container [cmdk-item][aria-selected=true] svg, .commands-command-menu__container [cmdk-item]:active svg { | |
| 190 | + fill: #fff; | |
| 191 | +} | |
| 191 | 192 | .commands-command-menu__container [cmdk-item][aria-disabled=true] { |
| 192 | 193 | color: #949494; |
| 193 | 194 | cursor: not-allowed; |
| 194 | 195 | } |
| @@ -195,29 +196,18 @@ | ||
| 195 | 196 | .commands-command-menu__container [cmdk-item] svg { |
| 196 | 197 | fill: #1e1e1e; |
| 197 | 198 | } |
| 198 | 199 | .commands-command-menu__container [cmdk-item] > div { |
| 199 | - border-radius: 2px; | |
| 200 | - min-height: 32px; | |
| 200 | + min-height: 40px; | |
| 201 | 201 | padding: 4px; |
| 202 | 202 | padding-left: 40px; |
| 203 | 203 | padding-right: 16px; |
| 204 | 204 | } |
| 205 | -.commands-command-menu__container [cmdk-item][aria-selected=true] > div, .commands-command-menu__container [cmdk-item]:active > div { | |
| 206 | - background: var(--wp-admin-theme-color); | |
| 207 | - color: #fff; | |
| 208 | -} | |
| 209 | -.commands-command-menu__container [cmdk-item][aria-selected=true] > div svg, .commands-command-menu__container [cmdk-item]:active > div svg { | |
| 210 | - fill: #fff; | |
| 211 | -} | |
| 212 | 205 | .commands-command-menu__container [cmdk-item] > .has-icon { |
| 213 | 206 | padding-left: 8px; |
| 214 | 207 | } |
| 215 | -.commands-command-menu__container [cmdk-group]:has([cmdk-group-items]:empty) { | |
| 216 | - display: none; | |
| 217 | -} | |
| 218 | 208 | .commands-command-menu__container [cmdk-root] > [cmdk-list] { |
| 219 | - max-height: min(328px, 70vh - 48px); | |
| 209 | + max-height: 368px; | |
| 220 | 210 | overflow: auto; |
| 221 | 211 | scroll-padding-top: 8px; |
| 222 | 212 | scroll-padding-bottom: 8px; |
| 223 | 213 | } |
| @@ -223,20 +213,17 @@ | ||
| 223 | 213 | } |
| 224 | 214 | .commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-group-items]:not(:empty)), .commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-empty]) { |
| 225 | 215 | border-top: 1px solid #ddd; |
| 226 | 216 | } |
| 217 | +.commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-group-items]:not(:empty)) { | |
| 218 | + padding-top: 8px; | |
| 219 | +} | |
| 220 | +.commands-command-menu__container [cmdk-root] > [cmdk-list] [cmdk-list-sizer] > [cmdk-group]:last-child [cmdk-group-items]:not(:empty) { | |
| 221 | + padding-bottom: 8px; | |
| 222 | +} | |
| 227 | 223 | .commands-command-menu__container [cmdk-root] > [cmdk-list] [cmdk-list-sizer] > [cmdk-group] > [cmdk-group-items]:not(:empty) { |
| 228 | - padding: 0 8px 4px; | |
| 224 | + padding: 0 8px; | |
| 229 | 225 | } |
| 230 | -.commands-command-menu__container [cmdk-root] > [cmdk-list] [cmdk-group-heading] { | |
| 231 | - margin-top: 8px; | |
| 232 | - padding: 8px 16px; | |
| 233 | - line-height: 16px; | |
| 234 | - font-size: 11px; | |
| 235 | - font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 236 | - text-transform: uppercase; | |
| 237 | - color: #1e1e1e; | |
| 238 | -} | |
| 239 | 226 | .commands-command-menu__container [cmdk-empty] { |
| 240 | 227 | display: flex; |
| 241 | 228 | align-items: center; |
| 242 | 229 | justify-content: center; |
| @@ -275,6 +262,6 @@ | ||
| 275 | 262 | |
| 276 | 263 | .commands-command-menu__item mark { |
| 277 | 264 | color: inherit; |
| 278 | 265 | background: unset; |
| 279 | - font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 266 | + font-weight: 600; | |
| 280 | 267 | } |
