Dropdowns overhaul:

1. Removed broken and unused dropup examples from the navs/pills docs
2. New defaults for dropdown menus: all corners are rounded and always 1px offset from top unless otherwise specified
3. Refined active and open states for button dropdowns by adding a darker background color for each button variation when opened; also changed the opened dropdown-toggle's inset shadow to match that of an :active button
4. Generalized .dropdown.open to just .open, thus removing a few lines from button-groups.less.
5. Annnnnnnnnd I think that's it.

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 0e3c888c95f539d05dcebb8e26c864dc87e69cbc..f503a116898e89b2bf5e739d1c6d9c1df38fd4a3 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index de6963138d13e1ceb6d8cedd9f85951e08b51df6..af94c7402b0f63eeb5d06861e4e0465eb87a2d72 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1800,7 +1800,7 @@ table .span24 {
   margin-left: 2px;
 }
 .dropdown:hover .caret,
-.open.dropdown .caret {
+.open .caret {
   opacity: 1;
   filter: alpha(opacity=100);
 }
@@ -1813,16 +1813,14 @@ table .span24 {
   display: none;
   min-width: 160px;
   padding: 4px 0;
-  margin: 0;
+  margin: 1px 0 0;
   list-style: none;
   background-color: #ffffff;
-  border-color: #ccc;
-  border-color: rgba(0, 0, 0, 0.2);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-border-radius: 0 0 5px 5px;
-  -moz-border-radius: 0 0 5px 5px;
-  border-radius: 0 0 5px 5px;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@@ -1861,15 +1859,10 @@ table .span24 {
   text-decoration: none;
   background-color: #0088cc;
 }
-.dropdown.open {
+.open {
   *z-index: 1000;
 }
-.dropdown.open .dropdown-toggle {
-  color: #ffffff;
-  background: #ccc;
-  background: rgba(0, 0, 0, 0.3);
-}
-.dropdown.open .dropdown-menu {
+.open .dropdown-menu {
   display: block;
 }
 .pull-right .dropdown-menu {
@@ -2382,21 +2375,32 @@ input[type="submit"].btn.btn-mini {
   padding-left: 12px;
   padding-right: 12px;
 }
-.btn-group.open {
-  *z-index: 1000;
-}
-.btn-group.open .dropdown-menu {
-  display: block;
-  margin-top: 1px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
 .btn-group.open .dropdown-toggle {
   background-image: none;
-  -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.btn-group.open .btn.dropdown-toggle {
+  background-color: #e6e6e6;
+}
+.btn-group.open .btn-primary.dropdown-toggle {
+  background-color: #0055cc;
+}
+.btn-group.open .btn-warning.dropdown-toggle {
+  background-color: #f89406;
+}
+.btn-group.open .btn-danger.dropdown-toggle {
+  background-color: #bd362f;
+}
+.btn-group.open .btn-success.dropdown-toggle {
+  background-color: #51a351;
+}
+.btn-group.open .btn-info.dropdown-toggle {
+  background-color: #2f96b4;
+}
+.btn-group.open .btn-inverse.dropdown-toggle {
+  background-color: #222222;
 }
 .btn .caret {
   margin-top: 7px;
@@ -2635,10 +2639,10 @@ input[type="submit"].btn.btn-mini {
 .nav-pills.nav-stacked > li:last-child > a {
   margin-bottom: 1px;
 }
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu {
-  margin-top: 1px;
-  border-width: 1px;
+.nav-tabs .dropdown-menu {
+  -webkit-border-radius: 0 0 5px 5px;
+  -moz-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
 }
 .nav-pills .dropdown-menu {
   -webkit-border-radius: 4px;

diff --git a/docs/components.html b/docs/components.html
index 518c38ddbffd78a9460c528dffd95f27f709da4f..be1143877746fbf31229edb1e858c862a43819bb 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -639,16 +639,6 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
-        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
@@ -681,16 +671,6 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
-        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3ca43a2063e8e78554de086d9747b2591d113a34..25741608b531494b1423ee463a8ddda0675f7b68 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -563,16 +563,6 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">{{_i}}Action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-            <li class="divider"></li>
-            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-          </ul>
-        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
@@ -605,16 +595,6 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">{{_i}}Action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-            <li class="divider"></li>
-            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-          </ul>
-        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;

diff --git a/less/button-groups.less b/less/button-groups.less
index d3e7a74905f4892603ce5afea982de7f7f674de4..627c067e7f6e00f05767b808360c4da1e97958d9 100644 (file)
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -114,24 +114,41 @@
 }
 
 .btn-group.open {
-  // IE7's z-index only goes to the nearest positioned ancestor, which would
-  // make the menu appear below buttons that appeared later on the page
-  *z-index: @zindexDropdown;
-
-  // Reposition menu on open and round all corners
-  .dropdown-menu {
-    display: block;
-    margin-top: 1px;
-    .border-radius(5px);
-  }
 
+  // The clickable button for toggling the menu
+  // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
-    @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+    @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
     .box-shadow(@shadow);
   }
+
+  // Keep the hover's background when dropdown is open
+  .btn.dropdown-toggle {
+    background-color: @btnBackgroundHighlight;
+  }
+  .btn-primary.dropdown-toggle {
+    background-color: @btnPrimaryBackgroundHighlight;
+  }
+  .btn-warning.dropdown-toggle {
+    background-color: @btnWarningBackgroundHighlight;
+  }
+  .btn-danger.dropdown-toggle {
+    background-color: @btnDangerBackgroundHighlight;
+  }
+  .btn-success.dropdown-toggle {
+    background-color: @btnSuccessBackgroundHighlight;
+  }
+  .btn-info.dropdown-toggle {
+    background-color: @btnInfoBackgroundHighlight;
+  }
+  .btn-inverse.dropdown-toggle {
+    background-color: @btnInverseBackgroundHighlight;
+  }
 }
 
+
+
 // Reposition the caret
 .btn .caret {
   margin-top: 7px;

diff --git a/less/dropdowns.less b/less/dropdowns.less
index 58cdb612fd949a0f8ba977cf2097fbed00e0e312..b54e7eeec66275cf688f5ea7db2c9b098bdf60f1 100644 (file)
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -34,7 +34,7 @@
   margin-left: 2px;
 }
 .dropdown:hover .caret,
-.open.dropdown .caret {
+.open .caret {
   .opacity(100);
 }
 
@@ -49,14 +49,12 @@
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
   padding: 4px 0;
-  margin: 0; // override default ul
+  margin: 1px 0 0; // override default ul
   list-style: none;
   background-color: @dropdownBackground;
-  border-color: #ccc;
-  border-color: rgba(0,0,0,.2);
-  border-style: solid;
-  border-width: 1px;
-  .border-radius(0 0 5px 5px);
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  .border-radius(5px);
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
@@ -99,22 +97,18 @@
 
 // Open state for the dropdown
 // ---------------------------
-.dropdown.open {
+.open {
   // IE7's z-index only goes to the nearest positioned ancestor, which would
   // make the menu appear below buttons that appeared later on the page
   *z-index: @zindexDropdown;
 
-  .dropdown-toggle {
-    color: @white;
-    background: #ccc;
-    background: rgba(0,0,0,.3);
-  }
   .dropdown-menu {
     display: block;
   }
 }
 
 // Right aligned dropdowns
+// ---------------------------
 .pull-right .dropdown-menu {
   left: auto;
   right: 0;

diff --git a/less/navbar.less b/less/navbar.less
index cda6721e3a40f604227343fedc41c549dbdfc46a..eed0ff2d6898c2232c4552db9250f0abbae0959f 100644 (file)
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -262,8 +262,6 @@
 
 // Menu position and menu carets
 .navbar .dropdown-menu {
-  margin-top: 1px;
-  .border-radius(4px);
   &:before {
     content: '';
     display: inline-block;
@@ -304,7 +302,7 @@
 }
 // Dropdown toggle caret
 .navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
+.navbar .nav .open .caret {
   border-top-color: @white;
   border-bottom-color: @white;
 }

diff --git a/less/navs.less b/less/navs.less
index 489e1bfeb882668e63424369f0e1e3dfa5e1a54d..ae187e1fb692d04610b30d781a22d0a360ae14ef 100644 (file)
--- a/less/navs.less
+++ b/less/navs.less
@@ -98,12 +98,10 @@
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
-
 // Make the list-items overlay the bottom border
 .nav-tabs > li {
   margin-bottom: -1px;
 }
-
 // Actual tabs (as links)
 .nav-tabs > li > a {
   padding-top: 8px;
@@ -125,6 +123,7 @@
   cursor: default;
 }
 
+
 // PILLS
 // -----
 
@@ -189,14 +188,11 @@
 // DROPDOWNS
 // ---------
 
-// Position the menu
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu {
-  margin-top: 1px;
-  border-width: 1px;
+.nav-tabs .dropdown-menu {
+  .border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
 }
 .nav-pills .dropdown-menu {
-  .border-radius(4px);
+  .border-radius(4px); // make rounded corners match the pills
 }
 
 // Default dropdown links