Remove body overflow styling and move to a `off-canvas-wrapper` class. Remove backgro...

author Brett Mason <brettsmason@gmail.com>

Thu, 17 Nov 2016 20:07:31 +0000 (20:07 +0000)

committer Brett Mason <brettsmason@gmail.com>

Thu, 17 Nov 2016 20:07:31 +0000 (20:07 +0000)
author Brett Mason <brettsmason@gmail.com>
Thu, 17 Nov 2016 20:07:31 +0000 (20:07 +0000)
committer Brett Mason <brettsmason@gmail.com>
Thu, 17 Nov 2016 20:07:31 +0000 (20:07 +0000)
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss

index 6b29d29d39584b0de9baf1d39efb04182a063455..9384a9f3080a70b50535eb01f7bbeea672e09476 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -57,10 +57,6 @@ $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;
  
-/// Background color of the main content area.
-/// @type Color
-$maincontent-background: $body-background !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
@@ -69,10 +65,6 @@ $maincontent-background: $body-background !default;
      height: 100%;
    }
  
-  body {
-    overflow-x: hidden;
-  }
-
    // Hides overflow on body when an off-canvas panel is open.
    .is-off-canvas-open {
      overflow: hidden;
@@ -107,6 +99,12 @@ $maincontent-background: $body-background !default;
    }
  }
  
+// 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,
@@ -258,13 +256,9 @@ $maincontent-background: $body-background !default;
  }
  
  /// Sets the styles for the content container.
