- 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 - Off-canvas Sass Reference
Variables
You can change the styles of the components by using the following SASS variables as listed in the table −
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 | $offcanvas-size It specifies the off-canvas menu width. |
Number | 250px |
2 | $offcanvas-background It displays the background color of an off-canvas menu. |
Color | $light-gray |
3 | $offcanvas-zindex It specifies Z-index of an off-canvas menu. |
Number | -1 |
4 | $offcanvas-transition-length It displays the length of the animation on an off-canvas menu. |
Number | 0.5s |
5 | $offcanvas-transition-timing It specifies the off-canvas menu's timing function of the animation. |
Keyword | ease |
6 | $offcanvas-fixed-reveal If true, a revealed off-canvas can fix the position of revealed off canvas by setting it to true. |
true | |
7 | $offcanvas-exit-background It displays the background color for the off-canvas menu's overlay. |
Color | rgba($white, 0.25) |
8 | $maincontent-class It uses CSS class for the main content area. |
'off-canvas-content' | |
9 | $maincontent-shadow It displays the box shadow for the main content area. |
Shadow | 0 0 10px rgba($black, 0.5) |
10 | $titlebar-background It displays the background color of a title bar. |
Color | $black |
11 | $titlebar-color It defines the text color for the text inside a title bar. |
Color | $white |
12 | $titlebar-padding It defines padding inside a title bar. |
Length | 0.5rem |
13 | $titlebar-text-font-weight It specifies the font weight of the text. |
Weight | bold |
14 | $titlebar-icon-color It defines the title bar icon color of the menu. |
Color | $white |
15 | $titlebar-icon-color-hover It defines the title bar icon color of the menu on hover. |
Color | $medium-gray |
16 | $titlebar-icon-spacing It specifies the spacing between the menu icon and the text inside a title bar. |
Length | 0.25rem |
Mixins
You can use the mixins to build the CSS class structure for your components as described below.
off-canvas-basics
It adds styles for off-canvas and styles can be included using the following mixin −
@include off-canvas-basics;
off-canvas-base
It specifies basic styles for the off-canvas menu and you can include styles using the following mixin −
@include off-canvas-base;
off-canvas-reveal
It specifies styles that reveal the off-canvas menu.
@include off-canvas-reveal($position);
It can be specified as defined in the following table −
Sr.No. | Parameter & Description | Type | Default Value |
---|---|---|---|
1 | $position It sets the position of the off-canvas menu. |
Keyword | left |