// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group off-canvas
////
/// Width of a left/right off-canvas panel.
/// @type Number
$offcanvas-size: 250px !default;
/// Height of a top/bottom off-canvas panel.
/// @type Number
$offcanvas-vertical-size: 250px !default;
/// Background color of an off-canvas panel.
/// @type Color
$offcanvas-background: $light-gray !default;
/// Box shadow for the off-canvas panel.
/// @type Shadow
$offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
/// Z-index of an off-canvas panel with the `push` transition.
/// @type Number
$offcanvas-push-zindex: 1 !default;
/// Z-index of an off-canvas panel with the `overlap` transition.
/// @type Number
$offcanvas-overlap-zindex: 10 !default;
/// Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin.
/// @type Number
$offcanvas-reveal-zindex: 1 !default;
/// Length of the animation on an off-canvas panel.
/// @type Number
$offcanvas-transition-length: 0.5s !default;
/// Timing function of the animation on an off-canvas panel.
/// @type Keyword
$offcanvas-transition-timing: ease !default;
/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
/// @type Bool
$offcanvas-fixed-reveal: true !default;
/// Background color for the overlay that appears when an off-canvas panel 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 content.
$maincontent-class: 'off-canvas-content' !default;
/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
@mixin off-canvas-basics {
// Hides overflow on body when an off-canvas panel is open.
.is-off-canvas-open {
overflow: hidden;
}
// Off-canvas overlay (generated by JavaScript)
.js-off-canvas-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity $offcanvas-transition-length $offcanvas-transition-timing, visibility $offcanvas-transition-length $offcanvas-transition-timing;
background: $offcanvas-exit-background;
opacity: 0;
visibility: hidden;
overflow: hidden;
&.is-visible {
opacity: 1;
visibility: visible;
}
&.is-closable {
cursor: pointer;
}
&.is-overlay-absolute {
position: absolute;
}
&.is-overlay-fixed {
position: fixed;
}
}
}
// Adds basic styles for an off-canvas wrapper.
@mixin off-canvas-wrapper() {
position: relative;
overflow: hidden;
}
/// Adds basic styles for an off-canvas panel.
@mixin off-canvas-base(
$background: $offcanvas-background,
$transition: $offcanvas-transition-length $offcanvas-transition-timing,
$fixed: true
) {
@include disable-mouse-outline;
@if $fixed == true {
position: fixed;
}
@else {
position: absolute;
}
z-index: $offcanvas-push-zindex;
transition: transform $transition;
backface-visibility: hidden;
background: $background;
// Overlap only styles.
&.is-transition-overlap {
z-index: $offcanvas-overlap-zindex;
&.is-open {
box-shadow: $offcanvas-shadow;
}
}
// Sets transform to 0 to show an off-canvas panel.
&.is-open {
transform: translate(0, 0);
}
}
/// Adds styles to position an off-canvas panel to the left/right/top/bottom.
@mixin off-canvas-position(
$position: left,
$orientation: horizontal,
$size: if($orientation == horizontal, $offcanvas-size, $offcanvas-vertical-size)
) {
@if $position == left {
top: 0;
left: 0;
width: $size;
height: 100%;
transform: translateX(-$size);
overflow-y: auto;
// Sets the open position for the content
&.is-open ~ .#{$maincontent-class} {
transform: translateX($size);
}
}
@else if $position == right {
top: 0;
right: 0;
width: $size;
height: 100%;
transform: translateX($size);
overflow-y: auto;
// Sets the open position for the content
&.is-open ~ .#{$maincontent-class} {
transform: translateX(-$size);
}
}
@else if $position == top {
top: 0;
left: 0;
width: 100%;
height: $size;
transform: translateY(-$size);
overflow-x: auto;
// Sets the open position for the content
&.is-open ~ .#{$maincontent-class} {
transform: translateY($size);
}
}
@else if $position == bottom {
bottom: 0;
left: 0;
width: 100%;
height: $size;
transform: translateY($size);
overflow-x: auto;
// Sets the open position for the content
&.is-open ~ .#{$maincontent-class} {
transform: translateY(-$size);
}
}
// If $offcanvas-shadow is set, add it as a pseudo-element.
// This mimics the off-canvas panel having a lower z-index, without having to have one.
@if $offcanvas-shadow {
&.is-transition-push::after {
position: absolute;
@if $position == left {
top: 0;
right: 0;
height: 100%;
width: 1px;
}
@else if $position == right {
top: 0;
left: 0;
height: 100%;
width: 1px;
}
@else if $position == top {
bottom: 0;
left: 0;
height: 1px;
width: 100%;
}
@else if $position == bottom {
top: 0;
left: 0;
height: 1px;
width: 100%;
}
box-shadow: $offcanvas-shadow;
content: " ";
}
}
// No transform on overlap transition
&.is-transition-overlap.is-open ~ .#{$maincontent-class} {
transform: none;
}
}
/// Sets the styles for the content container.
@mixin off-canvas-content() {
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
backface-visibility: hidden;
}
/// Adds styles that reveal an off-canvas panel.
@mixin off-canvas-reveal(
$position: left,
$zindex: $offcanvas-reveal-zindex,
$content: $maincontent-class
) {
transform: none;
z-index: $zindex;
@if not $offcanvas-fixed-reveal {
position: absolute;
}
& ~ .#{$content} {
margin-#{$position}: $offcanvas-size;
}
}
@mixin foundation-off-canvas {
@include off-canvas-basics;
// Off-canvas wrapper
.off-canvas-wrapper {
@include off-canvas-wrapper;
}
// Off-canvas container
.off-canvas {
@include off-canvas-base;
}
// Off-canvas container with absolute position
.off-canvas-absolute {
@include off-canvas-base($fixed: false);
}
// Off-canvas position classes
.position-left { @include off-canvas-position(left, horizontal); }
.position-right { @include off-canvas-position(right, horizontal); }
.position-top { @include off-canvas-position(top, vertical); }
.position-bottom { @include off-canvas-position(bottom, vertical); }
.off-canvas-content {
@include off-canvas-content;
}
// Reveal off-canvas panel 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);
}
.position-top.reveal-for-#{$name} {
@include off-canvas-reveal(top);
}
.position-bottom.reveal-for-#{$name} {
@include off-canvas-reveal(bottom);
}
}
}
}
}
|
Download
