]> 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: cc2f2c6)
Fix CSS for top bar stacking being in the wrong place, fixes #8307
authorGeoff Kimball <geoff@zurb.com>
Tue, 1 Mar 2016 23:03:39 +0000 (15:03 -0800)
committerGeoff Kimball <geoff@zurb.com>
Tue, 1 Mar 2016 23:03:39 +0000 (15:03 -0800)
docs/pages/top-bar.md patch | blob | blame | history
scss/components/_top-bar.scss patch | blob | blame | history
test/visual/top-bar/stacking.html [new file with mode: 0644] patch | blob

diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md
index 6e55999da4c4b8370365e674b319e4c281253d1f..557da6814b75711dd051504aa0366331b649ee3a 100644 (file)
--- a/docs/pages/top-bar.md
+++ b/docs/pages/top-bar.md
@@ -43,7 +43,7 @@ In the below example, our top bar includes a [dropdown menu](dropdown-menu.html)
 
 ---
 
-## Advanced
+## Advanced Layout
 
 You can further divide a top bar into a title area and content area. Use the `.top-bar-title` class to create a title/branding area. Next to that can be any element, which is used for the rest of the content.
 
@@ -94,6 +94,42 @@ In the below example, we've combined the above pattern with the Responsive Toggl
 
 ---
 
+## Stacking
+
+By default, the two sections of a top bar will stack on top of each other on small screens. This can be changed by adding the class `.stacked-for-medium` or `.stacked-for-large`.
+
+```html
+<div class="top-bar stacked-for-medium">
+  <!-- ... -->
+</div>
+```
+
+<div class="top-bar stacked-for-medium">
+  <div class="top-bar-left">
+    <ul class="dropdown menu" data-dropdown-menu>
+      <li class="menu-text">Site Title</li>
+      <li>
+        <a href="#">One</a>
+        <ul class="menu vertical">
+          <li><a href="#">One</a></li>
+          <li><a href="#">Two</a></li>
+          <li><a href="#">Three</a></li>
+        </ul>
+      </li>
+      <li><a href="#">Two</a></li>
+      <li><a href="#">Three</a></li>
+    </ul>
+  </div>
+  <div class="top-bar-right">
+    <ul class="menu">
+      <li><input type="search" placeholder="Search"></li>
+      <li><button type="button" class="button">Search</button></li>
+    </ul>
+  </div>
+</div>
+
+---
+
 ## Sticky Navigation
 
 See the documentation for the [Sticky](sticky.html#sticky-navigation) plugin to see how to easily make a sticky nav bar.
diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 2aa9bcf4c4b72d506247a60794e01eb8b32b5898..0b898e53abc4307a78ab14da6b6cb0ffcb2d5238 100644 (file)
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -118,22 +118,22 @@ $topbar-unstack-breakpoint: medium !default;
   // Top bar container
   .top-bar {
     @include top-bar-container;
-  }
 
-  // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
-  @each $size in $breakpoint-classes {
-    .stacked-for-#{$size} {
-      @include breakpoint($size down) {
-        @include top-bar-stacked;
-      }
-    }
-  }
+    // Stack on small screens by default
+    @include top-bar-stacked;
 
-  // Stack on small screens by default
-  @include top-bar-stacked;
+    @include breakpoint($topbar-unstack-breakpoint) {
+      @include top-bar-unstack;
+    }
 
-  @include breakpoint($topbar-unstack-breakpoint) {
-    @include top-bar-unstack;
+    // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
+    @each $size in map-remove($breakpoint-classes, small) {
+      &.stacked-for-#{$size} {
+        @include breakpoint($size down) {
+          @include top-bar-stacked;
+        }
+      }
+    }
   }
 
   // Sub-sections
@@ -152,7 +152,7 @@ $topbar-unstack-breakpoint: medium !default;
     .top-bar-title {
       float: left;
       margin-right: $topbar-title-spacing;
-      
+
     }
 
     .top-bar-left {
diff --git a/test/visual/top-bar/stacking.html b/test/visual/top-bar/stacking.html
new file mode 100644 (file)
index 0000000..094cd8d
--- /dev/null
+++ b/test/visual/top-bar/stacking.html
@@ -0,0 +1,58 @@
+<!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>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="row column">
+      <h1>Top Bar: Stacking</h1>
+
+      <p>By default, a top bar stacks on the small breakpoint (< 640px).</p>
+
+      <div class="top-bar">
+        <div class="top-bar-left">
+          <p><strong>Left</strong></p>
+        </div>
+        <div class="top-bar-right">
+          <p><strong>Right</strong></p>
+        </div>
+      </div>
+
+      <hr>
+
+      <p>This top bar should stack on <em>medium and down</em>.</p>
+
+      <div class="top-bar stacked-for-medium">
+        <div class="top-bar-left">
+          <p><strong>Left</strong></p>
+        </div>
+        <div class="top-bar-right">
+          <p><strong>Right</strong></p>
+        </div>
+      </div>
+
+      <hr>
+
+      <p>This top bar should stack on <em>large and down</em>.</p>
+
+      <div class="top-bar stacked-for-large">
+        <div class="top-bar-left">
+          <p><strong>Left</strong></p>
+        </div>
+        <div class="top-bar-right">
+          <p><strong>Right</strong></p>
+        </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