form-nav-theme
@include form-nav-theme(
$btnTheme,
$background,
$full,
$gutter,
$outline
);
Description
Control the buttons colors and layout of the form navigation. This can be scoped with a specific class (e.g. .donation-form
), or set globally to apply to all forms.
Parameters
$btnTheme
(button theme | style map | color)
The theme to be used for the buttons.
Default: primary*
$background
(shades)
The background color of form.
Default: white
$full
(boolean)
Whether the navigation should sit flush against the side of the form.
Default: true
$gutter
(unit)
If $full: false
, this is the spacing to be left underneath the navigation.
Default: 25px
$outline
(boolean | force)
Determines whether the buttons should be outlined.
Default: null
Return
(CSS) Styles to apply header theme to form/s.
Examples
Use the secondary button styles for forms, instead of the default primary
@include form-nav-theme(secondary);
Use a custom color to theme the form navigation buttons and ensure they are outlined
@include form-nav-theme(
$btnTheme: ,
$outline: true
);
Ensure that the sign up form navigation buttons sit flush to the edge of the form
.signup-form {
&__body {
padding: 1.5rem; /* Adjust gutter around fields */
}
@include form-nav-theme(
$full: true,
$gutter: 1.5rem /* Pass down adjusted gutter */
);
}
Updated almost 4 years ago