Foundation-reveal-sass-reference

財団-Sass参照の公開

変数

以下の表にリストされているSASS変数を使用して、コンポーネントのスタイルを変更できます。

Sr.No.	Name & Description	Type	Default Value
1	$reveal-background モーダルの背景色を表示します。	Color	$white
2	$reveal-width モーダルの幅を定義します。	Number	600px
3	$reveal-max-width モーダルの最大幅を指定します。	Number	$global-width
4	$reveal-offset モーダルを追加すると、ウィンドウの上部からオフセットされます。	Number	rem-calc(100)
5	$reveal-padding モーダル内のパディングを定義します。	Number	$global-padding
6	$reveal-border モーダルの境界線を設定します。	Number	1px solid $medium-gray
7	$reveal-radius モーダルの半径を指定します。	Number	$global-radius
8	$reveal-zindex オーバーレイは、モーダルにz-index値を使用します。	Number	1005
9	$reveal-overlay-background モーダルオーバーレイの背景色を表示します。	Color	rgba($black, 0.45)

ミックスイン

ミックスインを使用して、リモーダルモーダルコンポーネントのCSSクラス構造を構築できます。

オーバーレイ表示

次のミックスインを使用して、モーダルオーバーレイのスタイルを含めることができます-

@include reveal-overlay($background);

以下の表に指定されているパラメータが1つ含まれています-

Sr.No.	Parameter & Description	Type	Default Value
1	$background オーバーレイの背景色を表示します。	Color	$reveal-overlay-background

モーダルベースを明らかにする

以下のミックスインを使用して、モーダルの基本スタイルを追加できます-

@include reveal-modal-base;

モーダル幅を明らかにする

以下のミックスインを使用してモーダルの幅を作成するために使用されます-

@include reveal-modal-width($width, $max-width);

表に指定されている次のパラメータが含まれています-

Sr.No.	Parameter & Description	Type	Default Value
1	$width モーダルの幅を指定します。	Number	None
2	$max-width モーダルの最大幅を指定します。	Number	$reveal-max-width

モーダル全画面表示

あなたは、次のミックスインを使用して、ウィンドウの幅と高さに応じてフルスクリーンモーダルを作成することができます-

@include reveal-modal-fullscreen;