Foundation-off-canvas-sass-reference

財団-オフキャンバスSassリファレンス

変数

あなたは、表に記載されている次のSASS変数を使用して、コンポーネントのスタイルを変更することができます-

Sr.No.	Name & Description	Type	Default Value
1	$offcanvas-size キャンバス外のメニューの幅を指定します。	Number	250px
2	$offcanvas-background キャンバス外メニューの背景色を表示します。	Color	$light-gray
3	$offcanvas-zindex キャンバス外メニューのZ-indexを指定します。	Number	-1
4	$offcanvas-transition-length キャンバス外のメニューにアニメーションの長さが表示されます。	Number	0.5s
5	$offcanvas-transition-timing アニメーションのキャンバス外メニューのタイミング機能を指定します。	Keyword	ease
6	$offcanvas-fixed-reveal trueの場合、公開されたオフキャンバスはtrueに設定することで公開されたキャンバスの位置を修正できます。	true
7	$offcanvas-exit-background キャンバス外メニューのオーバーレイの背景色を表示します。	Color	rgba($white, 0.25)
8	$maincontent-class メインコンテンツ領域にCSSクラスを使用します。	'off-canvas-content'
9	$maincontent-shadow メインコンテンツ領域のボックスシャドウを表示します。	Shadow	0 0 10px rgba($black, 0.5)
10	$titlebar-background タイトルバーの背景色を表示します。	Color	$black
11	$titlebar-color タイトルバー内のテキストのテキスト色を定義します。	Color	$white
12	$titlebar-padding タイトルバー内のパディングを定義します。	Length	0.5rem
13	$titlebar-text-font-weight テキストのフォントの太さを指定します。	Weight	bold
14	$titlebar-icon-color メニューのタイトルバーアイコンの色を定義します。	Color	$white
15	$titlebar-icon-color-hover ホバー時のメニューのタイトルバーアイコンの色を定義します。	Color	$medium-gray
16	$titlebar-icon-spacing メニューアイコンとタイトルバー内のテキストの間隔を指定します。	Length	0.25rem

ミックスイン

ミックスインを使用して、以下で説明するようにコンポーネントのCSSクラス構造を構築できます。

オフキャンバスの基本

キャンバス外のスタイルを追加し、次のミックスインを使用してスタイルを含めることができます-

@include off-canvas-basics;

オフキャンバスベース

キャンバス外メニューの基本スタイルを指定し、次のミックスインを使用してスタイルを含めることができます-

@include off-canvas-base;

キャンバス外表示

キャンバス外メニューを表示するスタイルを指定します。

@include off-canvas-reveal($position);

次の表で定義されているように指定することができます-

Sr.No.	Parameter & Description	Type	Default Value
1	$position キャンバス外メニューの位置を設定します。	Keyword	left