-@mixin off-canvas-content(
-  $background: $maincontent-background
-) {
+@mixin off-canvas-content() {
    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
    backface-visibility: hidden;
-
-  background: $background;
  }
  
  /// Adds styles that reveal an off-canvas panel.
@@ -288,6 +282,11 @@ $content: $maincontent-class
  @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;
diff --git a/test/visual/offcanvas/all-options.html b/test/visual/offcanvas/all-options.html

index 7cd95da69b34cfd37e10d2c9e1e26fa21ba926ad..5d9fac71412c841031310b992f14629834d7b6be 100644 (file)
--- a/test/visual/offcanvas/all-options.html
+++ b/test/visual/offcanvas/all-options.html
@@ -10,169 +10,173 @@
    </head>
    <body>
  
-    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a left off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a right off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a top off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a bottom off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-position="left" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a left off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-position="right" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a right off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-position="top" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a top off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-position="bottom" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-position="top" data-force-to="top">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a top off-canvas panel with force-to set to top</h3>
-    </div>
-
-    <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-position="bottom" data-force-to="bottom">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
-    </div>
-
-    <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-position="left" data-content-overlay="false">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
-    </div>
-
-    <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-position="right" data-close-on-click="false">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
-    </div>
-
-    <div class="off-canvas-content" data-off-canvas-content>
-      <div class="row column">
-
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
-          <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
-          <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
-          <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
-        </div>
+    <div class="off-canvas-wrapper">
  
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
-          <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
-          <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
-          <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
-        </div>
+      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel</h3>
+      </div>
  
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
-          <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
-        </div>
+      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a right off-canvas panel</h3>
+      </div>
  
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
-          <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
-        </div>
+      <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a top off-canvas panel</h3>
+      </div>
  
-        <h1>This test should show all off canvas options working together.</h1>
+      <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a bottom off-canvas panel</h3>
+      </div>
  
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+      <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-position="left" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel with 'overlap' transition</h3>
+      </div>
  
-        Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+      <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-position="right" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a right off-canvas panel with 'overlap' transition</h3>
+      </div>
  
-        Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+      <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-position="top" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a top off-canvas panel with 'overlap' transition</h3>
+      </div>
  
-        Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+      <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-position="bottom" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
+      </div>
  
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+      <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-position="top" data-force-to="top">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a top off-canvas panel with force-to set to top</h3>
+      </div>
  
-        Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+      <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-position="bottom" data-force-to="bottom">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
+      </div>
  
-        Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+      <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-position="left" data-content-overlay="false">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
+      </div>
  
-        Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+      <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-position="right" data-close-on-click="false">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
+      </div>
  
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+      <div class="off-canvas-content" data-off-canvas-content>
+        <div class="row column">
  
-        Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+            <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+            <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
+            <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
+          </div>
  
-        Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
+            <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
+            <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
+            <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+          </div>
  
-        Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
+            <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
+          </div>
  
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
-          <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
-          <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
-          <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
-        </div>
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
+            <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
+          </div>
  
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
-          <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
-          <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
-          <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
-        </div>
+          <h1>This test should show all off canvas options working together.</h1>
  
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
-          <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
-        </div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
+          Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+
+          Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+
+          Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
+          Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+
+          Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+
+          Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
+          Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+
+          Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+
+          Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+            <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+            <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
+            <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
+          </div>
+
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
+            <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
+            <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
+            <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+          </div>
+
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
+            <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
+          </div>
+
+          <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
+            <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
+          </div>
  
-        <div class="button-group expanded">
-          <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
-          <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
+        </div>
          </div>
  
        </div>
-      </div>
  
      <script src="../assets/js/vendor.js"></script>
      <script src="../assets/js/foundation.js"></script>
diff --git a/test/visual/offcanvas/sticky.html b/test/visual/offcanvas/sticky.html

index 12bb7a2ac72fc23a55c709b0e18cdd99e7b5d7a0..56f00cd4041fdafa78f049a0d5cd4ce05ac925be 100644 (file)
--- a/test/visual/offcanvas/sticky.html
+++ b/test/visual/offcanvas/sticky.html
@@ -9,147 +9,147 @@
      <link href="../assets/css/foundation.css" rel="stylesheet" />
    </head>
    <body>
-  <div id="page">
-
-    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a left off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a right off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a top off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a bottom off-canvas panel</h3>
-    </div>
-
-    <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-position="left" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a left off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-position="right" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a right off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-position="top" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a top off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-position="bottom" data-transition="overlap">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
-    </div>
-
-    <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-position="top" data-force-to="top">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a top off-canvas panel with force-to set to top</h3>
-    </div>
-
-    <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-position="bottom" data-force-to="bottom">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
-    </div>
-
-    <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-position="left" data-content-overlay="false">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
-    </div>
-
-    <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-position="right" data-close-on-click="false">
-      <button class="close-button" aria-label="Close panel" type="button" data-close>
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
-    </div>
-
-    <div id="content" class="off-canvas-content" data-off-canvas-content>
-
-      <div class="top-bar-container" data-sticky-container>
-        <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width: 100%;">
-          <div class="top-bar">
-            <div class="row column">
-              <div class="top-bar-left">
-                <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
-                <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
-                <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
-                <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
-              </div>
-              <div class="top-bar-right">
-                <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
-                <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
-                <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
-                <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+    <div id="page" class="off-canvas-wrapper">
+
+      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel</h3>
+      </div>
+
+      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a right off-canvas panel</h3>
+      </div>
+
+      <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a top off-canvas panel</h3>
+      </div>
+
+      <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a bottom off-canvas panel</h3>
+      </div>
+
+      <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-position="left" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel with 'overlap' transition</h3>
+      </div>
+
+      <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-position="right" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a right off-canvas panel with 'overlap' transition</h3>
+      </div>
+
+      <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-position="top" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a top off-canvas panel with 'overlap' transition</h3>
+      </div>
+
+      <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-position="bottom" data-transition="overlap">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
+      </div>
+
+      <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-position="top" data-force-to="top">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a top off-canvas panel with force-to set to top</h3>
+      </div>
+
+      <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-position="bottom" data-force-to="bottom">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
+      </div>
+
+      <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-position="left" data-content-overlay="false">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
+      </div>
+
+      <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-position="right" data-close-on-click="false">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
+      </div>
+
+      <div id="content" class="off-canvas-content" data-off-canvas-content>
+
+        <div class="top-bar-container" data-sticky-container>
+          <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width: 100%;">
+            <div class="top-bar">
+              <div class="row column">
+                <div class="top-bar-left">
+                  <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+                  <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+                  <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
+                  <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
+                </div>
+                <div class="top-bar-right">
+                  <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
+                  <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
+                  <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
+                  <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+                </div>
                </div>
              </div>
            </div>
          </div>
-      </div>
  
-      <div class="row column">
+        <div class="row column">
  
-        <h1>This test is designed to show how off canvas works with the sticky plugin.</h1>
+          <h1>This test is designed to show how off canvas works with the sticky plugin.</h1>
  
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
  
-        Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+          Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
  
-        Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+          Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
  
-        Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+          Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
  
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
  
-        Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+          Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
  
-        Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+          Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
  
-        Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+          Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
  
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
  
-        Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+          Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
  
-        Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+          Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
  
-        Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+          Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
  
-      </div>
-      </div>
+        </div>
+        </div>
  
-    </div>
+      </div>
  
      <script src="../assets/js/vendor.js"></script>
      <script src="../assets/js/foundation.js"></script>
author	Brett Mason <brettsmason@gmail.com>
	Thu, 17 Nov 2016 20:07:31 +0000 (20:07 +0000)
committer	Brett Mason <brettsmason@gmail.com>
	Thu, 17 Nov 2016 20:07:31 +0000 (20:07 +0000)
scss/components/_off-canvas.scss		patch \| blob \| blame \| history
test/visual/offcanvas/all-options.html		patch \| blob \| blame \| history
test/visual/offcanvas/sticky.html		patch \| blob \| blame \| history