Foundation - Media SASS 參考

描述

您可以使用 SASS 參考更改元件的樣式。

下表列出了專案設定檔案中的 SASS 變數，這些變數使該元件的預設樣式得到自定義。

序號	名稱及描述	型別	預設值
1	$orbit-bullet-background 它表示軌道子彈的預設顏色。	顏色	$medium-gray
2	$orbit-bullet-background-active 它表示軌道子彈的預設啟用顏色。	顏色	$dark-gray
3	$orbit-bullet-diameter 它表示軌道子彈的預設直徑。	數值	1.2rem
4	$orbit-bullet-margin 它表示軌道子彈之間的預設邊距。	數值	0.1rem
5	$orbit-bullet-margin-top 它表示軌道子彈距幻燈片區域的預設距離。	數值	0.8rem
6	$orbit-bullet-margin-bottom 它表示子彈到其下方內容的預設底部邊距。	數值	0.8rem
7	$orbit-caption-background 它表示軌道標題的預設背景顏色。	顏色	rgba($black, 0.5)
8	$orbit-caption-padding 它表示軌道標題的預設填充。	數值	1rem
9	$orbit-control-background-hover 它表示控制元件懸停時的預設背景顏色。	顏色	rgba($black, 0.5)
10	$orbit-control-padding 它表示軌道控制元件的預設填充。	數值	1rem
11	$orbit-control-zindex 它表示軌道控制元件的預設 z-index。	數值	10

要構建此元件的最終 CSS 輸出，可以使用以下混合宏。要使用 Foundation 元件構建您自己的類結構，您可以自己使用這些混合宏。

@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 類。

foundation_media.htm

列印頁面