Skip to content

Dropdown button in dev branch #467

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kasperp wants to merge 4 commits into from
Closed

Dropdown button in dev branch #467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fa7ad81
moved dropdown btns to dev branch
kasperp Oct 23, 2011
3144025
pulled 'inline-block' from li.menu to .dropdown
kasperp Oct 23, 2011
7c57da5
fixed rogue end tag
kasperp Oct 24, 2011
67f8add
added disabled check to bootstrap-dropdown.js
kasperp Oct 24, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 50 additions & 8 deletions bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -1497,6 +1497,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
li.menu, .dropdown {
position: relative;
}
.dropdown {
display: inline-block;
Copy link
Copy Markdown
Member

@mdo mdo Oct 23, 2011

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this inline-block for just .dropdown that surrounds the buttons? If so, let's just pull that out and only put it on the .dropdown if possible.

Copy link
Copy Markdown
Contributor Author

@kasperp kasperp Oct 23, 2011

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't do that as I figured that li.menu was for backwards compatibility and eventually would be removed, but no problem I'll pull it out.

}
a.menu:after, .dropdown-toggle:after {
width: 0;
height: 0;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
13 changes: 11 additions & 2 deletions bootstrap.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

96 changes: 96 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1353,6 +1353,102 @@ <h4>Buttons</h4>
<div class="well">
<button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
</div>

<h4>Dropdown buttons</h4>
<div class="well">
<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn primary dropdown-toggle">Primary</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>

<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn dropdown-toggle">Default</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>

<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn info dropdown-toggle">Info</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>

<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn success dropdown-toggle">Success</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>

<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn danger dropdown-toggle">Danger</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
</div>

<h3>Alternate sizes</h3>
<div class="well">
<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn primary large dropdown-toggle">Primary action</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn large dropdown-toggle">Action</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
</div>

<div class="well">
<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn primary small dropdown-toggle">Primary action</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
<div class="dropdown" data-dropdown="dropdown">
<a href="#" class="btn small dropdown-toggle">Action</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /row -->
</section>
Expand Down
9 changes: 7 additions & 2 deletions js/bootstrap-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -42,7 +47,7 @@
var d = 'a.menu, .dropdown-toggle'

function clearMenus() {
$(d).parent('li').removeClass('open')
$(d).parent('li,.dropdown').removeClass('open')
}

$(function () {
Expand Down
70 changes: 62 additions & 8 deletions lib/patterns.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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;
}


Expand Down