tons of docs cleanup in css, adding subnav to official components

6 files changed, 111 insertions, 4 deletions

diff --git a/less/bootstrap.less b/less/bootstrap.less
index c43875a804..0b82b8a0e2 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -41,6 +41,7 @@
 // Components: Nav
 @import "navs.less";
 @import "navbar.less";
+@import "subnav.less";
 @import "breadcrumbs.less";
 @import "pagination.less";
 @import "pager.less";
diff --git a/less/navbar.less b/less/navbar.less
index d535158a50..d1bfc2209b 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -191,7 +191,6 @@
   float: right; // redeclare due to specificity
 }
 .navbar .nav > li {
-  display: block;
   float: left;
 }
 
@@ -200,7 +199,7 @@
   float: none;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
+  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
   line-height: 19px;
   color: @navbarLinkColor;
   text-decoration: none;
@@ -262,7 +261,7 @@
   padding: 7px 10px;
   margin-left: 5px;
   margin-right: 5px;
-  .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
+  .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
 }
 .navbar .btn-navbar .icon-bar {
diff --git a/less/navs.less b/less/navs.less
index 1034837396..66d985a933 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -43,6 +43,7 @@
 }
 
 
+
 // NAV LIST
 // --------
 
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index 614c6905c2..ab724e407c 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -43,7 +43,7 @@
 
   // Modals
   .modal {
-    position: absolute;
+    position: fixed;
     top:   10px;
     left:  10px;
     right: 10px;
diff --git a/less/subnav.less b/less/subnav.less
new file mode 100644
index 0000000000..4f68269a7e
--- /dev/null
+++ b/less/subnav.less
@@ -0,0 +1,96 @@
+/* Subnav
+-------------------------------------------------- */
+
+
+/* Base
+------------------------- */
+.subnav {
+  width: 100%;
+  height: @subnavHeight;
+  #gradient > .vertical(@subnavBackgroundHighlight, @subnavBackground);
+  border: 1px solid @subnavBorder;
+  -webkit-border-radius: @subnavBorderRadius;
+     -moz-border-radius: @subnavBorderRadius;
+          border-radius: @subnavBorderRadius;
+}
+
+
+/* Nav links
+------------------------- */
+.subnav .nav {
+  margin-bottom: 0; // remove default bottom margin of .nav
+}
+.subnav .nav > li {
+  float: left;
+}
+.subnav .nav > li > a {
+  padding: 8px 12px;
+  line-height: 20px;
+  border-left: 1px solid @subnavBackgroundHighlight;
+  border-right: 1px solid @subnavBorder;
+}
+.subnav .nav > .active > a,
+.subnav .nav > .active > a:hover {
+  padding-left: 13px;
+  color: #777;
+  background-color: #e9e9e9;
+  border-right-color: #ddd;
+  border-left: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+     -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+          box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+}
+.subnav .nav > .active > a .caret,
+.subnav .nav > .active > a:hover .caret {
+  border-top-color: #777;
+}
+.subnav .nav > li:first-child > a,
+.subnav .nav > li:first-child > a:hover {
+  border-left: 0;
+  padding-left: 12px;
+  -webkit-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius;
+     -moz-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius;
+          border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius;
+}
+.subnav .nav > li:last-child > a {
+  border-right: 0;
+}
+
+/* Dropdown menus get matching border-radius
+.subnav .dropdown-menu {
+  -webkit-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius;
+     -moz-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius;
+          border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius;
+}
+
+
+/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
+@media (min-width: 980px) {
+  .subnav-fixed {
+    position: fixed;
+    top: 40px;
+    left: 0;
+    right: 0;
+    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
+    border-color: #d5d5d5;
+    border-width: 0 0 1px; /* drop the border on the fixed edges */
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
+  }
+  .subnav-fixed .nav {
+    max-width: 780px;
+    margin: 0 auto;
+    padding: 0 1px;
+  }
+  .subnav .nav > li:first-child > a,
+  .subnav .nav > li:first-child > a:hover {
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+  }
+}
diff --git a/less/variables.less b/less/variables.less
index 25a032781d..0060e207ca 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -168,6 +168,16 @@
 @navbarBrandColor:                @navbarLinkColor;
 
 
+// Subnav
+// -------------------------
+@subnavHeight:                    36px;
+@subnavBackground:                #eeeeee;
+@subnavBackgroundHighlight:       #f5f5f5;
+
+@subnavBorder:                    #e5e5e5;
+@subnavBorderRadius:              4px;
+
+
 // Hero unit
 // -------------------------
 @heroUnitBackground:              @grayLighter;