Foundation - Sass 樣式參考

變數

您可以使用下表中列出的 Sass 變數來更改元件的樣式。

序號	名稱和描述	型別	預設值
1	$tab-margin 設定選項卡欄的邊距。	數值	0
2	$tab-background 顯示選項卡欄的背景顏色。	顏色	$white
3	$tab-background-active 顯示選項卡欄的活動背景顏色。	顏色	$light-gray
4	$tab-border 指定選項卡的邊框顏色。	顏色	$light-gray
5	$tab-item-color 顯示選單項的文字顏色。	顏色	foreground($tab-background, $primary-color)
6	$tab-item-background-hover 顯示滑鼠懸停時專案的背景顏色。		$white
7	$tab-item-padding 定義選項卡項的內邊距。	數值	1.25rem 1.5rem
8	$tab-expand-max 包含CSS中expand-n類的最大數量。	數值	6
9	$tab-content-background 顯示選項卡內容的背景顏色。	顏色	$white
10	$tab-content-border 顯示選項卡內容的邊框顏色。	顏色	$light-gray
11	$tab-content-color 提供選項卡內容的文字顏色。	顏色	foreground($tab-background, $primary-color)
12	$tab-content-padding 定義選項卡內容的內邊距。	數值或列表	1rem

您可以使用混合宏來構建 reveal 模態元件的 CSS 類結構。

您可以使用以下混合宏包含選項卡容器的樣式：

@include tabs-container;

使用以下混合宏以垂直方式顯示選項卡：

@include tabs-container-vertical;

使用以下混合宏應用選項卡連結的樣式：

@include tabs-title;

使用以下混合宏應用選項卡內容窗格的樣式：

@include tabs-content;

使用以下混合宏指定選項卡和內容必須以垂直方式顯示：

@include tabs-content-vertical;

您可以使用以下混合宏包含選項卡內容面板的樣式：

@include tabs-panel;

foundation_containers.htm

列印頁面