# profile-builder/4.0.1/form-builder/blocks/src/style/_top-bar.scss

User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor, version 4.0.1. 29 lines.

- Page: https://pluginprobe.com/plugins/profile-builder/4.0.1/code/form-builder/blocks/src/style/_top-bar.scss
- Raw: https://pluginprobe.com/plugins/profile-builder/4.0.1/raw/form-builder/blocks/src/style/_top-bar.scss
- Modified: 2026-08-17T08:51:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/profile-builder/4.0.1/code/form-builder/blocks/src/style/_top-bar.scss#L10-L20`.

```scss
// Top bar — the editor header bits that survive the chrome-stripping (the
// inserter toggle, undo/redo/list-view, View/Options, and command palette are
// all removed in _editor-chrome.scss + the disable-* plugins). What's left on
// the right is our Preview button and the native Save button.
//
// Preview button → the mockup's "secondary / link" button: white surface, a
// strong-border outline, primary text, trailing ↗ glyph, hover to accent. It's
// a `<Button variant="secondary">` (FormPreviewButton.js) so it already has the
// border/white base; this aligns its colors/radius to the tokens. Save stays
// the native accent publish button (already correct). Tokens: _tokens.scss.
.wppb-fb-preview-button.components-button {
    border-radius: var(--wppb-fb-radius-sm);
    color: var(--wppb-fb-text-primary);

    // The `variant="secondary"` outline uses the admin theme color by default;
    // pin it to the neutral strong border like the mockup's secondary button.
    box-shadow: inset 0 0 0 1px var(--wppb-fb-border-strong);

    &:hover,
    &:focus {
        color: var(--wppb-fb-accent);
        box-shadow: inset 0 0 0 1px var(--wppb-fb-accent);
    }

    svg {
        fill: currentColor;
    }
}

```