Foundation - Plugins Abide SASS Reference

Variables

You can change the styles of the components by using the following SASS variables as listed in the table.

Sr.No. Name & Description Type Default Value
1

$abide-inputs

Error styles included in the inputs.

 Boolean true
2

$abide-labels

Error styles included in the labels.

 Boolean true
3

$input-background-invalid

Sets background color of the invalid text inputs.

 Color $alert-color
4

$form-label-color-invalid

Set colors of the labels of invalid input.

 Color $alert-color
5

$input-error-color

Sets the default font color of the error text in the form.

 Color $alert-color
6

$input-error-font-size

Sets the default font size of the error text in the form.

 Number rem-calc(12)
7

$input-error-font-weight

Sets the default font weight of the error text in the form.

 Keyword $global-weight-bold

Mixin

You can use the mixins to build the CSS class structure of the your components as listed in the table.

form-input-error

For error state, the styles are included for the background and border of an input field.

@include form-input-error($background);

Sr.No. Parameter & Description Type Default Value
1

$background

Color set of the border and background.

 Color $alert-color

form-error

Using values in the setting file, error styles are included to a form element.

@include form-error;
foundation_plugins.htm
Advertisements