]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6612f46)
Set `fixed` as the default off canvas behaviour. Remove the $offcanvas-position`... 9428/head
authorBrett Mason <brettsmason@gmail.com>
Thu, 1 Dec 2016 19:23:05 +0000 (19:23 +0000)
committerBrett Mason <brettsmason@gmail.com>
Thu, 1 Dec 2016 19:23:05 +0000 (19:23 +0000)
scss/components/_off-canvas.scss patch | blob | blame | history
test/visual/offcanvas/absolute.html [new file with mode: 0644] patch | blob

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 0509caebc39c6b997ef96537f365f07af78b231e..5850e8cefaf3545f2aff6834ccc1c904f9c6cdb3 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -22,10 +22,6 @@ $offcanvas-background: $light-gray !default;
 /// @type Shadow
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
 
-/// If `true`, an off-canvas panel will be fixed-position, and scroll with the screen. Otherwise it will be absolute positioned.
-/// @type Bool
-$offcanvas-fixed: false !default;
-
 /// Z-index of an off-canvas panel with the `push` transition.
 /// @type Number
 $offcanvas-push-zindex: 1 !default;
@@ -103,7 +99,7 @@ $maincontent-class: 'off-canvas-content' !default;
 @mixin off-canvas-base(
   $background: $offcanvas-background,
   $transition: $offcanvas-transition-length $offcanvas-transition-timing,
-  $fixed: $offcanvas-fixed
+  $fixed: true
 ) {
   @include disable-mouse-outline;
 
@@ -284,9 +280,9 @@ $content: $maincontent-class
     @include off-canvas-base;
   }
 
-  // Off-canvas container with fixed position
-  .off-canvas-fixed {
-    @include off-canvas-base($fixed: true);
+  // Off-canvas container with absolute position
+  .off-canvas-absolute {
+    @include off-canvas-base($fixed: false);
   }
 
   // Off-canvas position classes
diff --git a/test/visual/offcanvas/absolute.html b/test/visual/offcanvas/absolute.html
new file mode 100644 (file)
index 0000000..fbca253
--- /dev/null
+++ b/test/visual/offcanvas/absolute.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Off canvas absolute test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+
+  <div class="row">
+
+    <div class="off-canvas-wrapper medium-6 columns">
+
+      <div class="off-canvas-absolute 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 and absolute positioned.</h3>
+      </div>
+
+      <div class="off-canvas-absolute position-right" id="offCanvasRight" 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 right off-canvas panel and absolute positioned.</h3>
+      </div>
+
+      <div class="off-canvas-absolute position-top" id="offCanvasTop" 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 top off-canvas panel and absolute positioned.</h3>
+      </div>
+
+      <div class="off-canvas-absolute position-bottom" id="offCanvasBottom" 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 bottom off-canvas panel and absolute positioned.</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>
+
+          <h3>This test demonstrates the `off-canvas-absolute` class.</h3>
+
+          <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.
+
+          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 class="off-canvas-wrapper medium-6 columns">
+
+      <div class="off-canvas-absolute position-left" id="offCanvasLeftTwo" 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 and absolute positioned.</h3>
+      </div>
+
+      <div class="off-canvas-absolute position-right" id="offCanvasRightTwo" 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 right off-canvas panel and absolute positioned.</h3>
+      </div>
+
+      <div class="off-canvas-absolute position-top" id="offCanvasTopTwo" 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 top off-canvas panel and absolute positioned.</h3>
+      </div>
+
+      <div class="off-canvas-absolute position-bottom" id="offCanvasBottomTwo" 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 bottom off-canvas panel and absolute positioned.</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="offCanvasLeftTwo">Left Push</button>
+            <button type="button" class="button" data-toggle="offCanvasRightTwo">Right Push</button>
+            <button type="button" class="button" data-toggle="offCanvasTopTwo">Top Push</button>
+            <button type="button" class="button" data-toggle="offCanvasBottomTwo">Bottom Push</button>
+          </div>
+
+          <h3>This test demonstrates the `off-canvas-absolute` class.</h3>
+
+          <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.
+
+          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>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git