- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Reveal Sass Reference
Variables
You can change the styles of the components by using SASS variables as listed in the table given below.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$reveal-background It displays the background color of a modal. |
Color | $white |
| 2 |
$reveal-width It defines the width of the modal. |
Number | 600px |
| 3 |
$reveal-max-width It specifies the maximum width of a modal. |
Number | $global-width |
| 4 |
$reveal-offset When you add the modal, it will offset from the top of the window. |
Number | rem-calc(100) |
| 5 |
$reveal-padding It defines the padding inside a modal. |
Number | $global-padding |
| 6 |
$reveal-border It sets the border for a modal. |
Number | 1px solid $medium-gray |
| 7 |
$reveal-radius It specifies radius for the modal. |
Number | $global-radius |
| 8 |
$reveal-zindex The overlay uses z-index value for modals. |
Number | 1005 |
| 9 |
$reveal-overlay-background It displays the background color of modal overlays. |
Color | rgba($black, 0.45) |
Mixins
You can use the mixins to build the CSS class structure for your reveal modal components.
reveal-overlay
You can include styles for modal overlay using the following mixin −
@include reveal-overlay($background);
It contains one parameter as specified in the below table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$background It displays the background color of overlay. |
Color | $reveal-overlay-background |
reveal-modal-base
You can add base styles for a modal using the below mixin −
@include reveal-modal-base;
reveal-modal-width
It is used to create width of a modal using the below mixin −
@include reveal-modal-width($width, $max-width);
It contains the following parameters as specified in the table −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$width It specifies the width of the modal. |
Number | None |
| 2 |
$max-width It specifies the maximum width of the modal. |
Number | $reveal-max-width |
reveal-modal-fullscreen
You can create full screen modal according to the width and height of the window by using the following mixin −
@include reveal-modal-fullscreen;