Foundation - Sass 样式参考

描述

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

变量

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

序号	名称及描述	类型	默认值
1	$fieldset-border 自定义字段集的默认边框。	边框	1px solid $medium-gray
2	$fieldset-padding 自定义字段集的默认内部填充。	数值	rem-calc(20)
3	$fieldset-margin 自定义字段集周围的默认边距。	数值	rem-calc(18 0)
4	$legend-padding 图例文本与字段集边框之间的默认填充。	数值	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 表示表单标签的颜色。	颜色	$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 表示文本输入的字体系列。	字体	inherit
22	$input-font-size 表示文本输入的字体大小。	数值	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 表示将鼠标悬停在被禁用的文本输入上时使用的光标。	光标	default
31	$input-transition 表示文本输入的过渡属性。	过渡	box-shadow 0.5s, border-color 0.25s ease-in-out
32	$input-number-spinners 启用Chrome和Firefox添加到<input type='number'>元素的向上/向下按钮。	布尔值	true
33	$input-radius 表示文本输入的圆角。	边框	$global-radius

foundation_forms.htm

打印页面