- 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
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Foundation - Form SASS Reference
Description
You can change the styles of the components by using SASS Reference.
Variables
The following table lists the SASS variables in a project's settings file that make this component's default styles to get customized.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$fieldset-border Custom fieldset's default border. |
Border | 1px solid $medium-gray |
| 2 |
$fieldset-padding Custom fieldset's default internal padding. |
Number | rem-calc(20) |
| 3 |
$fieldset-margin Custom fieldset's default margin around. |
Number | rem-calc(18 0) |
| 4 |
$legend-padding Padding between legend text and fieldset border by default. |
Number | rem-calc(0 3) |
| 5 |
$form-spacing Form element's global spacing. |
Number | rem-calc(16) |
| 6 |
$helptext-color Default color of help text. |
Color | #333 |
| 7 |
$helptext-font-size Font size of the help text by default. |
Number | rem-calc(13) |
| 8 |
$helptext-font-style Font style of the help text by default. |
Keyword | italic |
| 9 |
$input-prefix-color Represents the color of labels prefixed to an input. |
Color | $black |
| 10 |
$input-prefix-background Label's background color prefixed to an input. |
Color | $light-gray |
| 11 |
$input-prefix-border Border around labels which will be prefixed to an input. |
Border | 1px solid $medium-gray |
| 12 |
$input-prefix-padding Pre/postfixed input label's left/right padding. |
1rem | |
| 13 |
$form-label-color Represents color for form labels. |
Color | $black |
| 14 |
$form-label-font-size Represents font size for form labels. |
Number | rem-calc(14) |
| 15 |
$form-label-font-weight Represents font weight for form labels. |
Keyword | $global-weight-normal |
| 16 |
$form-label-line-height Line height for labels of the form. Higher number represents more space between label and input field. |
Number | 1.8 |
| 17 |
$select-background Represents background color for select menus. |
Color | #fafafa |
| 18 |
$select-triangle-color Dropdown triangle's color. Set transparent to remove it entirely. |
Color | #333 |
| 19 |
$select-radius Represents the default radius for select menus. |
Color | $global-radius |
| 20 |
$input-color Represents font color of text inputs. |
Color | $black |
| 21 |
$input-font-family Represents font family of text inputs. |
Font | inherit |
| 22 |
$input-font-size Represents font size of text inputs. |
Number | rem-calc(16) |
| 23 |
$input-background Represents background color of text inputs. |
Color | $white |
| 24 |
$input-background-focus Represents background color of focused text inputs. |
Color | $white |
| 25 |
$input-background-disabled Background color of text inputs which are disabled. |
Color | $light-gray |
| 26 |
$input-border Represents border around text inputs. |
Border | 1px solid $medium-gray |
| 27 |
$input-border-focus Represents border around focused text inputs. |
Color | 1px solid $dark-gray |
| 28 |
$input-shadow Represents box shadow within text inputs when not focused. |
Shadow | inset 0 1px 2px rgba($black, 0.1) |
| 29 |
$input-shadow-focus Represents box shadow outside text inputs when focused. |
Shadow | 0 0 5px $medium-gray |
| 30 |
$input-cursor-disabled Represents the cursor to use when hovered over text input which is disabled. |
Cursor | default |
| 31 |
$input-transition Represents properties to transition on text inputs. |
Transition | box-shadow 0.5s, border-color 0.25s ease-in-out |
| 32 |
$input-number-spinners Enables the up/down buttons that is added to <input type='number'> elements by Chrome and Firefox. |
Boolean | true |
| 33 |
$input-radius Represents radius for text inputs. |
Border | $global-radius |