Foundation - Form SASS 参考

描述

您可以使用 SASS 参考更改组件的样式。

变量

下表列出了项目设置文件中的 SASS 变量,这些变量可自定义此组件的默认样式。

Sr.No. 名称 &描述 类型 默认值
1

$fieldset-border

自定义字段集的默认边框。

边框 1px solid $medium-gray
2

$fieldset-padding

自定义字段集的默认内部填充。

数字 rem-calc(20)
3

$fieldset-margin

自定义字段集的默认边距。

Number rem-calc(18 0)
4

$legend-padding

默认情况下,图例文本和字段集边框之间的填充。

Number rem-calc(0 3)
5

$form-spacing

表单元素的全局间距。

数字 rem-calc(16)
6

$helptext-color

帮助文本的默认颜色。

颜色 #333
7

$helptext-font-size

帮助文本的默认字体大小。

数字 rem-calc(13)
8

$helptext-font-style

默认帮助文本的字体样式。

关键字 italic
9

$input-prefix-color

表示输入前缀标签的颜色。

颜色 $black
10

$input-prefix-background

标签的背景颜色作为输入的前缀。

颜色 $light-gray
11

$input-prefix-border

标签周围的边框,将作为输入的前缀。

边框 1px solid $medium-gray
12

$input-prefix-padding

前置/后置输入标签的左/右填充。

1rem
13

$form-label-color

表示表单标签的颜色。

Color $black
14

$form-label-font-size

表示表单标签的字体大小。

数字 rem-calc(14)
15

$form-label-font-weight

表示表单标签的字体粗细。

关键字 $global-weight-normal
16

$form-label-line-height

表单标签的行高。数字越大,表示标签和输入字段之间的空间越大。

数字 1.8
17

$select-background

表示选择菜单的背景颜色。

颜色 #fafafa
18

$select-triangle-color

下拉三角形的颜色。设置 transparent 以将其完全删除。

颜色 #333
19

$select-radius

表示选择菜单的默认半径。

颜色 $global-radius
20

$input-color

表示文本输入的字体颜色。

颜色 $black
21

$input-font-family

表示文本输入的字体系列。

Font inherit
22

$input-font-size

表示文本输入的字体大小。

Number rem-calc(16)
23

$input-background

表示文本输入的背景颜色。

颜色 $white
24

$input-background-focus

表示聚焦文本输入的背景颜色。

颜色 $white
25

$input-background-disabled

已禁用的文本输入的背景颜色。

颜色 $light-gray
26

$input-border

表示文本输入周围的边框。

边框 1px solid $medium-gray
27

$input-border-focus

表示聚焦文本输入周围的边框。

颜色 1px solid $dark-gray
28

$input-shadow

表示未聚焦时文本输入内的框阴影。

阴影 inset 0 1px 2px rgba($black, 0.1)
29

$input-shadow-focus

表示聚焦时文本输入外的框阴影。

阴影 0 0 5px $medium-gray
30

$input-cursor-disabled

表示将鼠标悬停在已禁用的文本输入上时使用的光标。

Cursor default
31

$input-transition

表示文本输入上的转换属性。

Transition box-shadow 0.5s, border-color 0.25s ease-in-out
32

$input-number-spinners

启用 Chrome 和 Firefox 添加到 <input type='number'> 元素的向上/向下按钮。

boolean true
33

$input-radius

表示文本输入的半径。

Border $global-radius

foundation_forms.html