Dark window
Landing pages and dark docs: the snippet reads as an editor you can comment in.
Get Pro to installPro4 blocksReact, Vue and Figma
save-bar.csscss
@import '@orvain/tokens/css';
/* Save bar: sits under a form and sticks to the bottom on scroll */
.saveBar {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: var(--orvain-color-surface-default);
border-top: 1px solid var(--orvain-color-border-subtle);
}
.saveBar[data-dirty='true'] {
background: var(--orvain-color-brand-surface-subtle);
}
.hint {
color: var(--orvain-color-content-muted);
}
.saveBar :focus-visible {
outline: 2px solid var(--orvain-color-brand-border-focused);
outline-offset: 2px;
}
Reply
Resolve
More actions
Sticky needs a solid surface underneath, or the form shows through on scroll. @Mia is surface-default right?
More in Snippet code#
When to use#
- Documentation whose next step is the reader pasting the code into their own file.
- A changelog showing exactly what a migration changes.
- An install command on a landing page, where the command is the proof.
- Support answers that hand over a config file the reader has to keep intact.
The whole set, with its codePro
Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.