overhaul navbar behavior in responsive css

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 6886105cb9a206cc876c379d815c113f890e8116..8b1d98b5c67d9985dc387eba6ed01352d51b96fc 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -3,60 +3,6 @@
   visibility: hidden;
 }
 @media (max-width: 480px) {
-  .navbar .nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 180px;
-    padding-top: 40px;
-    list-style: none;
-  }
-  .navbar .nav, .navbar .nav > li:last-child a {
-    -webkit-border-radius: 0 0 4px 0;
-    -moz-border-radius: 0 0 4px 0;
-    border-radius: 0 0 4px 0;
-  }
-  .navbar .nav > li {
-    float: none;
-    display: none;
-  }
-  .navbar .nav > li > a {
-    float: none;
-    background-color: #222;
-  }
-  .navbar .nav > .active {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .navbar .nav > .active > a {
-    background-color: transparent;
-  }
-  .navbar .nav > .active > a:hover {
-    background-color: #333;
-  }
-  .navbar .nav > .active > a:after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-top: 8px;
-    margin-left: 6px;
-    text-indent: -99999px;
-    vertical-align: top;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid #ffffff;
-    opacity: 1;
-    filter: alpha(opacity=100);
-    content: "↓";
-  }
-  .navbar .nav:hover > li {
-    display: block;
-  }
-  .navbar .nav:hover > li > a:hover {
-    background-color: #333;
-  }
   .form-horizontal .control-group > label {
     float: none;
     width: auto;
@@ -88,12 +34,6 @@
   }
 }
 @media (max-width: 768px) {
-  .navbar-fixed {
-    position: absolute;
-  }
-  .navbar-fixed .nav {
-    float: none;
-  }
   .container {
     width: auto;
     padding: 0 20px;
@@ -187,6 +127,96 @@
     margin-left: 788px;
   }
 }
