Start some nav and dropdown cleanup

* Remove border-radii on top of tab dropdown menus
* Remove the .dropdown and .dropup styles and instead place  on all
* Use  on dropdown carets intead of separately applying margin with a top alignment
* Some other misc cleanup

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7e47655b5c8f036e5777b00e26359552c76f6d77..249645d9ca0d05e3a2a745380f90d58663bef07f 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2693,13 +2693,7 @@ input[type="button"].btn-block {
   content: "\e160";
 }
 
-.dropup,
-.dropdown {
-  position: relative;
-}
-
-.dropdown-toggle:active,
-.open .dropdown-toggle {
+.open > a {
   outline: 0;
 }
 
@@ -2707,18 +2701,15 @@ input[type="button"].btn-block {
   display: inline-block;
   width: 0;
   height: 0;
-  vertical-align: top;
+  margin-top: 8px;
+  margin-left: 2px;
+  vertical-align: middle;
   border-top: 4px solid #000;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
 }
 
-.dropdown .caret {
-  margin-top: 8px;
-  margin-left: 2px;
-}
-
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -3140,6 +3131,7 @@ button.close {
 }
 
 .nav > li {
+  position: relative;
   display: block;
 }
 
@@ -3320,6 +3312,11 @@ button.close {
   display: block;
 }
 
+.nav-tabs .dropdown-menu {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
 /*
 // Prevent IE8 from misplacing imgs
 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989

diff --git a/less/dropdowns.less b/less/dropdowns.less
index c4fd8598bb5d0bd405fdfd2164c3317d365afb56..45242fb68ca879d85d443e418c8914d2e0ac9bb2 100644 (file)
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -2,14 +2,8 @@
 // Dropdown menus
 // --------------------------------------------------
 
-
-// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-.dropup,
-.dropdown {
-  position: relative;
-}
-.dropdown-toggle:active,
-.open .dropdown-toggle {
+// Remove the outline when :focus is triggered
+.open > a {
   outline: 0;
 }
 
@@ -19,19 +13,14 @@
   display: inline-block;
   width: 0;
   height: 0;
-  vertical-align: top;
+  margin-left: 2px;
+  vertical-align: middle;
   border-top:   4px solid #000;
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
   content: "";
 }
 
-// Place the caret
-.dropdown .caret {
-  margin-top: 8px;
-  margin-left: 2px;
-}
-
 // The dropdown menu (ul)
 // ----------------------
 .dropdown-menu {

diff --git a/less/navs.less b/less/navs.less
index 649eef92bdc1fb84e97673577a5fcb8923b60da8..7e8bcf87c99468f87cdc90774a074946340d954f 100644 (file)
--- a/less/navs.less
+++ b/less/navs.less
@@ -12,8 +12,11 @@
   padding-left: 0; // Override default ul/ol
   list-style: none;
   .clearfix();
+
   > li {
+    position: relative;
     display: block;
+
     > a {
       position: relative;
       display: block;
@@ -44,7 +47,7 @@
       cursor: default;
     }
     // Space the headers out when they follow another list item (link)
-    &+ .nav-header {
+    + .nav-header {
       margin-top: 9px;
     }
   }
@@ -215,6 +218,15 @@
 
 
 
+// Dropdowns
+// -------------------------
+
+.nav-tabs .dropdown-menu {
+  // Remove the top rounded corners here since there is a hard edge above the menu
+  .border-top-radius(0);
+}
+
+
 /*
 // Prevent IE8 from misplacing imgs
 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989