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 |