]> 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: 8839c97)
Remove bottom off-canvas as it was more awkward than a junior high dance. 7683/head 8700/head
authorPaul Bailey <paulba@stedwards.edu>
Tue, 5 Jan 2016 04:38:08 +0000 (22:38 -0600)
committerPaul Bailey <paulba@stedwards.edu>
Tue, 5 Jan 2016 04:38:08 +0000 (22:38 -0600)
docs/pages/off-canvas.md patch | blob | blame | history
docs/partials/off-canvi.html patch | blob | blame | history
scss/components/_off-canvas.scss patch | blob | blame | history

diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 7789499a2f51aad41fc17a0a3f0acdc0ff4a595a..4631218e1a391553b055fc22127b41b4e2b31b30 100644 (file)
--- a/docs/pages/off-canvas.md
+++ b/docs/pages/off-canvas.md
@@ -117,16 +117,15 @@ The main content area (`.off-canvas-content`) will be padded to the left or righ
 
 ---
 
-## Off-canvas from Any Direction
+## Vertical Off-canvas
 
-In addition to left and right off-canvas menus, you can also have top or bottom off-canvases as well.
+In addition to left and right off-canvas menus, you can have vertical off-canvases as well.
 
 ```html
 <body>
   <div class="off-canvas-wrapper">
     <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
       <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top"></div>
-      <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom"></div>
       <div class="off-canvas-content" data-off-canvas-content></div>
     </div>
   </div>
@@ -134,20 +133,19 @@ In addition to left and right off-canvas menus, you can also have top or bottom
 ```
 
 <button class="button" type="button" data-toggle="offCanvasTop">Open Top Menu</button>
-<button class="button" type="button" data-toggle="offCanvasBottom">Open Bottom Menu</button>
 
 <div class="primary callout">
-  <p>When using the `title-bar`, the title-bar icons are still either `title-bar-left` or `title-bar-right`, but the off-canvas can be set to top or bottom.</p>
+  <p>When using the `title-bar` with a vertical off-canvas, the title-bar icons are still either `title-bar-left` or `title-bar-right`.</p>
 </div>
 
 ```html_example
 <div class="title-bar">
   <div class="title-bar-left">
     <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
-    <span class="title-bar-title">Foundation title bar with vertical off-canvas</span>
+    <span class="title-bar-title">Foundation title bar with top off-canvas</span>
   </div>
   <div class="title-bar-right">
-    <button class="menu-icon" type="button" data-open="offCanvasBottom"></button>
+    <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
   </div>
 </div>
 ```
diff --git a/docs/partials/off-canvi.html b/docs/partials/off-canvi.html
index ea4b8c38b153399ff8600b021b52e52ff48333dc..94430ee6a9830fecf6593ce4438ac7e207801f82 100644 (file)
--- a/docs/partials/off-canvi.html
+++ b/docs/partials/off-canvi.html
@@ -3,18 +3,18 @@
     <span aria-hidden="true">&times;</span>
   </button>
   <ul class="mobile-ofc vertical menu">
-    
+
     <li>
       <a href="http://foundation.zurb.com/learn/about.html">Learn</a>
       <ul class="submenu menu vertical" data-submenu>
-        <li><a href="http://foundation.zurb.com/learn/about.html">About Foundation</a></li> 
+        <li><a href="http://foundation.zurb.com/learn/about.html">About Foundation</a></li>
         <li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
         <li><a href="http://foundation.zurb.com/learn/classes.html">Classes</a></li>
         <li><a href="http://foundation.zurb.com/learn/case-studies.html">Case Studies</a></li>
-        <li><a href="http://foundation.zurb.com/learn/brands.html">Brands</a></li>  
+        <li><a href="http://foundation.zurb.com/learn/brands.html">Brands</a></li>
       </ul>
     </li>
-    
+
     <li>
       <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
       <ul class="submenu menu vertical" data-submenu>
@@ -33,7 +33,7 @@
     </li>
 
     <li><a href="http://foundation.zurb.com/upload.html">Upload</a></li>
-    
+
     <li>
       <a href="http://foundation.zurb.com/support/support.html">Support</a>
       <ul class="submenu menu vertical" data-submenu>
@@ -43,7 +43,7 @@
         <li><a href="http://foundation.zurb.com/support/faq.html">FAQs</a></li>
       </ul>
     </li>
-    
+
     <li>
       <a href="http://foundation.zurb.com/frameworks-docs.html">Docs</a>
       <ul class="submenu menu vertical" data-submenu>
@@ -52,7 +52,7 @@
         <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
       </ul>
     </li>
-    
+
     <li><a href="http://foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>
 
   </ul>
@@ -86,18 +86,3 @@
     <li><a href="#">Top</a></li>
   </ul>
 </div>
-
-<div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom">
-  <button class="close-button" aria-label="Close menu" type="button" data-close>
-    <span aria-hidden="true">&times;</span>
-  </button>
-  <ul class="mobile-ofc vertical menu">
-    <li><a href="#">Off-canvas</a></li>
-    <li><a href="#">Example</a></li>
-    <li><a href="#">Vertical</a></li>
-    <li><a href="#">Menu</a></li>
-    <li><a href="#">From</a></li>
-    <li><a href="#">The</a></li>
-    <li><a href="#">Bottom</a></li>
-  </ul>
-</div>
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index c4c05dadf77c9ab4689a89f37697ba436924ae73..0807577368136112ea3778b89135e619b4e0fcc1 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -33,7 +33,7 @@ $offcanvas-fixed-reveal: true !default;
 /// @type Color
 $offcanvas-exit-background: rgba($white, 0.25) !default;
 
-/// Height of a top or bottom off-canvas menu.
+/// Height of a vertical off-canvas menu.
 /// @type Number
 $offcanvas-vertical-size: 250px !default;
 
@@ -131,10 +131,6 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
     top: -$vertical-size;
     width: 100%;
   }
-  @else if $position == bottom {
-    bottom: -$vertical-size;
-    width: 100%;
-  }
 
   // Generates an open state class that matches the width of the menu
   @at-root {
@@ -148,9 +144,6 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
       @else if $position == top {
         transform: translateY($vertical-size);
       }
-      @else if $position == bottom {
-        transform: translateY(-$vertical-size);
-      }
     }
   }
 }
@@ -182,7 +175,6 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
     &.position-left   { @include off-canvas-position(left); }
     &.position-right  { @include off-canvas-position(right); }
     &.position-top    { @include off-canvas-position(top); }
-    &.position-bottom { @include off-canvas-position(bottom); }
   }
 
   // Reveal off-canvas menu on larger screens
@@ -197,13 +189,9 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
           @include off-canvas-reveal(right);
         }
 
-        .position-right.reveal-for-#{$name} {
+        .position-top.reveal-for-#{$name} {
           @include off-canvas-reveal(top);
         }
-
-        .position-right.reveal-for-#{$name} {
-          @include off-canvas-reveal(bottom);
-        }
       }
     }
   }
Mirror of https://github.com/foundation/foundation-sites.git