locomotivecms_wagon 2.4.1 → 3.0.0.beta2

data/generators/foundation/public/stylesheets/foundation6/components/_off-canvas.scss

@@ -1,505 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group off-canvas
-////
-
-/// Width map of a left/right off-canvas panel.
-/// @type Map
-$offcanvas-sizes: (
-  small: 250px,
-) !default;
-
-/// Height map of a top/bottom off-canvas panel.
-/// @type Map
-$offcanvas-vertical-sizes: (
-  small: 250px,
-) !default;
-
-/// Background color of an off-canvas panel.
-/// @type Color
-$offcanvas-background: $light-gray !default;
-
-/// Box shadow for the off-canvas overlap panel.
-/// @type Shadow
-$offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
-
-/// Inner box shadow size for the off-canvas push panel.
-/// @type Number
-$offcanvas-inner-shadow-size: 20px !default;
-
-/// Inner box shadow color for the off-canvas push panel.
-/// @type Color
-$offcanvas-inner-shadow-color: rgba($black, 0.25) !default;
-
-/// Z-index of an off-canvas content overlay.
-/// @type Number
-$offcanvas-overlay-zindex: 11 !default;
-
-/// Z-index of an off-canvas panel with the `push` transition.
-/// @type Number
-$offcanvas-push-zindex: 12 !default;
-
-/// Z-index of an off-canvas panel with the `overlap` transition.
-/// @type Number
-$offcanvas-overlap-zindex: 13 !default;
-
-/// Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin.
-/// @type Number
-$offcanvas-reveal-zindex: 12 !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 {
-
-  /// Transform deprecated size settings into map & show warning
-  @if variable-exists(offcanvas-size) {
-    $offcanvas-sizes: (small: $offcanvas-size, medium: $offcanvas-size) !global;
-    @warn '$offcanvas-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-sizes instead';
-  }
-  @if variable-exists(offcanvas-vertical-size) {
-    $offcanvas-vertical-sizes: (small: $offcanvas-vertical-size, medium: $offcanvas-vertical-size) !global;
-    @warn '$offcanvas-vertical-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-vertical-sizes instead';
-  }
-
-  // Checks the z-indexes and increase them due to backwards compatibility.
-  // This is necessary because the overlay's z-index is new since v6.4 and may be identical to the user custom settings of the push z-index.
-  @if $offcanvas-push-zindex <= $offcanvas-overlay-zindex { $offcanvas-push-zindex: $offcanvas-overlay-zindex + 1 !global; }
-  @if $offcanvas-overlap-zindex <= $offcanvas-push-zindex { $offcanvas-overlap-zindex: $offcanvas-push-zindex + 1 !global; }
-  @if $offcanvas-reveal-zindex <= $offcanvas-overlay-zindex { $offcanvas-reveal-zindex: $offcanvas-overlay-zindex + 1 !global; }
-
-  // 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;
-    z-index: $offcanvas-overlay-zindex;
-
-    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;
-  }
-
-  // Set the off-canvas z-index.
-  z-index: $offcanvas-push-zindex;
-
-  // Increase CSS specificity
-  &.is-transition-push {
-    z-index: $offcanvas-push-zindex;
-  }
-
-  transition: transform $transition;
-  backface-visibility: hidden;
-
-  background: $background;
-
-  // Hide inactive off-canvas within the content that have the same position
-  &.is-closed {
-    visibility: hidden;
-  }
-
-  // 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,
-  $sizes: if($orientation == horizontal, $offcanvas-sizes, $offcanvas-vertical-sizes)
-) {
-  @if $position == left {
-    top: 0;
-    left: 0;
-    height: 100%;
-    overflow-y: auto;
-
-    @each $name, $size in $sizes {
-      @include breakpoint($name) {
-        width: $size;
-        transform: translateX(-$size);
-      }
-    }
-
-    // Sets the position for nested off-canvas element
-    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-
-      @each $name, $size in $sizes {
-        @include breakpoint($name) {
-          transform: translateX(-$size);
-        }
-      }
-      &.is-transition-overlap.is-open {
-        transform: translate(0, 0);
-      }
-    }
-
-    // Sets the open position for the content
-    @at-root .#{$maincontent-class}.is-open-#{$position} {
-      &.has-transition-push {
-        @each $name, $size in $sizes {
-          @include breakpoint($name) {
-            transform: translateX($size);
-          }
-        }
-      }
-    }
-  }
-  @else if $position == right {
-    top: 0;
-    right: 0;
-    height: 100%;
-    overflow-y: auto;
-
-    @each $name, $size in $sizes {
-      @include breakpoint($name) {
-        width: $size;
-        transform: translateX($size);
-      }
-    }
-
-    // Sets the position for nested off-canvas element
-    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-
-      @each $name, $size in $sizes {
-        @include breakpoint($name) {
-          transform: translateX($size);
-        }
-      }
-      &.is-transition-overlap.is-open {
-        transform: translate(0, 0);
-      }
-    }
-
-    // Sets the open position for the content
-    @at-root .#{$maincontent-class}.is-open-#{$position} {
-      &.has-transition-push {
-        @each $name, $size in $sizes {
-          @include breakpoint($name) {
-            transform: translateX(-$size);
-          }
-        }
-      }
-    }
-  }
-  @else if $position == top {
-    top: 0;
-    left: 0;
-    width: 100%;
-    overflow-x: auto;
-
-    @each $name, $size in $sizes {
-      @include breakpoint($name) {
-        height: $size;
-        transform: translateY(-$size);
-      }
-    }
-
-    // Sets the position for nested off-canvas element
-    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-      @each $name, $size in $sizes {
-        @include breakpoint($name) {
-          transform: translateY(-$size);
-        }
-      }
-      &.is-transition-overlap.is-open {
-        transform: translate(0, 0);
-      }
-    }
-
-    // Sets the open position for the content
-    @at-root .#{$maincontent-class}.is-open-#{$position} {
-      &.has-transition-push {
-        @each $name, $size in $sizes {
-          @include breakpoint($name) {
-            transform: translateY($size);
-          }
-        }
-      }
-    }
-  }
-  @else if $position == bottom {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    overflow-x: auto;
-
-    @each $name, $size in $sizes {
-      @include breakpoint($name) {
-        height: $size;
-        transform: translateY($size);
-      }
-    }
-
-    // Sets the position for nested off-canvas element
-    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-      @each $name, $size in $sizes {
-        @include breakpoint($name) {
-          transform: translateY($size);
-        }
-      }
-      &.is-transition-overlap.is-open {
-        transform: translate(0, 0);
-      }
-    }
-
-    // Sets the open position for the content
-    @at-root .#{$maincontent-class}.is-open-#{$position} {
-      &.has-transition-push {
-        @each $name, $size in $sizes {
-          @include breakpoint($name) {
-            transform: translateY(-$size);
-          }
-        }
-      }
-    }
-  }
-
-  // If $offcanvas-inner-shadow-size is set, add inner box-shadow.
-  // This mimics the off-canvas panel having a lower z-index, without having to have one.
-  @if $offcanvas-inner-shadow-size {
-    &.is-transition-push {
-      @if $position == left {
-        @include inner-side-shadow(right, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
-      }
-      @else if $position == right {
-        @include inner-side-shadow(left, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
-      }
-      @else if $position == top {
-        @include inner-side-shadow(bottom, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
-      }
-      @else if $position == bottom {
-        @include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
-      }
-    }
-  }
-
-}
-
-/// Sets the styles for the content container.
-@mixin off-canvas-content() {
-  transform: none;
-  transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
-  backface-visibility: hidden;
-
-  // Transform scope until the element is closed (makes sure transitionend gets triggered)
-  &.has-transition-push {
-    transform: translate(0, 0);
-  }
-
-  // Consider element & content, nested in another content
-  .off-canvas.is-open {
-    transform: translate(0, 0);
-  }
-}
-
-/// Adds styles that reveal an off-canvas panel.
-@mixin off-canvas-reveal(
-$position: left,
-$zindex: $offcanvas-reveal-zindex,
-$content: $maincontent-class,
-$breakpoint: small
-) {
-  transform: none;
-  z-index: $zindex;
-  transition: none;
-  visibility: visible;
-
-  @if not $offcanvas-fixed-reveal {
-    position: absolute;
-  }
-
-  .close-button {
-    display: none;
-  }
-
-  // Consider revealed element is nested in content
-  .#{$maincontent-class} & {
-    transform: none;
-  }
-
-  @at-root .#{$content}.has-reveal-#{$position} {
-    margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
-  }
-
-  // backwards compatibility (prior to v6.4)
-  & ~ .#{$content} {
-    margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
-  }
-}
-
-/// Overrides the off-canvas styles
-@mixin in-canvas() {
-  visibility: visible;
-  height: auto;
-  position: static;
-  background: inherit;
-  width: inherit;
-  overflow: inherit;
-  transition: inherit;
-
-  // Increase CSS specificity
-  &.position-left,
-  &.position-right,
-  &.position-top,
-  &.position-bottom {
-    box-shadow: none;
-    transform: none;
-  }
-
-  .close-button {
-    display: none;
-  }
-}
-
-@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;
-
-    // Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope.
-    @at-root .#{$maincontent-class} & {
-      // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
-      // position: absolute;
-    }
-  }
-
-  // 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, $offcanvas-reveal-zindex, $maincontent-class, $name);
-        }
-
-        .position-right.reveal-for-#{$name} {
-          @include off-canvas-reveal(right, $offcanvas-reveal-zindex, $maincontent-class, $name);
-        }
-
-        .position-top.reveal-for-#{$name} {
-          @include off-canvas-reveal(top, $offcanvas-reveal-zindex, $maincontent-class, $name);
-        }
-
-        .position-bottom.reveal-for-#{$name} {
-          @include off-canvas-reveal(bottom, $offcanvas-reveal-zindex, $maincontent-class, $name);
-        }
-      }
-    }
-  }
-
-  // Move in-canvas for larger screens
-  @each $name, $value in $breakpoint-classes {
-    @if $name != $-zf-zero-breakpoint {
-      @include breakpoint($name) {
-        .off-canvas.in-canvas-for-#{$name} {
-          @include in-canvas;
-        }
-      }
-    }
-  }
-}