- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
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;