- Foundation 通用
- Foundation - 全域性樣式
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript 實用程式
- Foundation - 媒體查詢
- Foundation - 網格
- Foundation - Flex 網格
- Foundation - 表單
- Foundation - 可見性類
- Foundation - 基本排版
- Foundation - 排版輔助工具
- Foundation - 基本控制元件
- Foundation - 導航
- Foundation - 容器
- Foundation - 媒體
- Foundation - 外掛
- Foundation SASS
- Foundation - Sass 函式
- Foundation - Sass 混合宏
- Foundation 庫
- Foundation - Motion UI
- Foundation 有用資源
- Foundation - 快速指南
- Foundation - 有用資源
- Foundation - 討論
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
廣告