From b0bd1d82035c22031e75627df0d3853c9d1e285c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 10:45:29 -0800 Subject: [PATCH] add bottom-up styles to the dropdown menus --- bootstrap.css | 7 ++++++- bootstrap.min.css | 3 ++- lib/dropdowns.less | 7 +++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index cce7b74424..ee88e9d4c6 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -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: Tue Jan 24 10:43:08 PST 2012 + * Date: Tue Jan 24 10:45:20 PST 2012 */ article, aside, @@ -1417,6 +1417,11 @@ i { *border-right-width: 2px; *border-bottom-width: 2px; } +.dropdown-menu.bottom-up { + top: auto; + bottom: 100%; + margin-bottom: 2px; +} .dropdown-menu .divider { height: 1px; margin: 5px 1px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 60d30609a5..563efd8fa9 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -302,7 +302,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} .dropdown .caret{margin-top:8px;margin-left:2px;*margin-top:7px;} .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.dropdown-menu{position:absolute;top:100%;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:4px 0;margin: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;-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);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;*border-right-width:2px;*border-bottom-width:2px;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} +.dropdown-menu{position:absolute;top:100%;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:4px 0;margin: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;-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);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;*border-right-width:2px;*border-bottom-width:2px;}.dropdown-menu.bottom-up{top:auto;bottom:100%;margin-bottom:2px;} +.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} .dropdown-menu a{display:block;padding:3px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;white-space:nowrap;} .dropdown-menu li>a:hover,.dropdown-menu .active>a,.dropdown-menu .active>a:hover{color:#ffffff;text-decoration:none;background-color:#0088cc;} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} diff --git a/lib/dropdowns.less b/lib/dropdowns.less index e2c32f1804..06114b254d 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -54,6 +54,13 @@ *border-right-width: 2px; *border-bottom-width: 2px; + // Allow for dropdowns to go bottom up (aka, dropup-menu) + &.bottom-up { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } + // Dividers (basically an hr) within the dropdown .divider { height: 1px;