Foundation-Media SASSリファレンス

説明

SASSリファレンスを使用して、コンポーネントのスタイルを変更できます。

次の表に、このコンポーネントのデフォルトスタイルをカスタマイズできるようにするプロジェクトの設定ファイル内のSASS変数を示します。

Sr.No.	Name & Description	Type	Default Value
1	$orbit-bullet-background 軌道の弾丸のデフォルトの色を表します。	Color	$medium-gray
2	$orbit-bullet-background-active 軌道の弾丸のデフォルトのアクティブな色を表します。	Color	$dark-gray
3	$orbit-bullet-diameter これは、軌道の弾丸のデフォルトの直径を表します。	Number	1.2rem
4	$orbit-bullet-margin これは、軌道の弾丸間のデフォルトのマージンを表します。	Number	0.1rem
5	$orbit-bullet-margin-top 軌道の弾丸のスライド領域からのデフォルト距離を表します。	Number	0.8rem
6	$orbit-bullet-margin-bottom これは、箇条書きからその下のコンテンツまでのデフォルトの下マージンを表します。	Number	0.8rem
7	$orbit-caption-background 軌道のキャプションのデフォルトの背景色を表します。	Color	rgba($black, 0.5)
8	$orbit-caption-padding 軌道のキャプションのデフォルトのパディングを表します。	Number	1rem
9	$orbit-control-background-hover ホバーしたときのコントロールのデフォルトの背景色を表します。	Color	rgba($black, 0.5)
10	$orbit-control-padding 軌道制御用のデフォルトのパディングを表します。	Number	1rem
11	$orbit-control-zindex 軌道制御用のデフォルトのZインデックスを表します。	Number	10

このコンポーネントの最終的なCSS出力を構築するには、次のミックスインを使用できます。 Foundationコンポーネントを使用して独自のクラス構造を構築するには、mixinを自分で使用できます。

@include orbit-wrapper;

軌道のラッパーにスタイルを追加します。

@include orbit-container;

内部オービットスライドコンテナにスタイルを追加します。クラス_.orbit-container_で使用されます。

@include orbit-slide;

スライダーの個別のスライドにスタイルを追加します。クラス_.orbit-slide_で使用されます。

@include orbit-caption;

スライドキャプションにスタイルを追加します。

@include orbit-control;

次のボタンと前のボタンに基本スタイルを追加します。スタイルは、デフォルトCSSの_.orbit-next_クラスと_.orbit-previous_クラスに分けられます。

@include orbit-previous;

前のボタンにスタイルを追加します。これらはクラス_.orbit-previous_で使用されます。

@include orbit-next;

次のボタンにスタイルを追加します。これらはクラス_.orbit-next_で使用されます。

@include orbit-bullets;

軌道の弾丸のコンテナにスタイルを追加し、前のボタンにスタイルを追加し、_。orbit-bullets_クラスで使用されます。