new navbar introduced to replace topbar

1 files changed, 86 insertions, 68 deletions

diff --git a/lib/patterns.less b/lib/patterns.less
index 8ceffaa99..a82e2856d 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -3,34 +3,41 @@
  * ---------------------------------------------------------------------------- */
 
 
-// TOPBAR
-// ------
+// NAVBAR (FIXED AND STATIC)
+// -------------------------
 
-// Topbar for Branding and Nav
-.topbar {
-  height: 40px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  overflow: visible;
+// Navbar variables
+@navBarHeight: 40px;
+@navBarBgStart: #333;
+@navBarBgEnd: #222;
 
-  // Links get text shadow
+// Common styles
+.navbar {
+  height: @navBarHeight;
+  overflow: visible;
+}
+// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+.navbar-inner {
+  background-color: @navBarBgEnd;
+  #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
+  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  .box-shadow(@shadow);
+}
+// Text and links
+.navbar {
+  // Links get text-shadow
   a {
     color: @grayLight;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   }
-
   // Hover and active states
   .brand a:hover,
   ul .active > a {
-    background-color: #333;
+    background-color: @navBarBgStart;
     background-color: rgba(255,255,255,.05);
     color: @white;
     text-decoration: none;
   }
-
   // Website or project name
   .brand {
     float: left;
@@ -42,7 +49,6 @@
     font-weight: 200;
     line-height: 1;
   }
-
   // Plain text in topbar
   p {
     margin: 0;
@@ -52,70 +58,82 @@
       color: @white;
     }
   }
+}
 
-  // Search Form
-  .form-search {
-    position: relative;
-    margin-top: 5px;
-    margin-bottom: 0;
-    input {
-      background-color: #444;
-      background-color: rgba(255,255,255,.3);
-      #font > .sans-serif(13px, normal, 1);
-      padding: 4px 9px;
-      color: @white;
-      color: rgba(255,255,255,.75);
-      border: 1px solid #111;
-      .border-radius(4px);
-      @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
-      .box-shadow(@shadow);
-      .transition(none);
+// Navbar search
+.navbar-search {
+  position: relative;
+  margin-top: 5px;
+  margin-bottom: 0;
+  float: left;
+  input {
+    background-color: #444;
+    background-color: rgba(255,255,255,.3);
+    #font > .sans-serif(13px, normal, 1);
+    padding: 4px 9px;
+    color: @white;
+    color: rgba(255,255,255,.75);
+    border: 1px solid #111;
+    .border-radius(4px);
+    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+    .box-shadow(@shadow);
+    .transition(none);
 
-      // Placeholder text gets special styles; can't be bundled together though for some reason
-      &:-moz-placeholder {
-        color: @grayLighter;
-      }
-      &::-webkit-input-placeholder {
-        color: @grayLighter;
-      }
-      // Hover states
-      &:hover {
-        background-color: @grayLight;
-        background-color: rgba(255,255,255,.5);
-        color: @white;
-      }
-      // Focus states (we use .focused since IE8 and down doesn't support :focus)
-      &:focus,
-      &.focused {
-        outline: 0;
-        background-color: @white;
-        color: @grayDark;
-        text-shadow: 0 1px 0 @white;
-        border: 0;
-        padding: 5px 10px;
-        .box-shadow(0 0 3px rgba(0,0,0,.15));
-      }
+    // Placeholder text gets special styles; can't be bundled together though for some reason
+    &:-moz-placeholder {
+      color: @grayLighter;
+    }
+    &::-webkit-input-placeholder {
+      color: @grayLighter;
+    }
+    // Hover states
+    &:hover {
+      background-color: @grayLight;
+      background-color: rgba(255,255,255,.5);
+      color: @white;
+    }
+    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    &:focus,
+    &.focused {
+      outline: 0;
+      background-color: @white;
+      color: @grayDark;
+      text-shadow: 0 1px 0 @white;
+      border: 0;
+      padding: 5px 10px;
+      .box-shadow(0 0 3px rgba(0,0,0,.15));
     }
-  }
-  // Todo: remove from v2.0 when ready, added for legacy
-  .pull-right {
-    float: right;
   }
 }
 
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-.topbar-inner {
-  background-color: #222;
-  #gradient > .vertical(#333, #222);
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
+
+// Static navbar
+.navbar-static {
+  margin-bottom: @baseLineHeight;
+}
+.navbar-static .navbar-inner {
+  margin-left:  -20px;
+  margin-right: -20px;
+  padding-left:  20px;
+  padding-right: 20px;
+  .border-radius(4px);
+}
+
+// Fixed navbar
+.navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
 }
 
 
+
 // NAVIGATION
 // ----------
 
-// Topbar Nav
+// Nav for navbar and topbar
 // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
 .nav {
   display: block;