0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00

clean up and simplify support for bottom navbar by automagically turning dropdowns into dropups

This commit is contained in:
Mark Otto 2012-02-21 22:09:51 -08:00
parent 20221a67c2
commit 8bd67bb124
6 changed files with 8 additions and 46 deletions

Binary file not shown.

View File

@ -1867,12 +1867,12 @@ table .span24 {
left: auto; left: auto;
right: 0; right: 0;
} }
.dropup .caret { .dropup .caret, .navbar-fixed-bottom .dropdown .caret {
border-top: 0; border-top: 0;
border-bottom: 4px solid #000000; border-bottom: 4px solid #000000;
content: "\2191"; content: "\2191";
} }
.dropup .dropdown-menu { .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 1px; margin-bottom: 1px;
@ -2945,14 +2945,14 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
top: -6px; top: -6px;
left: 10px; left: 10px;
} }
.navbar .dropdown-menu.bottom-up:before { .navbar-fixed-bottom .dropdown-menu:before {
border-top: 7px solid #ccc; border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2); border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0; border-bottom: 0;
bottom: -7px; bottom: -7px;
top: auto; top: auto;
} }
.navbar .dropdown-menu.bottom-up:after { .navbar-fixed-bottom .dropdown-menu:after {
border-top: 6px solid #ffffff; border-top: 6px solid #ffffff;
border-bottom: 0; border-bottom: 0;
bottom: -6px; bottom: -6px;

View File

@ -898,16 +898,6 @@
<li><a href="#">One more separated link</a></li> <li><a href="#">One more separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
<form class="navbar-search pull-left" action=""> <form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search"> <input type="text" class="search-query span2" placeholder="Search">
@ -915,16 +905,6 @@
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="divider-vertical"></li> <li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">

View File

@ -822,16 +822,6 @@
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li> <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_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>
<form class="navbar-search pull-left" action=""> <form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search"> <input type="text" class="search-query span2" placeholder="Search">
@ -839,16 +829,6 @@
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></li> <li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="divider-vertical"></li> <li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_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>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">

View File

@ -126,7 +126,9 @@
// Allow for dropdowns to go bottom up (aka, dropup-menu) // Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------ // ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro. // Just add .dropup after the standard .dropdown class and you're set, bro.
.dropup { // TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret // Reverse the caret
.caret { .caret {
border-top: 0; border-top: 0;

View File

@ -275,7 +275,7 @@
} }
} }
// Menu position and menu caret support for dropups via extra bottom-up class // Menu position and menu caret support for dropups via extra bottom-up class
.navbar .dropdown-menu.bottom-up { .navbar-fixed-bottom .dropdown-menu {
&:before { &:before {
border-top: 7px solid #ccc; border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2); border-top-color: rgba(0, 0, 0, 0.2);