From fa7ad816205c4013610c2075bf649ce343558e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20B=C3=B8gebjerg=20Pedersen?= Date: Sun, 23 Oct 2011 13:03:09 +0200 Subject: [PATCH 1/4] moved dropdown btns to dev branch --- bootstrap.css | 56 +++++++++++++++++++---- bootstrap.min.css | 14 ++++-- docs/index.html | 95 ++++++++++++++++++++++++++++++++++++++++ js/bootstrap-dropdown.js | 4 +- lib/patterns.less | 66 ++++++++++++++++++++++++---- 5 files changed, 214 insertions(+), 21 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ebb216c05561..ff085c82715f 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 13:02: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). @@ -1496,6 +1496,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { } li.menu, .dropdown { position: relative; + display: inline-block; } a.menu:after, .dropdown-toggle:after { width: 0; @@ -1514,6 +1515,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 +1620,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..e4ebfbb1637e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -250,13 +250,21 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;} .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;} +li.menu,.dropdown{position:relative;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..7dd542923376 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1352,6 +1352,101 @@

Links

Buttons

  +
+

Dropdown buttons

+
+
+ Primary + +
+ +
+ Default + +
+ +
+ Info + +
+ +
+ Success + +
+ +
+ Danger + +
+
+ +

Alternate sizes

+
+
+ Primary action + +
+
+ Action + +
+
+
+
+ Primary action + +
+
+ Action + +
+
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 68a3db5f2052..ccb8221bb094 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -26,7 +26,7 @@ $.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') clearMenus() @@ -42,7 +42,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..a278b6ba2fed 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -219,6 +219,7 @@ li.menu, .dropdown { position: relative; + display: inline-block; } // The link that is clicked to toggle the dropdown // a.menu for backwards compatibility @@ -237,6 +238,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 +345,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; } From 31440250bc7a75d66de3db9033c20da28c879ca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20B=C3=B8gebjerg=20Pedersen?= Date: Sun, 23 Oct 2011 19:53:31 +0200 Subject: [PATCH 2/4] pulled 'inline-block' from li.menu to .dropdown --- bootstrap.css | 4 +++- bootstrap.min.css | 3 ++- lib/patterns.less | 4 ++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ff085c82715f..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: Sun Oct 23 13:02:04 CEST 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). @@ -1496,6 +1496,8 @@ table .headerSortUp.purple, table .headerSortDown.purple { } li.menu, .dropdown { position: relative; +} +.dropdown { display: inline-block; } a.menu:after, .dropdown-toggle:after { diff --git a/bootstrap.min.css b/bootstrap.min.css index e4ebfbb1637e..0f5727fd4937 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -250,7 +250,8 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;} .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;display:inline-block;} +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;} diff --git a/lib/patterns.less b/lib/patterns.less index a278b6ba2fed..adccbef755e4 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -219,8 +219,12 @@ 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, From 7c57da5f94a66129cae1e8c0884ba9fa40509420 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20B=C3=B8gebjerg=20Pedersen?= Date: Mon, 24 Oct 2011 07:25:13 +0200 Subject: [PATCH 3/4] fixed rogue end tag --- docs/index.html | 181 ++++++++++++++++++++++++------------------------ 1 file changed, 91 insertions(+), 90 deletions(-) diff --git a/docs/index.html b/docs/index.html index 7dd542923376..207ecdea1ead 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1353,100 +1353,101 @@

Buttons

 
-

Dropdown buttons

-
-
- Primary - -
- -
- Default - -
- -
- Info - -
- -
- Success - -
- -
- Danger - -
-
- -

Alternate sizes

+ +

Dropdown buttons

- Primary action - -
+ Primary + +
+ +
+ Default + +
+ +
+ Info + +
+ +
+ Success + +
+
- Action - -
+ Danger + + -
-
- Primary action - -
-
- Action - -
-
+ +

Alternate sizes

+
+
+ Primary action + +
+
+ Action + +
+
+ +
+
+ Primary action + +
+
+ Action + +
From 67f8added6fc5203d83190f1dea94c68206d1805 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20B=C3=B8gebjerg=20Pedersen?= Date: Mon, 24 Oct 2011 07:33:20 +0200 Subject: [PATCH 4/4] added disabled check to bootstrap-dropdown.js --- js/bootstrap-dropdown.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index ccb8221bb094..351b9c529c40 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -28,6 +28,11 @@ $(this).delegate(selector || d, 'click', function (e) { var li = $(this).parent('li,.dropdown') , isActive = li.hasClass('open') + , isDisabled = $(this).hasClass('disabled') + + if (isDisabled) { + return false + } clearMenus() !isActive && li.toggleClass('open')