// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group off-canvas
////
/// Width of an off-canvas menu.
/// @type Number
$offcanvas-size: 250px !default;
/// Background color of an off-canvas menu.
/// @type Color
$offcanvas-background: $light-gray !default;
/// Z-index of an off-canvas menu.
/// @type Number
$offcanvas-zindex: -1 !default;
/// Length of the animation on an off-canvas menu.
/// @type Number
$offcanvas-transition-length: 0.5s !default;
/// Timing function of the animation on an off-canvas menu.
/// @type Keyword
$offcanvas-transition-timing: ease !default;
/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
$offcanvas-fixed-reveal: true !default;
/// Background color for the overlay that appears when an off-canvas menu is open.
/// @type Color
$offcanvas-exit-background: rgba($white, 0.25) !default;
/// CSS class used for the main content area. The off-canvas mixins use this to target the page body.
$maincontent-class: 'off-canvas-content' !default;
/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
/// @type Shadow
$maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
@mixin off-canvas-basics {
// Extra properties needed on <html> and <body> to make off-canvas work
html,
body {
height: 100%;
}
.off-canvas-wrapper {
width: 100%;
overflow-x: hidden;
position: relative;
backface-visibility: hidden;
-webkit-overflow-scrolling: auto;
}
.off-canvas-wrapper-inner {
@include clearfix;
position: relative;
width: 100%;
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
}
// Container for page content
.off-canvas-content,
.#{$maincontent-class} {
min-height: 100%;
background: $body-background;
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
backface-visibility: hidden;
z-index: 1;
padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper
@if has-value($maincontent-shadow) {
box-shadow: $maincontent-shadow;
}
}
// Click-to-exit overlay (generated by JavaScript)
.js-off-canvas-exit {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $offcanvas-exit-background;
cursor: pointer;
transition: background $offcanvas-transition-length $offcanvas-transition-timing;
}
}
/// Adds basic styles for an off-canvas menu.
@mixin off-canvas-base {
@include disable-mouse-outline;
position: absolute;
background: $offcanvas-background;
z-index: $offcanvas-zindex;
max-height: 100%;
overflow-y: auto;
transform: translateX(0);
}
@mixin off-canvas-position(
$position: left,
$size: $offcanvas-size,
$fixed: false
) {
@if $position == left {
left: -$size;
top: 0;
width: $size;
}
@else if $position == right {
right: -$size;
top: 0;
width: $size;
}
// Generates an open state class that matches the width of the menu
@at-root {
.is-open-#{$position} {
@if $position == left {
transform: translateX($size);
}
@else if $position == right {
transform: translateX(-$size);
}
}
}
}
/// Adds styles that reveal an off-canvas menu.
/// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
@mixin off-canvas-reveal(
$position: left
) {
#{$position}: 0;
z-index: auto;
@if $offcanvas-fixed-reveal {
position: fixed;
}
& ~ .#{$maincontent-class} {
margin-#{$position}: $offcanvas-size;
}
}
@mixin foundation-off-canvas {
@include off-canvas-basics;
// Off-canvas container
.off-canvas {
@include off-canvas-base;
&.position-left { @include off-canvas-position(left); }
&.position-right { @include off-canvas-position(right); }
}
// Reveal off-canvas menu on larger screens
@each $name, $value in $breakpoint-classes {
@if $name != $-zf-zero-breakpoint {
@include breakpoint($name) {
.position-left.reveal-for-#{$name} {
@include off-canvas-reveal(left);
}
.position-right.reveal-for-#{$name} {
@include off-canvas-reveal(right);
}
}
}
}
}