form-header-theme

@include form-header-theme(
  $theme,
  $layout,
  $background,
  $active
);

Description

Control the colors and layout used in a form header. This can be scoped with a specific class (e.g. .donation-form), or set globally to apply to all forms.

Parameters

$theme (shades)
Base colour to be used as theme.
Default: primary

$layout (circular | tabbed)
Layout to be used when styling the form stages.
Default: circular

$background (shades | color)
Background colour of form header.
Default: $layout === 'circular' ? 'white' : $theme

Return

(CSS) Styles to apply header theme to form/s.

Examples

Use the secondary shade to theme all form headers

@include form-header-theme(secondary);

Use a custom color to theme the donation form header and change the layout to be tabbed

.donation-form {
  @include form-header-theme(
    $theme: #a0059d,
    $layout: 'tabbed'
  );
}

Interactive example