mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
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.
This commit is contained in:
Mark Otto
Binary file not shown.
Vendored
+37
-33
@@ -1800,7 +1800,7 @@ table .span24 {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.dropdown:hover .caret,
|
||||
.open.dropdown .caret {
|
||||
.open .caret {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
@@ -1813,16 +1813,14 @@ table .span24 {
|
||||
display: none;
|
||||
min-width: 160px;
|
||||
padding: 4px 0;
|
||||
margin: 0;
|
||||
margin: 1px 0 0;
|
||||
list-style: none;
|
||||
background-color: #ffffff;
|
||||
border-color: #ccc;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-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);
|
||||
@@ -1861,15 +1859,10 @@ table .span24 {
|
||||
text-decoration: none;
|
||||
background-color: #0088cc;
|
||||
}
|
||||
.dropdown.open {
|
||||
.open {
|
||||
*z-index: 1000;
|
||||
}
|
||||
.dropdown.open .dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background: #ccc;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.dropdown.open .dropdown-menu {
|
||||
.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.pull-right .dropdown-menu {
|
||||
@@ -2382,21 +2375,32 @@ input[type="submit"].btn.btn-mini {
|
||||
padding-left: 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 {
|
||||
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);
|
||||
-moz-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 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 2px 4px 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 {
|
||||
margin-top: 7px;
|
||||
@@ -2635,10 +2639,10 @@ input[type="submit"].btn.btn-mini {
|
||||
.nav-pills.nav-stacked > li:last-child > a {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.nav-tabs .dropdown-menu,
|
||||
.nav-pills .dropdown-menu {
|
||||
margin-top: 1px;
|
||||
border-width: 1px;
|
||||
.nav-tabs .dropdown-menu {
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.nav-pills .dropdown-menu {
|
||||
-webkit-border-radius: 4px;
|
||||
|
||||
@@ -639,16 +639,6 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</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>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs">
|
||||
@@ -681,16 +671,6 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</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>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills">
|
||||
|
||||
-20
@@ -563,16 +563,6 @@
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</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>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs">
|
||||
@@ -605,16 +595,6 @@
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</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>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills">
|
||||
|
||||
Reference in New Issue
Block a user