Form Sass API

Variables

form-disable-everything

$form-disable-everything: false !default;

form-disable-filled-theme

$form-disable-filled-theme: $form-disable-everything !default;

Used By

• @mixin autocomplete-styles
• @mixin form-message-styles
• @mixin select-native-select-styles
• @mixin select-select-styles
• @mixin text-area-textarea-container-styles
• @mixin text-field-use-light-theme
• @mixin text-field-use-dark-theme
• @mixin text-field-variables
• @mixin text-field-container-styles
• @mixin text-field-addon-styles

form-disable-outlined-theme

$form-disable-outlined-theme: $form-disable-everything !default;

Used By

• @mixin autocomplete-styles
• @mixin form-message-styles
• @mixin select-select-styles
• @mixin text-field-variables
• @mixin text-field-container-styles

form-disable-underlined-theme

$form-disable-underlined-theme: $form-disable-everything !default;

Used By

• @mixin autocomplete-styles
• @mixin form-message-styles
• @mixin select-native-select-styles
• @mixin select-select-styles
• @mixin text-area-textarea-container-styles
• @mixin text-field-variables
• @mixin text-field-container-styles
• @mixin text-field-addon-styles

form-focus-color

$form-focus-color: interaction.$focus-color !default;

form-active-color

$form-active-color: theme.theme-get-var(primary-color) !default;

Used By

• @mixin input-toggle-styles
• @mixin switch-styles

form-variables

$form-variables: (active-color, focus-color);

Used By

• @function form-get-var
• @mixin form-set-var

Mixins

form-set-var

@mixin form-set-var($name, $value) { … }

Requires

• @function get-var-name
• $form-variables

form-use-var

@mixin form-use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function form-get-var

Functions

form-get-var

@function form-get-var($name, $fallback: null) { … }

Returns — String

Used By

• @mixin form-use-var
• @mixin switch-styles

Requires

• @function get-var-name
• $form-variables

Set to true to disable all form styles.

Set to true if the theme="filled" will not be used in the app.

Set to true if the theme="outline" will not be used in the app.

NOTE: This would require updating the FORM_CONFIG.theme value since this is the default theme.

Set to true if the theme="underline" will not be used in the app.

NOTE: If the $form-theme is set to filled, this will always be true since it they depend on the same styles.

The color to use while the form elements are focused. This would apply to things like the border-color/box-shadow and text color.

The color to apply to form elements while they are active/checked.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

a var() statement

The supported variable name

An optional fallback value