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
foundation_containers.htm
Advertisements