Foundation - Reveal Sass 參考



變數

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

序號 名稱及描述 型別 預設值
1

$reveal-background

它顯示模態的背景顏色。

顏色 $white
2

$reveal-width

它定義模態的寬度。

數字 600px
3

$reveal-max-width

它指定模態的最大寬度。

數字 $global-width
4

$reveal-offset

新增模態時,它將從視窗頂部偏移。

數字 rem-calc(100)
5

$reveal-padding

它定義模態內部的填充。

數字 $global-padding
6

$reveal-border

它設定模態的邊框。

數字 1px solid $medium-gray
7

$reveal-radius

它指定模態的圓角。

數字 $global-radius
8

$reveal-zindex

覆蓋層使用 z-index 值用於模態。

數字 1005
9

$reveal-overlay-background

它顯示模態覆蓋層的背景顏色。

顏色 rgba($black, 0.45)

混合宏

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

reveal-overlay

您可以使用以下混合宏包含模態覆蓋層的樣式:

@include reveal-overlay($background);

它包含一個引數,如下表中所指定:

序號 引數及描述 型別 預設值
1

$background

它顯示覆蓋層的背景顏色。

顏色 $reveal-overlay-background

reveal-modal-base

您可以使用以下混合宏新增模態的基本樣式:

@include reveal-modal-base;

reveal-modal-width

它用於使用以下混合宏建立模態的寬度:

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

它包含以下引數,如下表中所指定:

序號 引數及描述 型別 預設值
1

$width

它指定模態的寬度。

數字
2

$max-width

它指定模態的最大寬度。

數字 $reveal-max-width

reveal-modal-fullscreen

您可以使用以下混合宏根據視窗的寬度和高度建立全屏模態:

@include reveal-modal-fullscreen;
foundation_containers.htm
廣告

© . All rights reserved.