Skip to content

B
bootstrap
Commit ac64d940 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Dropdowns overhaul: 

1. Removed broken and unused dropup examples from the navs/pills docs
2. New defaults for dropdown menus: all corners are rounded and always 1px offset from top unless otherwise specified
3. Refined active and open states for button dropdowns by adding a darker background color for each button variation when opened; also changed the opened dropdown-toggle's inset shadow to match that of an :active button
4. Generalized .dropdown.open to just .open, thus removing a few lines from button-groups.less.
5. Annnnnnnnnd I think that's it.
parent 50b2245b
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 108 deletions
docs/assets/css/bootstrap.css
View file @ ac64d940
...@@ -1800,7 +1800,7 @@ table .span24 { ...@@ -1800,7 +1800,7 @@ table .span24 {
margin-left: 2px; margin-left: 2px;
} }
.dropdown:hover .caret, .dropdown:hover .caret,
.open.dropdown .caret { .open .caret {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
} }
...@@ -1813,16 +1813,14 @@ table .span24 { ...@@ -1813,16 +1813,14 @@ table .span24 {
display: none; display: none;
min-width: 160px; min-width: 160px;
padding: 4px 0; padding: 4px 0;
margin: 0; margin: 1px 0 0;
list-style: none; list-style: none;
background-color: #ffffff; background-color: #ffffff;
border-color: #ccc; border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-style: solid; -webkit-border-radius: 5px;
border-width: 1px; -moz-border-radius: 5px;
-webkit-border-radius: 0 0 5px 5px; border-radius: 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
...@@ -1861,15 +1859,10 @@ table .span24 { ...@@ -1861,15 +1859,10 @@ table .span24 {
text-decoration: none; text-decoration: none;
background-color: #0088cc; background-color: #0088cc;
} }
.dropdown.open { .open {
*z-index: 1000; *z-index: 1000;
} }
.dropdown.open .dropdown-toggle { .open .dropdown-menu {
color: #ffffff;
background: #ccc;
background: rgba(0, 0, 0, 0.3);
}
.dropdown.open .dropdown-menu {
display: block; display: block;
} }
.pull-right .dropdown-menu { .pull-right .dropdown-menu {
...@@ -2382,21 +2375,32 @@ input[type="submit"].btn.btn-mini { ...@@ -2382,21 +2375,32 @@ input[type="submit"].btn.btn-mini {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
.btn-group.open {
*z-index: 1000;
}
.btn-group.open .dropdown-menu {
display: block;
margin-top: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
background-image: none; background-image: none;
-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group.open .btn.dropdown-toggle {
background-color: #e6e6e6;
}
.btn-group.open .btn-primary.dropdown-toggle {
background-color: #0055cc;
}
.btn-group.open .btn-warning.dropdown-toggle {
background-color: #f89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
background-color: #bd362f;
}
.btn-group.open .btn-success.dropdown-toggle {
background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
background-color: #222222;
} }
.btn .caret { .btn .caret {
margin-top: 7px; margin-top: 7px;
...@@ -2635,10 +2639,10 @@ input[type="submit"].btn.btn-mini { ...@@ -2635,10 +2639,10 @@ input[type="submit"].btn.btn-mini {
.nav-pills.nav-stacked > li:last-child > a { .nav-pills.nav-stacked > li:last-child > a {
margin-bottom: 1px; margin-bottom: 1px;
} }
.nav-tabs .dropdown-menu, .nav-tabs .dropdown-menu {
.nav-pills .dropdown-menu { -webkit-border-radius: 0 0 5px 5px;
margin-top: 1px; -moz-border-radius: 0 0 5px 5px;
border-width: 1px; border-radius: 0 0 5px 5px;
} }
.nav-pills .dropdown-menu { .nav-pills .dropdown-menu {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
......
docs/components.html
View file @ ac64d940
...@@ -639,16 +639,6 @@ ...@@ -639,16 +639,6 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt; &lt;ul class="nav nav-tabs"&gt;
...@@ -681,16 +671,6 @@ ...@@ -681,16 +671,6 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
......
docs/templates/pages/components.mustache
View file @ ac64d940
...@@ -563,16 +563,6 @@ ...@@ -563,16 +563,6 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt; &lt;ul class="nav nav-tabs"&gt;
...@@ -605,16 +595,6 @@ ...@@ -605,16 +595,6 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
......
less/button-groups.less
View file @ ac64d940
...@@ -114,24 +114,41 @@ ...@@ -114,24 +114,41 @@
} }
.btn-group.open { .btn-group.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
*z-index: @zindexDropdown;
// Reposition menu on open and round all corners
.dropdown-menu {
display: block;
margin-top: 1px;
.border-radius(5px);
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle { .dropdown-toggle {
background-image: none; background-image: none;
@shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow); .box-shadow(@shadow);
} }
// Keep the hover's background when dropdown is open
.btn.dropdown-toggle {
background-color: @btnBackgroundHighlight;
}
.btn-primary.dropdown-toggle {
background-color: @btnPrimaryBackgroundHighlight;
}
.btn-warning.dropdown-toggle {
background-color: @btnWarningBackgroundHighlight;
}
.btn-danger.dropdown-toggle {
background-color: @btnDangerBackgroundHighlight;
}
.btn-success.dropdown-toggle {
background-color: @btnSuccessBackgroundHighlight;
}
.btn-info.dropdown-toggle {
background-color: @btnInfoBackgroundHighlight;
}
.btn-inverse.dropdown-toggle {
background-color: @btnInverseBackgroundHighlight;
}
} }
// Reposition the caret // Reposition the caret
.btn .caret { .btn .caret {
margin-top: 7px; margin-top: 7px;
......
less/dropdowns.less
View file @ ac64d940
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
margin-left: 2px; margin-left: 2px;
} }
.dropdown:hover .caret, .dropdown:hover .caret,
.open.dropdown .caret { .open .caret {
.opacity(100); .opacity(100);
} }
...@@ -49,14 +49,12 @@ ...@@ -49,14 +49,12 @@
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
min-width: 160px; min-width: 160px;
padding: 4px 0; padding: 4px 0;
margin: 0; // override default ul margin: 1px 0 0; // override default ul
list-style: none; list-style: none;
background-color: @dropdownBackground; background-color: @dropdownBackground;
border-color: #ccc; border: 1px solid #ccc;
border-color: rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.2);
border-style: solid; .border-radius(5px);
border-width: 1px;
.border-radius(0 0 5px 5px);
.box-shadow(0 5px 10px rgba(0,0,0,.2)); .box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-moz-background-clip: padding; -moz-background-clip: padding;
...@@ -99,22 +97,18 @@ ...@@ -99,22 +97,18 @@
// Open state for the dropdown // Open state for the dropdown
// --------------------------- // ---------------------------
.dropdown.open { .open {
// IE7's z-index only goes to the nearest positioned ancestor, which would // IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page // make the menu appear below buttons that appeared later on the page
*z-index: @zindexDropdown; *z-index: @zindexDropdown;
.dropdown-toggle {
color: @white;
background: #ccc;
background: rgba(0,0,0,.3);
}
.dropdown-menu { .dropdown-menu {
display: block; display: block;
} }
} }
// Right aligned dropdowns // Right aligned dropdowns
// ---------------------------
.pull-right .dropdown-menu { .pull-right .dropdown-menu {
left: auto; left: auto;
right: 0; right: 0;
......
less/navbar.less
View file @ ac64d940
...@@ -262,8 +262,6 @@ ...@@ -262,8 +262,6 @@
// Menu position and menu carets // Menu position and menu carets
.navbar .dropdown-menu { .navbar .dropdown-menu {
margin-top: 1px;
.border-radius(4px);
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
...@@ -304,7 +302,7 @@ ...@@ -304,7 +302,7 @@
} }
// Dropdown toggle caret // Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret, .navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret { .navbar .nav .open .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white; border-bottom-color: @white;
} }
......
less/navs.less
View file @ ac64d940
...@@ -98,12 +98,10 @@ ...@@ -98,12 +98,10 @@
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
.nav-tabs > li { .nav-tabs > li {
margin-bottom: -1px; margin-bottom: -1px;
} }
// Actual tabs (as links) // Actual tabs (as links)
.nav-tabs > li > a { .nav-tabs > li > a {
padding-top: 8px; padding-top: 8px;
...@@ -125,6 +123,7 @@ ...@@ -125,6 +123,7 @@
cursor: default; cursor: default;
} }
// PILLS // PILLS
// ----- // -----
...@@ -189,14 +188,11 @@ ...@@ -189,14 +188,11 @@
// DROPDOWNS // DROPDOWNS
// --------- // ---------
// Position the menu .nav-tabs .dropdown-menu {
.nav-tabs .dropdown-menu, .border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
.nav-pills .dropdown-menu {
margin-top: 1px;
border-width: 1px;
} }
.nav-pills .dropdown-menu { .nav-pills .dropdown-menu {
.border-radius(4px); .border-radius(4px); // make rounded corners match the pills
} }
// Default dropdown links // Default dropdown links
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment