diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 0e3c888c9..f503a1168 100644
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 de6963138..af94c7402 100644
--- 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 518c38ddb..be1143877 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -639,16 +639,6 @@
Separated link
-
- Dropup
-
-
<ul class="nav nav-tabs">
@@ -681,16 +671,6 @@
Separated link
-
- Dropup
-
-
<ul class="nav nav-pills">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3ca43a206..25741608b 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -563,16 +563,6 @@
{{_i}}Separated link{{/i}}
-
- {{_i}}Dropup{{/i}}
-
-
<ul class="nav nav-tabs">
@@ -605,16 +595,6 @@
{{_i}}Separated link{{/i}}
-
- {{_i}}Dropup{{/i}}
-
-
<ul class="nav nav-pills">
diff --git a/less/button-groups.less b/less/button-groups.less
index d3e7a7490..627c067e7 100644
--- 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 58cdb612f..b54e7eeec 100644
--- 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 cda6721e3..eed0ff2d6 100644
--- 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 489e1bfeb..ae187e1fb 100644
--- 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