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 类结构。

您可以使用以下混合宏包含模态覆盖层的样式：

@include reveal-overlay($background);

它包含一个参数，如下表中所指定：

序号	参数及描述	类型	默认值
1	$background 它显示覆盖层的背景颜色。	颜色	$reveal-overlay-background

序号

参数及描述

类型

默认值

$background

它显示覆盖层的背景颜色。

颜色

$reveal-overlay-background

您可以使用以下混合宏添加模态的基本样式：

@include reveal-modal-base;

它用于使用以下混合宏创建模态的宽度：

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

它包含以下参数，如下表中所指定：

序号	参数及描述	类型	默认值
1	$width 它指定模态的宽度。	数字	无
2	$max-width 它指定模态的最大宽度。	数字	$reveal-max-width

序号

参数及描述

类型

默认值

$width

它指定模态的宽度。

数字

无

$max-width

它指定模态的最大宽度。

数字

$reveal-max-width

您可以使用以下混合宏根据窗口的宽度和高度创建全屏模态：

@include reveal-modal-fullscreen;

foundation_containers.htm

打印页面