diff --git a/demo/stories/css-variables/CSSVariables.stories.tsx b/demo/stories/css-variables/CSSVariables.stories.tsx index 68aec416..89a7faf1 100644 --- a/demo/stories/css-variables/CSSVariables.stories.tsx +++ b/demo/stories/css-variables/CSSVariables.stories.tsx @@ -20,6 +20,10 @@ export const Story: StoryObj = { control: {type: 'text'}, description: 'Toolbar padding in sticky mode', }, + '--g-md-toolbar-sticky-border': { + control: {type: 'text'}, + description: 'Toolbar border in sticky mode', + }, '--g-md-editor-padding': { control: {type: 'text'}, description: 'Editor contents padding', diff --git a/docs/how-to-customize-the-editor.md b/docs/how-to-customize-the-editor.md index ce8dbc40..3ae64cc7 100644 --- a/docs/how-to-customize-the-editor.md +++ b/docs/how-to-customize-the-editor.md @@ -9,4 +9,5 @@ You can use CSS variables to make editor contents fit your own needs | `--g-md-toolbar-sticky-padding` | Toolbar padding in sticky mode | padding | -4px | | `--g-md-toolbar-sticky-inset` | Toolbar inset in sticky mode | inset | -4px | | `--g-md-toolbar-sticky-offset` | Toolbar offset in sticky mode | top | 0px | +| `--g-md-toolbar-sticky-border` | Toolbar border in sticky mode | border | 1px solid var(--g-color-line-generic-solid) | | `--g-md-editor-padding` | Editor contents padding | padding | 0px | diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss index b58d6841..7b3ccd35 100644 --- a/src/bundle/sticky/sticky.scss +++ b/src/bundle/sticky/sticky.scss @@ -23,7 +23,7 @@ $block: 'g-md-editor-sticky'; content: ''; - border: 1px solid var(--g-color-line-generic-solid); + border: var(--g-md-toolbar-sticky-border, 1px solid var(--g-color-line-generic-solid)); border-radius: 4px; background-color: var(--g-color-base-background); }