diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss index 1aa5564205..fff4d8a77f 100644 --- a/packages/theme/styles/editors.scss +++ b/packages/theme/styles/editors.scss @@ -27,14 +27,20 @@ &:focus { box-shadow: 0 0 0 1px var(--theme-editbox-focus-border); } } } - .focusable:not(.default, .default-large, .ghost, .ghost-large, .modern-ghost-large) { - margin: 0 -0.75rem; - padding: 0.625rem 0.75rem; - width: calc(100% + 1.5rem); - border-radius: 0.25rem; - transition: border-color 0.15s ease-in-out; + .focusable:not(.underline, .default, .default-large, .ghost, .ghost-large, .modern-ghost-large) { + position: relative; + padding: 0.625rem 0; - &:focus-within { box-shadow: 0 0 0 1px var(--theme-editbox-focus-border); } + &::after { + position: absolute; + top: 0; + left: -0.75rem; + width: calc(100% + 1.5rem); + height: 100%; + border: 1px solid var(--theme-editbox-focus-border); + border-radius: 0.25rem; + } + &:focus-within::after { content: ''; } } input { @@ -128,4 +134,9 @@ } } } + + .required::after { + content: ' *'; + color: var(--theme-error-color); + } } diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte index 7e1bc35b2d..17f5c2189c 100644 --- a/packages/ui/src/components/EditBox.svelte +++ b/packages/ui/src/components/EditBox.svelte @@ -13,21 +13,18 @@ // limitations under the License. -->