Skip to content

Commit fa7ad81

Browse files
kasperpkasperp
committed
moved dropdown btns to dev branch
1 parent 12d7fc8 commit fa7ad81

File tree

5 files changed

+214
-21
lines changed

5 files changed

+214
-21
lines changed

‎bootstrap.css

Lines changed: 48 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 13:02: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).
@@ -1496,6 +1496,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
14961496
}
14971497
li.menu, .dropdown {
14981498
position: relative;
1499+
display: inline-block;
14991500
}
15001501
a.menu:after, .dropdown-toggle:after {
15011502
width: 0;
@@ -1514,6 +1515,42 @@ a.menu:after, .dropdown-toggle:after {
15141515
-moz-opacity: 0.5;
15151516
opacity: 0.5;
15161517
}
1518+
.btn.dropdown-toggle, .btn.large.dropdown-toggle, .btn.small.dropdown-toggle {
1519+
padding-right: 11px;
1520+
}
1521+
.btn.dropdown-toggle:after {
1522+
filter: alpha(opacity=80);
1523+
-khtml-opacity: 0.8;
1524+
-moz-opacity: 0.8;
1525+
opacity: 0.8;
1526+
margin-top: 6px;
1527+
margin-left: 10px;
1528+
}
1529+
.btn.small.dropdown-toggle:after {
1530+
margin-top: 4px;
1531+
}
1532+
.btn.danger.dropdown-toggle:after,
1533+
.btn.info.dropdown-toggle:after,
1534+
.btn.primary.dropdown-toggle:after,
1535+
.btn.success.dropdown-toggle:after {
1536+
border-top-color: #ffffff;
1537+
}
1538+
.btn.dropdown-toggle:after {
1539+
border-top-color: #999;
1540+
}
1541+
.btn.dropdown-toggle {
1542+
overflow: hidden;
1543+
}
1544+
.btn.dropdown-toggle + .dropdown-menu {
1545+
top: 29px;
1546+
border-width: 1px;
1547+
-webkit-border-radius: 6px 6px 6px 6px;
1548+
-moz-border-radius: 6px 6px 6px 6px;
1549+
border-radius: 6px 6px 6px 6px;
1550+
}
1551+
.btn.dropdown-toggle.large + .dropdown-menu {
1552+
top: 38px;
1553+
}
15171554
.menu-dropdown, .dropdown-menu {
15181555
background-color: #ffffff;
15191556
float: left;
@@ -1583,17 +1620,20 @@ a.menu:after, .dropdown-toggle:after {
15831620
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
15841621
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
15851622
}
1586-
.open .menu,
1587-
.dropdown.open .menu,
1588-
.open .dropdown-toggle,
1589-
.dropdown.open .dropdown-toggle {
1623+
li.dropdown.open .dropdown-toggle {
15901624
color: #ffffff;
15911625
background: #ccc;
15921626
background: rgba(0, 0, 0, 0.3);
15931627
}
1594-
.open .menu-dropdown,
1595-
.dropdown.open .menu-dropdown,
1596-
.open .dropdown-menu,
1628+
div.dropdown.open .dropdown-toggle {
1629+
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1630+
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1631+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1632+
background-position: 0 -15px;
1633+
}
1634+
.dropdown.open {
1635+
z-index: 100;
1636+
}
15971637
.dropdown.open .dropdown-menu {
15981638
display: block;
15991639
}

‎bootstrap.min.css

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

‎docs/index.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1352,6 +1352,101 @@ <h4>Links</h4>
13521352
<h4>Buttons</h4>
13531353
<div class="well">
13541354
<button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
1355+
</div>
1356+
<h4>Dropdown buttons</h4>
1357+
<div class="well">
1358+
<div class="dropdown" data-dropdown="dropdown">
1359+
<a href="#" class="btn primary dropdown-toggle">Primary</a>
1360+
<ul class="dropdown-menu">
1361+
<li><a href="#">Secondary link</a></li>
1362+
<li><a href="#">Something else here</a></li>
1363+
<li class="divider"></li>
1364+
<li><a href="#">Another link</a></li>
1365+
</ul>
1366+
</div>
1367+
1368+
<div class="dropdown" data-dropdown="dropdown">
1369+
<a href="#" class="btn dropdown-toggle">Default</a>
1370+
<ul class="dropdown-menu">
1371+
<li><a href="#">Secondary link</a></li>
1372+
<li><a href="#">Something else here</a></li>
1373+
<li class="divider"></li>
1374+
<li><a href="#">Another link</a></li>
1375+
</ul>
1376+
</div>
1377+
1378+
<div class="dropdown" data-dropdown="dropdown">
1379+
<a href="#" class="btn info dropdown-toggle">Info</a>
1380+
<ul class="dropdown-menu">
1381+
<li><a href="#">Secondary link</a></li>
1382+
<li><a href="#">Something else here</a></li>
1383+
<li class="divider"></li>
1384+
<li><a href="#">Another link</a></li>
1385+
</ul>
1386+
</div>
1387+
1388+
<div class="dropdown" data-dropdown="dropdown">
1389+
<a href="#" class="btn success dropdown-toggle">Success</a>
1390+
<ul class="dropdown-menu">
1391+
<li><a href="#">Secondary link</a></li>
1392+
<li><a href="#">Something else here</a></li>
1393+
<li class="divider"></li>
1394+
<li><a href="#">Another link</a></li>
1395+
</ul>
1396+
</div>
1397+
1398+
<div class="dropdown" data-dropdown="dropdown">
1399+
<a href="#" class="btn danger dropdown-toggle">Danger</a>
1400+
<ul class="dropdown-menu">
1401+
<li><a href="#">Secondary link</a></li>
1402+
<li><a href="#">Something else here</a></li>
1403+
<li class="divider"></li>
1404+
<li><a href="#">Another link</a></li>
1405+
</ul>
1406+
</div>
1407+
</div>
1408+
1409+
<h3>Alternate sizes</h3>
1410+
<div class="well">
1411+
<div class="dropdown" data-dropdown="dropdown">
1412+
<a href="#" class="btn primary large dropdown-toggle">Primary 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 class="dropdown" data-dropdown="dropdown">
1421+
<a href="#" class="btn large dropdown-toggle">Action</a>
1422+
<ul class="dropdown-menu">
1423+
<li><a href="#">Secondary link</a></li>
1424+
<li><a href="#">Something else here</a></li>
1425+
<li class="divider"></li>
1426+
<li><a href="#">Another link</a></li>
1427+
</ul>
1428+
</div>
1429+
</div>
1430+
<div class="well" style="padding: 16px 19px;">
1431+
<div class="dropdown" data-dropdown="dropdown">
1432+
<a href="#" class="btn primary small dropdown-toggle">Primary action</a>
1433+
<ul class="dropdown-menu">
1434+
<li><a href="#">Secondary link</a></li>
1435+
<li><a href="#">Something else here</a></li>
1436+
<li class="divider"></li>
1437+
<li><a href="#">Another link</a></li>
1438+
</ul>
1439+
</div>
1440+
<div class="dropdown" data-dropdown="dropdown">
1441+
<a href="#" class="btn small dropdown-toggle">Action</a>
1442+
<ul class="dropdown-menu">
1443+
<li><a href="#">Secondary link</a></li>
1444+
<li><a href="#">Something else here</a></li>
1445+
<li class="divider"></li>
1446+
<li><a href="#">Another link</a></li>
1447+
</ul>
1448+
</div>
1449+
</div>
13551450
</div>
13561451
</div>
13571452
</div><!-- /row -->

‎js/bootstrap-dropdown.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
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')
3131

3232
clearMenus()
@@ -42,7 +42,7 @@
4242
var d = 'a.menu, .dropdown-toggle'
4343

4444
function clearMenus() {
45-
$(d).parent('li').removeClass('open')
45+
$(d).parent('li,.dropdown').removeClass('open')
4646
}
4747

4848
$(function () {

‎lib/patterns.less

Lines changed: 58 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@
219219
li.menu,
220220
.dropdown {
221221
position: relative;
222+
display: inline-block;
222223
}
223224
// The link that is clicked to toggle the dropdown
224225
// a.menu for backwards compatibility
@@ -237,6 +238,49 @@ a.menu:after,
237238
border-top: 4px solid @white;
238239
.opacity(50);
239240
}
241+
242+
// Define different toggle styles (colors, borders, margin and padding) for dropdown buttons
243+
.btn.dropdown-toggle,
244+
.btn.large.dropdown-toggle,
245+
.btn.small.dropdown-toggle {
246+
padding-right: 11px;
247+
}
248+
249+
.btn.dropdown-toggle:after {
250+
.opacity(80);
251+
margin-top: 6px;
252+
margin-left: 10px;
253+
}
254+
255+
.btn.small.dropdown-toggle:after {
256+
margin-top: 4px;
257+
}
258+
259+
.btn.danger.dropdown-toggle:after,
260+
.btn.info.dropdown-toggle:after,
261+
.btn.primary.dropdown-toggle:after,
262+
.btn.success.dropdown-toggle:after, {
263+
border-top-color: @white;
264+
}
265+
266+
.btn.dropdown-toggle:after {
267+
border-top-color: #999;
268+
}
269+
270+
.btn.dropdown-toggle {
271+
overflow: hidden;
272+
273+
+ .dropdown-menu {
274+
top: 29px;
275+
border-width: 1px;
276+
.border-radius(6px 6px 6px 6px);
277+
}
278+
279+
&.large + .dropdown-menu {
280+
top: 38px;
281+
}
282+
}
283+
240284
// The dropdown menu (ul)
241285
// .menu-dropdown for backwards compatibility
242286
.menu-dropdown,
@@ -301,22 +345,28 @@ a.menu:after,
301345
}
302346
}
303347

304-
// Open state for the dropdown
305-
// .open for backwards compatibility
306-
.open,
307-
.dropdown.open {
308-
// .menu for backwards compatibility
309-
.menu,
348+
// Open state for the dropdown, inside an li (in tabs or topbars)
349+
li.dropdown.open {
310350
.dropdown-toggle {
311351
color: @white;
312352
background: #ccc;
313353
background: rgba(0,0,0,.3);
314354
}
315-
// .menu-dropdown for backwards compatibility
316-
.menu-dropdown,
355+
}
356+
// Open state for dropdown buttons, inside an div.
357+
div.dropdown.open {
358+
.dropdown-toggle {
359+
@shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
360+
.box-shadow(@shadow);
361+
background-position: 0 -15px;
362+
}
363+
}
364+
// Common open state styles
365+
.dropdown.open {
317366
.dropdown-menu {
318367
display: block;
319368
}
369+
z-index: 100;
320370
}
321371

322372

0 commit comments

Comments
 (0)