Foundation-form-sass-reference
Foundation-フォームSASSリファレンス
説明
SASSリファレンスを使用して、コンポーネントのスタイルを変更できます。
変数
次の表に、このコンポーネントのデフォルトのスタイルをカスタマイズできるようにするプロジェクトの設定ファイル内のSASS変数を示します。
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$fieldset-border カスタムフィールドセットのデフォルトの境界線。 |
Border | 1px solid $medium-gray |
| 2 |
$fieldset-padding カスタムフィールドセットのデフォルトの内部パディング。 |
Number | rem-calc(20) |
| 3 |
$fieldset-margin カスタムフィールドセットのデフォルトのマージン。 |
Number | rem-calc(18 0) |
| 4 |
$legend-padding デフォルトでは、凡例テキストとフィールドセットの境界線の間のパディング。 |
Number | rem-calc(0 3) |
| 5 |
$form-spacing フォーム要素のグローバル間隔。 |
Number | rem-calc(16) |
| 6 |
$helptext-color ヘルプテキストのデフォルトの色。 |
Color | #333 |
| 7 |
$helptext-font-size デフォルトでヘルプテキストのフォントサイズ。 |
Number | rem-calc(13) |
| 8 |
$helptext-font-style デフォルトのヘルプテキストのフォントスタイル。 |
Keyword | italic |
| 9 |
$input-prefix-color 入力の前に付くラベルの色を表します。 |
Color | $black |
| 10 |
$input-prefix-background 入力の前に付くラベルの背景色。 |
Color | $light-gray |
| 11 |
$input-prefix-border 入力の前に付けられるラベルの周囲の境界線。 |
Border | 1px solid $medium-gray |
| 12 |
$input-prefix-padding 前/後置入力ラベルの左/右のパディング。 |
1rem | |
| 13 |
$form-label-color フォームラベルの色を表します。 |
Color | $black |
| 14 |
$form-label-font-size フォームラベルのフォントサイズを表します。 |
Number | rem-calc(14) |
| 15 |
$form-label-font-weight フォームラベルのフォントの太さを表します。 |
Keyword | $global-weight-normal |
| 16 |
$form-label-line-height フォームのラベルの行の高さ。 数値が大きいほど、ラベルと入力フィールドの間のスペースが広くなります。 |
Number | 1.8 |
| 17 |
$select-background 選択メニューの背景色を表します。 |
Color | #fafafa |
| 18 |
$select-triangle-color ドロップダウン三角形の色。 _transparent_を設定して完全に削除します。 |
Color | #333 |
| 19 |
$select-radius 選択メニューのデフォルトの半径を表します。 |
Color | $global-radius |
| 20 |
$input-color テキスト入力のフォントの色を表します。 |
Color | $black |
| 21 |
$input-font-family テキスト入力のフォントファミリを表します。 |
Font | inherit |
| 22 |
$input-font-size テキスト入力のフォントサイズを表します。 |
Number | rem-calc(16) |
| 23 |
$input-background テキスト入力の背景色を表します。 |
Color | $white |
| 24 |
$input-background-focus フォーカスされたテキスト入力の背景色を表します。 |
Color | $white |
| 25 |
$input-background-disabled 無効になっているテキスト入力の背景色。 |
Color | $light-gray |
| 26 |
$input-border テキスト入力の周囲の境界線を表します。 |
Border | 1px solid $medium-gray |
| 27 |
$input-border-focus フォーカスされたテキスト入力の周囲の境界線を表します。 |
Color | 1px solid $dark-gray |
| 28 |
$input-shadow フォーカスされていないときのテキスト入力内のボックスの影を表します。 |
Shadow | inset 0 1px 2px rgba($black, 0.1) |
| 29 |
$input-shadow-focus フォーカスされたときのテキスト入力の外側のボックスの影を表します。 |
Shadow | 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 |
