Skip to content

Commit efe53b4

Browse files
mdomdo
committed
Merge branch 'dropdown-btn-dev' of https://github.com/kasperp/bootstrap into kasperp-dropdown-btn-dev
2 parents 41ada30 + 67f8add commit efe53b4

File tree

5 files changed

+227
-21
lines changed

5 files changed

+227
-21
lines changed

‎bootstrap.css

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* http://www.apache.org/licenses/LICENSE-2.0
77
*
88
* Designed and built with all the love in the world @twitter by @mdo and @fat.
9-
* Date: Thu Oct 20 09:12:21 PDT 2011
9+
* Date: Sun Oct 23 19:48:04 CEST 2011
1010
*/
1111
/* Reset.less
1212
* 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 {
14971497
li.menu, .dropdown {
14981498
position: relative;
14991499
}
1500+
.dropdown {
1501+
display: inline-block;
1502+
}
15001503
a.menu:after, .dropdown-toggle:after {
15011504
width: 0;
15021505
height: 0;
@@ -1514,6 +1517,42 @@ a.menu:after, .dropdown-toggle:after {
15141517
-moz-opacity: 0.5;
15151518
opacity: 0.5;
15161519
}
1520+
.btn.dropdown-toggle, .btn.large.dropdown-toggle, .btn.small.dropdown-toggle {
1521+
padding-right: 11px;
1522+
}
1523+
.btn.dropdown-toggle:after {
1524+
filter: alpha(opacity=80);
1525+
-khtml-opacity: 0.8;
1526+
-moz-opacity: 0.8;
1527+
opacity: 0.8;
1528+
margin-top: 6px;
1529+
margin-left: 10px;
1530+
}
1531+
.btn.small.dropdown-toggle:after {
1532+
margin-top: 4px;
1533+
}
1534+
.btn.danger.dropdown-toggle:after,
1535+
.btn.info.dropdown-toggle:after,
1536+
.btn.primary.dropdown-toggle:after,
1537+
.btn.success.dropdown-toggle:after {
1538+
border-top-color: #ffffff;
1539+
}
1540+
.btn.dropdown-toggle:after {
1541+
border-top-color: #999;
1542+
}
1543+
.btn.dropdown-toggle {
1544+
overflow: hidden;
1545+
}
1546+
.btn.dropdown-toggle + .dropdown-menu {
1547+
top: 29px;
1548+
border-width: 1px;
1549+
-webkit-border-radius: 6px 6px 6px 6px;
1550+
-moz-border-radius: 6px 6px 6px 6px;
1551+
border-radius: 6px 6px 6px 6px;
1552+
}
1553+
.btn.dropdown-toggle.large + .dropdown-menu {
1554+
top: 38px;
1555+
}
15171556
.menu-dropdown, .dropdown-menu {
15181557
background-color: #ffffff;
15191558
float: left;
@@ -1583,17 +1622,20 @@ a.menu:after, .dropdown-toggle:after {
15831622
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
15841623
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
15851624
}
1586-
.open .menu,
1587-
.dropdown.open .menu,
1588-
.open .dropdown-toggle,
1589-
.dropdown.open .dropdown-toggle {
1625+
li.dropdown.open .dropdown-toggle {
15901626
color: #ffffff;
15911627
background: #ccc;
15921628
background: rgba(0, 0, 0, 0.3);
15931629
}
1594-
.open .menu-dropdown,
1595-
.dropdown.open .menu-dropdown,
1596-
.open .dropdown-menu,
1630+
div.dropdown.open .dropdown-toggle {
1631+
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1632+
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1633+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1634+
background-position: 0 -15px;
1635+
}
1636+
.dropdown.open {
1637+
z-index: 100;
1638+
}
15971639
.dropdown.open .dropdown-menu {
15981640
display: block;
15991641
}

‎bootstrap.min.css

Lines changed: 11 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1343,6 +1343,102 @@ <h4>Buttons</h4>
13431343
<div class="well">
13441344
<button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
13451345
</div>
1346+
1347+
<h4>Dropdown buttons</h4>
1348+
<div class="well">
1349+
<div class="dropdown" data-dropdown="dropdown">
1350+
<a href="#" class="btn primary dropdown-toggle">Primary</a>
1351+
<ul class="dropdown-menu">
1352+
<li><a href="#">Secondary link</a></li>
1353+
<li><a href="#">Something else here</a></li>
1354+
<li class="divider"></li>
1355+
<li><a href="#">Another link</a></li>
1356+
</ul>
1357+
</div>
1358+
1359+
<div class="dropdown" data-dropdown="dropdown">
1360+
<a href="#" class="btn dropdown-toggle">Default</a>
1361+
<ul class="dropdown-menu">
1362+
<li><a href="#">Secondary link</a></li>
1363+
<li><a href="#">Something else here</a></li>
1364+
<li class="divider"></li>
1365+
<li><a href="#">Another link</a></li>
1366+
</ul>
1367+
</div>
1368+
1369+
<div class="dropdown" data-dropdown="dropdown">
1370+
<a href="#" class="btn info dropdown-toggle">Info</a>
1371+
<ul class="dropdown-menu">
1372+
<li><a href="#">Secondary link</a></li>
1373+
<li><a href="#">Something else here</a></li>
1374+
<li class="divider"></li>
1375+
<li><a href="#">Another link</a></li>
1376+
</ul>
1377+
</div>
1378+
1379+
<div class="dropdown" data-dropdown="dropdown">
1380+
<a href="#" class="btn success dropdown-toggle">Success</a>
1381+
<ul class="dropdown-menu">
1382+
<li><a href="#">Secondary link</a></li>
1383+
<li><a href="#">Something else here</a></li>
1384+
<li class="divider"></li>
1385+
<li><a href="#">Another link</a></li>
1386+
</ul>
1387+
</div>
1388+
1389+
<div class="dropdown" data-dropdown="dropdown">
1390+
<a href="#" class="btn danger dropdown-toggle">Danger</a>
1391+
<ul class="dropdown-menu">
1392+
<li><a href="#">Secondary link</a></li>
1393+
<li><a href="#">Something else here</a></li>
1394+
<li class="divider"></li>
1395+
<li><a href="#">Another link</a></li>
1396+
</ul>
1397+
</div>
1398+
</div>
1399+
1400+
<h3>Alternate sizes</h3>
1401+
<div class="well">
1402+
<div class="dropdown" data-dropdown="dropdown">
1403+
<a href="#" class="btn primary large dropdown-toggle">Primary action</a>
1404+
<ul class="dropdown-menu">
1405+
<li><a href="#">Secondary link</a></li>
1406+
<li><a href="#">Something else here</a></li>
1407+
<li class="divider"></li>
1408+
<li><a href="#">Another link</a></li>
1409+
</ul>
1410+
</div>
1411+
<div class="dropdown" data-dropdown="dropdown">
1412+
<a href="#" class="btn large dropdown-toggle">Action</a>
1413+
<ul class="dropdown-menu">
1414+
<li><a href="#">Secondary link</a></li>
1415+
<li><a href="#">Something else here</a></li>
1416+
<li class="divider"></li>
1417+
<li><a href="#">Another link</a></li>
1418+
</ul>
1419+
</div>
1420+
</div>
1421+
1422+
<div class="well">
1423+
<div class="dropdown" data-dropdown="dropdown">
1424+
<a href="#" class="btn primary small dropdown-toggle">Primary action</a>
1425+
<ul class="dropdown-menu">
1426+
<li><a href="#">Secondary link</a></li>
1427+
<li><a href="#">Something else here</a></li>
1428+
<li class="divider"></li>
1429+
<li><a href="#">Another link</a></li>
1430+
</ul>
1431+
</div>
1432+
<div class="dropdown" data-dropdown="dropdown">
1433+
<a href="#" class="btn small dropdown-toggle">Action</a>
1434+
<ul class="dropdown-menu">
1435+
<li><a href="#">Secondary link</a></li>
1436+
<li><a href="#">Something else here</a></li>
1437+
<li class="divider"></li>
1438+
<li><a href="#">Another link</a></li>
1439+
</ul>
1440+
</div>
1441+
</div>
13461442
</div>
13471443
</div><!-- /row -->
13481444
</section>
@@ -1997,4 +2093,4 @@ <h3>Ways to compile</h3>
19972093
<script src="assets/js/application.js"></script>
19982094

19992095
</body>
2000-
</html>
2096+
</html>

‎js/bootstrap-dropdown.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,13 @@
2626
$.fn.dropdown = function ( selector ) {
2727
return this.each(function () {
2828
$(this).delegate(selector || d, 'click', function (e) {
29-
var li = $(this).parent('li')
29+
var li = $(this).parent('li,.dropdown')
3030
, isActive = li.hasClass('open')
31+
, isDisabled = $(this).hasClass('disabled')
32+
33+
if (isDisabled) {
34+
return false
35+
}
3136

3237
clearMenus()
3338
!isActive && li.toggleClass('open')
@@ -42,7 +47,7 @@
4247
var d = 'a.menu, .dropdown-toggle'
4348

4449
function clearMenus() {
45-
$(d).parent('li').removeClass('open')
50+
$(d).parent('li,.dropdown').removeClass('open')
4651
}
4752

4853
$(function () {

‎lib/patterns.less

Lines changed: 62 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,11 @@ li.menu,
220220
.dropdown {
221221
position: relative;
222222
}
223+
224+
.dropdown {
225+
display: inline-block;
226+
}
227+
223228
// The link that is clicked to toggle the dropdown
224229
// a.menu for backwards compatibility
225230
a.menu:after,
@@ -237,6 +242,49 @@ a.menu:after,
237242
border-top: 4px solid @white;
238243
.opacity(50);
239244
}
245+
246+
// Define different toggle styles (colors, borders, margin and padding) for dropdown buttons
247+
.btn.dropdown-toggle,
248+
.btn.large.dropdown-toggle,
249+
.btn.small.dropdown-toggle {
250+
padding-right: 11px;
251+
}
252+
253+
.btn.dropdown-toggle:after {
254+
.opacity(80);
255+
margin-top: 6px;
256+
margin-left: 10px;
257+
}
258+
259+
.btn.small.dropdown-toggle:after {
260+
margin-top: 4px;
261+
}
262+
263+
.btn.danger.dropdown-toggle:after,
264+
.btn.info.dropdown-toggle:after,
265+
.btn.primary.dropdown-toggle:after,
266+
.btn.success.dropdown-toggle:after, {
267+
border-top-color: @white;
268+
}
269+
270+
.btn.dropdown-toggle:after {
271+
border-top-color: #999;
272+
}
273+
274+
.btn.dropdown-toggle {
275+
overflow: hidden;
276+
277+
+ .dropdown-menu {
278+
top: 29px;
279+
border-width: 1px;
280+
.border-radius(6px 6px 6px 6px);
281+
}
282+
283+
&.large + .dropdown-menu {
284+
top: 38px;
285+
}
286+
}
287+
240288
// The dropdown menu (ul)
241289
// .menu-dropdown for backwards compatibility
242290
.menu-dropdown,
@@ -301,22 +349,28 @@ a.menu:after,
301349
}
302350
}
303351

304-
// Open state for the dropdown
305-
// .open for backwards compatibility
306-
.open,
307-
.dropdown.open {
308-
// .menu for backwards compatibility
309-
.menu,
352+
// Open state for the dropdown, inside an li (in tabs or topbars)
353+
li.dropdown.open {
310354
.dropdown-toggle {
311355
color: @white;
312356
background: #ccc;
313357
background: rgba(0,0,0,.3);
314358
}
315-
// .menu-dropdown for backwards compatibility
316-
.menu-dropdown,
359+
}
360+
// Open state for dropdown buttons, inside an div.
361+
div.dropdown.open {
362+
.dropdown-toggle {
363+
@shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
364+
.box-shadow(@shadow);
365+
background-position: 0 -15px;
366+
}
367+
}
368+
// Common open state styles
369+
.dropdown.open {
317370
.dropdown-menu {
318371
display: block;
319372
}
373+
z-index: 100;
320374
}
321375

322376

0 commit comments

Comments
 (0)