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

列印頁面