Foundation - Form SASS Reference


Advertisements

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
Advertisements