Foundation - Reveal Sass 参考
变量
您可以使用下表中列出的 SASS 变量来更改组件的样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 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 值作为模态框。 |
Number | 1005 |
| 9 |
$reveal-overlay-background 显示模态框的背景颜色。 |
Color | rgba($black, 0.45) |
Mixins
您可以使用 mixins 为您的 reveal 模式组件构建 CSS 类结构。
reveal-overlay
您可以使用以下 mixin − 为模式叠加添加样式
@include reveal-overlay($background);
它包含一个参数，如下表所示 −
| Sr.No. | 参数和说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$background 显示叠加层的背景颜色。 |
颜色 | $reveal-overlay-background |
reveal-modal-base
您可以使用以下 mixin − 为模态框添加基本样式
@include reveal-modal-base;
reveal-modal-width
它用于使用下面的混合 − 创建模态框的宽度
@include reveal-modal-width($width, $max-width);
它包含表格 − 中指定的以下参数
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$width 指定模态框的宽度。 |
数字 | None |
| 2 |
$max-width 指定模态框的最大宽度。 |
数字 | $reveal-max-width |
reveal-modal-fullscreen
您可以使用以下 mixin 根据窗口的宽度和高度创建全屏模式 −
@include reveal-modal-fullscreen;
foundation_containers.html
