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

foundation_forms.htm