diff --git a/bootstrap.css b/bootstrap.css
index ebb216c05561..fda66372bef1 100644
--- a/bootstrap.css
+++ b/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: Thu Oct 20 09:12:21 PDT 2011
+ * Date: Sun Oct 23 19:48:04 CEST 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1497,6 +1497,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
li.menu, .dropdown {
position: relative;
}
+.dropdown {
+ display: inline-block;
+}
a.menu:after, .dropdown-toggle:after {
width: 0;
height: 0;
@@ -1514,6 +1517,42 @@ a.menu:after, .dropdown-toggle:after {
-moz-opacity: 0.5;
opacity: 0.5;
}
+.btn.dropdown-toggle, .btn.large.dropdown-toggle, .btn.small.dropdown-toggle {
+ padding-right: 11px;
+}
+.btn.dropdown-toggle:after {
+ filter: alpha(opacity=80);
+ -khtml-opacity: 0.8;
+ -moz-opacity: 0.8;
+ opacity: 0.8;
+ margin-top: 6px;
+ margin-left: 10px;
+}
+.btn.small.dropdown-toggle:after {
+ margin-top: 4px;
+}
+.btn.danger.dropdown-toggle:after,
+.btn.info.dropdown-toggle:after,
+.btn.primary.dropdown-toggle:after,
+.btn.success.dropdown-toggle:after {
+ border-top-color: #ffffff;
+}
+.btn.dropdown-toggle:after {
+ border-top-color: #999;
+}
+.btn.dropdown-toggle {
+ overflow: hidden;
+}
+.btn.dropdown-toggle + .dropdown-menu {
+ top: 29px;
+ border-width: 1px;
+ -webkit-border-radius: 6px 6px 6px 6px;
+ -moz-border-radius: 6px 6px 6px 6px;
+ border-radius: 6px 6px 6px 6px;
+}
+.btn.dropdown-toggle.large + .dropdown-menu {
+ top: 38px;
+}
.menu-dropdown, .dropdown-menu {
background-color: #ffffff;
float: left;
@@ -1583,17 +1622,20 @@ a.menu:after, .dropdown-toggle:after {
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
}
-.open .menu,
-.dropdown.open .menu,
-.open .dropdown-toggle,
-.dropdown.open .dropdown-toggle {
+li.dropdown.open .dropdown-toggle {
color: #ffffff;
background: #ccc;
background: rgba(0, 0, 0, 0.3);
}
-.open .menu-dropdown,
-.dropdown.open .menu-dropdown,
-.open .dropdown-menu,
+div.dropdown.open .dropdown-toggle {
+ -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+ background-position: 0 -15px;
+}
+.dropdown.open {
+ z-index: 100;
+}
.dropdown.open .dropdown-menu {
display: block;
}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index f736833f1a71..0f5727fd4937 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -251,12 +251,21 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
li.menu,.dropdown{position:relative;}
+.dropdown{display:inline-block;}
a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
+.btn.dropdown-toggle,.btn.large.dropdown-toggle,.btn.small.dropdown-toggle{padding-right:11px;}
+.btn.dropdown-toggle:after{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;margin-top:6px;margin-left:10px;}
+.btn.small.dropdown-toggle:after{margin-top:4px;}
+.btn.danger.dropdown-toggle:after,.btn.info.dropdown-toggle:after,.btn.primary.dropdown-toggle:after,.btn.success.dropdown-toggle:after{border-top-color:#ffffff;}
+.btn.dropdown-toggle:after{border-top-color:#999;}
+.btn.dropdown-toggle{overflow:hidden;}.btn.dropdown-toggle+.dropdown-menu{top:29px;border-width:1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
+.btn.dropdown-toggle.large+.dropdown-menu{top:38px;}
.menu-dropdown,.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover,.topbar .dropdown-menu a.hover,.dropdown-menu a.hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
-.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
-.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
+li.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
+div.dropdown.open .dropdown-toggle{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);background-position:0 -15px;}
+.dropdown.open{z-index:100;}.dropdown.open .dropdown-menu{display:block;}
.tabs,.pills{margin:0 0 18px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
diff --git a/docs/index.html b/docs/index.html
index d29fdd2921d7..207ecdea1ead 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1353,6 +1353,102 @@ Buttons
+
+ Dropdown buttons
+
+
+ Alternate sizes
+
+
+
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index 68a3db5f2052..351b9c529c40 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -26,8 +26,13 @@
$.fn.dropdown = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || d, 'click', function (e) {
- var li = $(this).parent('li')
+ var li = $(this).parent('li,.dropdown')
, isActive = li.hasClass('open')
+ , isDisabled = $(this).hasClass('disabled')
+
+ if (isDisabled) {
+ return false
+ }
clearMenus()
!isActive && li.toggleClass('open')
@@ -42,7 +47,7 @@
var d = 'a.menu, .dropdown-toggle'
function clearMenus() {
- $(d).parent('li').removeClass('open')
+ $(d).parent('li,.dropdown').removeClass('open')
}
$(function () {
diff --git a/lib/patterns.less b/lib/patterns.less
index 22d2bc014e97..adccbef755e4 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -220,6 +220,11 @@ li.menu,
.dropdown {
position: relative;
}
+
+.dropdown {
+ display: inline-block;
+}
+
// The link that is clicked to toggle the dropdown
// a.menu for backwards compatibility
a.menu:after,
@@ -237,6 +242,49 @@ a.menu:after,
border-top: 4px solid @white;
.opacity(50);
}
+
+// Define different toggle styles (colors, borders, margin and padding) for dropdown buttons
+.btn.dropdown-toggle,
+.btn.large.dropdown-toggle,
+.btn.small.dropdown-toggle {
+ padding-right: 11px;
+}
+
+.btn.dropdown-toggle:after {
+ .opacity(80);
+ margin-top: 6px;
+ margin-left: 10px;
+}
+
+.btn.small.dropdown-toggle:after {
+ margin-top: 4px;
+}
+
+.btn.danger.dropdown-toggle:after,
+.btn.info.dropdown-toggle:after,
+.btn.primary.dropdown-toggle:after,
+.btn.success.dropdown-toggle:after, {
+ border-top-color: @white;
+}
+
+.btn.dropdown-toggle:after {
+ border-top-color: #999;
+}
+
+.btn.dropdown-toggle {
+ overflow: hidden;
+
+ + .dropdown-menu {
+ top: 29px;
+ border-width: 1px;
+ .border-radius(6px 6px 6px 6px);
+ }
+
+ &.large + .dropdown-menu {
+ top: 38px;
+ }
+}
+
// The dropdown menu (ul)
// .menu-dropdown for backwards compatibility
.menu-dropdown,
@@ -301,22 +349,28 @@ a.menu:after,
}
}
-// Open state for the dropdown
-// .open for backwards compatibility
-.open,
-.dropdown.open {
- // .menu for backwards compatibility
- .menu,
+// Open state for the dropdown, inside an li (in tabs or topbars)
+li.dropdown.open {
.dropdown-toggle {
color: @white;
background: #ccc;
background: rgba(0,0,0,.3);
}
- // .menu-dropdown for backwards compatibility
- .menu-dropdown,
+}
+// Open state for dropdown buttons, inside an div.
+div.dropdown.open {
+ .dropdown-toggle {
+ @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+ background-position: 0 -15px;
+ }
+}
+// Common open state styles
+.dropdown.open {
.dropdown-menu {
display: block;
}
+ z-index: 100;
}