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 */
  );
}