+@media (max-width: 940px) {
+  body {
+    padding-top: 0;
+  }
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: 36px;
+  }
+  .navbar-inner {
+    padding: 10px;
+    background-image: none;
+  }
+  .navbar .container {
+    padding: 0;
+  }
+  .navbar .brand {
+    float: none;
+    display: block;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin: 0;
+  }
+  .navbar .nav {
+    float: none;
+    margin: 9px 0;
+  }
+  .navbar .nav > li {
+    float: none;
+  }
+  .navbar .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > .vertical-divider {
+    display: none;
+  }
+  .navbar .nav > li > a, .navbar .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: #999999;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+  }
+  .navbar .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
+    background-color: #222222;
+  }
+  .navbar .dropdown-menu {
+    position: static;
+    display: block;
+    float: none;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+  .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
+    display: none;
+  }
+  .navbar .dropdown-menu .divider {
+    display: none;
+  }
+  .navbar-form, .navbar-search {
+    float: none;
+    padding: 9px 15px;
+    margin: 9px 0;
+    border-top: 1px solid #222222;
+    border-bottom: 1px solid #222222;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+  .navbar .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  .navbar-static .navbar-inner {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
 /*
 @media (min-width: 1210px) {
 

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2ae5325b2327437618a2a7518e6656a216af1ccb..fb95729d905ab8506a94644394fe813f0996d46d 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Jan 27 15:27:51 PST 2012
+ * Date: Fri Jan 27 16:25:59 PST 2012
  */
 article,
 aside,
@@ -2004,7 +2004,7 @@ table .span12 {
   color: #ffffff;
   text-decoration: none;
 }
-.navbar .nav .active > a {
+.navbar .nav .active > a, .navbar .nav .active > a:hover {
   color: #ffffff;
   text-decoration: none;
   background-color: #222222;

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index bc3c9710640fb3eee0eb488427c6f9c569be006b..cf4b1962f18481c5068283c84c716a0c244dd643 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -723,6 +723,11 @@ form.well {
 
 @media (max-width: 768px) {
 
+  /* Remove any padding from the body */
+  body {
+    padding-top: 0;
+  }
+
   /* Subnav */
   .subnav {
     position: static;
@@ -745,13 +750,6 @@ form.well {
     border-top: 1px solid #e5e5e5;
   }
 
-  /* Adjust the jumbotron */
-  .jumbotron .benefits {
-    position: relative;
-    width: auto;
-    margin: 36px 0;
-  }
-
   /* Popovers */
   .large-bird {
     display: none;
@@ -787,9 +785,14 @@ form.well {
   .jumbotron h1 {
     font-size: 54px;
   }
+  .masthead p {
+    font-size: 25px;
+    line-height: 36px;
+  }
   .jumbotron h1,
   .jumbotron p {
     margin-right: 0;
+    margin-left: 0;
   }
 
 }
@@ -797,15 +800,27 @@ form.well {
 
 @media (min-width: 768px) and (max-width: 940px) {
 
+  /* Remove any padding from the body */
+  body {
+    padding-top: 0;
+  }
+
   /* Scale down the jumbotron content */
   .jumbotron h1 {
     font-size: 72px;
   }
 
-  /* Provide enough space on right-hand side for benefits list */
-  .jumbotron h1,
-  .jumbotron p {
-    margin-right: 40%;
+}
+
+@media (max-width: 940px) {
+  
+  /* Unfloat brand */
+  .navbar-fixed-top .brand {
+    float: none;
+    margin-left: 0;
+    padding-left: 15px;
+    padding-right: 15px;
   }
+
 }
 

diff --git a/less/navbar.less b/less/navbar.less
index 602e26ae86655308d0898a4b67e351a0c8c7ca1c..07e2bed8bd70b8e770a3c2ec713407a9479f1b90 100644 (file)
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -165,7 +165,8 @@
 }
 
 // Active nav items
-.navbar .nav .active > a {
+.navbar .nav .active > a,
+.navbar .nav .active > a:hover {
   color: @navbarLinkColorHover;
   text-decoration: none;
   background-color: @navbarBackground;

diff --git a/less/responsive.less b/less/responsive.less
index 917fdc3e2f01ac7b66aada222f79913a95ba2eef..8bfe705b4d4aea37de95d8157fe1c4fe8663ec3f 100644 (file)
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -15,7 +15,7 @@
 // ------------------
 
 // Hide from screenreaders and browsers
-// Credit: HTML5BP
+// Credit: HTML5 Boilerplate
 .hidden {
   display: none;
   visibility: hidden;
@@ -27,62 +27,6 @@
 
 @media (max-width: 480px) {
 
-  // Make the nav work for small devices
-  .navbar {
-    .nav {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 180px;
-      padding-top: 40px;
-      list-style: none;
-    }
-    .nav,
-    .nav > li:last-child a {
-      .border-radius(0 0 4px 0);
-    }
-    .nav > li {
-      float: none;
-      display: none;
-    }
-    .nav > li > a {
-      float: none;
-      background-color: #222;
-    }
-    .nav > .active {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    .nav > .active > a {
-      background-color: transparent;
-    }
-    .nav > .active > a:hover {
-      background-color: #333;
-    }
-    .nav > .active > a:after {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      margin-top: 8px;
-      margin-left: 6px;
-      text-indent: -99999px;
-      vertical-align: top;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 4px solid @white;
-      .opacity(100);
-      content: "↓";
-    }
-    .nav:hover > li {
-      display: block;
-    }
-    .nav:hover > li > a:hover {
-      background-color: #333;
-    }
-  }
-
   // Remove the horizontal form styles
   .form-horizontal .control-group > label {
     float: none;
@@ -124,15 +68,9 @@
 // --------------------------------------------------
 
 @media (max-width: 768px) {
-  
-  // Unfix the navbar
-  .navbar-fixed {
-    position: absolute;
-  }
-  .navbar-fixed .nav {
-    float: none;
-  }
 
+  // GRID & CONTAINERS
+  // -----------------
   // Remove width from containers
   .container {
     width: auto;
@@ -209,6 +147,111 @@
 
 }
 
+
+// TABLETS AND BELOW
+// -----------------
+@media (max-width: 940px) {
+
+  // UNFIX THE TOPBAR
+  // ----------------
+  // Remove any padding from the body
+  body {
+    padding-top: 0;
+  }
+  // Unfix the navbar
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: @baseLineHeight * 2;
+  }
+  .navbar-inner {
+    padding: 10px;
+    background-image: none;
+  }
+  .navbar .container {
+    padding: 0;
+  }
+  // Account for brand name
+  .navbar .brand {
+    float: none;
+    display: block;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin: 0;
+  }
+  // Block-level the nav
+  .navbar .nav {
+    float: none;
+    margin: (@baseLineHeight / 2) 0;
+  }
+  .navbar .nav > li {
+    float: none;
+  }
+  .navbar .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > .vertical-divider {
+    display: none;
+  }
+  // Nav and dropdown links in navbar
+  .navbar .nav > li > a,
+  .navbar .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: @navbarLinkColor;
+    .border-radius(3px);
+  }
+  .navbar .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > li > a:hover,
+  .navbar .dropdown-menu a:hover {
+    background-color: @navbarBackground;
+  }
+  // Dropdowns in the navbar
+  .navbar .dropdown-menu {
+    position: static;
+    display: block;
+    float: none;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    .border-radius(0);
+    .box-shadow(none);
+  }
+  .navbar .dropdown-menu:before,
+  .navbar .dropdown-menu:after {
+    display: none;
+  }
+  .navbar .dropdown-menu .divider {
+    display: none;
+  }
+  // Forms in navbar
+  .navbar-form,
+  .navbar-search {
+    float: none;
+    padding: (@baseLineHeight / 2) 15px;
+    margin: (@baseLineHeight / 2) 0;
+    border-top: 1px solid @navbarBackground;
+    border-bottom: 1px solid @navbarBackground;
+    @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+    .box-shadow(@shadow);
+  }
+  // Pull right (secondary) nav content
+  .navbar .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  // Static navbar
+  .navbar-static .navbar-inner {
+    padding-left:  10px;
+    padding-right: 10px;
+  }
+
+}
+
+
 // LARGE DESKTOP & UP
 // ------------------
 /*