Skip to content

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

Merge branch '2.0/fork/components/dropup' of... 

Merge branch '2.0/fork/components/dropup' of https://github.com/buraktuyan/bootstrap into buraktuyan-2.0/fork/components/dropup

Conflicts:
	docs/assets/css/bootstrap.css
	docs/components.html
	docs/templates/pages/components.mustache
	less/navbar.less
parents b4cc6c74 19b70dc4
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 29 deletions
docs/assets/css/bootstrap.css
View file @ 20221a67
......@@ -1825,10 +1825,9 @@ table .span24 {
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.dropdown-menu.bottom-up {
top: auto;
bottom: 100%;
margin-bottom: 2px;
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
......@@ -1868,6 +1867,16 @@ table .span24 {
left: auto;
right: 0;
}
.dropup .caret {
border-top: 0;
border-bottom: 4px solid #000000;
content: "\2191";
}
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
.typeahead {
margin-top: 2px;
-webkit-border-radius: 4px;
......@@ -2340,6 +2349,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
......@@ -2551,13 +2561,16 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
}
.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
border-top-color: #0088cc;
border-bottom-color: #0088cc;
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
border-bottom-color: #005580;
}
.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.nav > .dropdown.active > a:hover {
color: #000000;
......@@ -2570,6 +2583,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
}
.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
}
......@@ -2931,8 +2945,22 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
top: -6px;
left: 10px;
}
.navbar .dropdown-menu.bottom-up:before {
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
top: auto;
}
.navbar .dropdown-menu.bottom-up:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar .nav .active .caret {
opacity: 1;
......@@ -2944,11 +2972,15 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
}
.navbar .nav.pull-right .dropdown-menu:before {
.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
}
.navbar .nav.pull-right .dropdown-menu:before, .navbar .nav .dropdown-menu.pull-right:before {
left: auto;
right: 12px;
}
.navbar .nav.pull-right .dropdown-menu:after {
.navbar .nav.pull-right .dropdown-menu:after, .navbar .nav .dropdown-menu.pull-right:after {
left: auto;
right: 13px;
}
......
docs/components.html
View file @ 20221a67
......@@ -188,12 +188,13 @@
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
<h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1>
</div>
<h2>Button dropdowns</h2>
<div class="row">
<div class="span4">
<h3>Button dropdowns</h3>
<h3>Overview and examples</h3>
<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
......@@ -278,10 +279,14 @@
</pre>
</div>
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
</div>
<h2>Split button dropdowns</h2>
<div class="row">
<div class="span4">
<h3>Split button dropdowns</h3>
<h3>Overview and examples</h3>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
......@@ -352,7 +357,30 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<h3>Right aligned menus</h3>
<p>Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">Right</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu 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>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
...
&lt;ul class="dropdown-menu pull-right"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<h3>Example markup</h3>
......@@ -368,6 +396,44 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h3>Dropup menus</h3>
<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
<div class="btn-toolbar" style="margin-top: 9px;">
<div class="btn-group dropup">
<a class="btn" href="#">Dropup</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<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>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<a class="btn primary" href="#">Right dropup</a>
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu 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>
</div><!-- /btn-group -->
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group dropup"&gt;
&lt;a class="btn" href="#"&gt;Dropup&lt;/a&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
......@@ -474,7 +540,7 @@
<h3>Tabs with dropdowns</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
......@@ -485,6 +551,16 @@
<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">
&lt;ul class="nav nav-tabs"&gt;
......@@ -506,7 +582,7 @@
<h3>Pills with dropdowns</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
......@@ -517,6 +593,16 @@
<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">
&lt;ul class="nav nav-pills"&gt;
......@@ -812,6 +898,16 @@
<li><a href="#">One more separated link</a></li>
</ul>
</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>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
......@@ -819,6 +915,16 @@
<ul class="nav pull-right">
<li><a href="#">Link</a></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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
......@@ -940,8 +1046,8 @@
</pre>
<h3>Component alignment</h3>
<p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Adding dropdowns</h3>
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
<h3>Adding dropdown menus</h3>
<p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;
......
docs/templates/pages/components.mustache
View file @ 20221a67
......@@ -112,12 +112,13 @@
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Contextual dropdown menus built on button groups{{/i}}</small></h1>
<h1>{{_i}}Button dropdown menus{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
</div>
<h2>{{_i}}Button dropdowns{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Button dropdowns{{/i}}</h3>
<h3>{{_i}}Overview and examples{{/i}}</h3>
<p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
......@@ -202,10 +203,14 @@
</pre>
</div>
</div>
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
</div>
<h2>{{_i}}Split button dropdowns{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Split button dropdowns{{/i}}</h3>
<h3>{{_i}}Overview and examples{{/i}}</h3>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
......@@ -276,7 +281,30 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<h3>{{_i}}Right aligned menus{{/i}}</h3>
<p>{{_i}}Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.{{/i}}</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">{{_i}}Right{{/i}}</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu 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>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
...
&lt;ul class="dropdown-menu pull-right"&gt;
&lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
......@@ -292,6 +320,44 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Dropup menus{{/i}}</h3>
<p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 9px;">
<div class="btn-group dropup">
<a class="btn" href="#">{{_i}}Dropup{{/i}}</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<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>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<a class="btn primary" href="#">{{_i}}Right dropup{{/i}}</a>
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu 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>
</div><!-- /btn-group -->
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group dropup"&gt;
&lt;a class="btn" href="#"&gt;{{_i}}Dropup{{/i}}&lt;/a&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
......@@ -398,7 +464,7 @@
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
<li><a href="#">{{_i}}Help{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
......@@ -409,6 +475,16 @@
<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">
&lt;ul class="nav nav-tabs"&gt;
......@@ -430,7 +506,7 @@
<h3>{{_i}}Pills with dropdowns{{/i}}</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
<li><a href="#">{{_i}}Help{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
......@@ -441,6 +517,16 @@
<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">
&lt;ul class="nav nav-pills"&gt;
......@@ -736,6 +822,16 @@
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</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>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
......@@ -743,6 +839,16 @@
<ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
......@@ -864,8 +970,8 @@
</pre>
<h3>{{_i}}Component alignment{{/i}}</h3>
<p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<h3>{{_i}}Adding dropdowns{{/i}}</h3>
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
<h3>{{_i}}Adding dropdown menus{{/i}}</h3>
<p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;
......
less/button-groups.less
View file @ 20221a67
......@@ -137,6 +137,7 @@
.btn-inverse {
.caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(75);
}
}
......
less/dropdowns.less
View file @ 20221a67
......@@ -13,7 +13,9 @@
.open .dropdown-toggle {
outline: 0;
}
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
......@@ -29,6 +31,7 @@
.opacity(30);
content: "\2193";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
......@@ -37,7 +40,9 @@
.open.dropdown .caret {
.opacity(100);
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
......@@ -62,11 +67,10 @@
*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;
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
......@@ -87,6 +91,7 @@
}
// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
......@@ -96,6 +101,7 @@
}
// Open state for the dropdown
// ---------------------------
.dropdown.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
......@@ -117,7 +123,26 @@
right: 0;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
.dropup {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: 4px solid @black;
content: "\2191";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Typeahead
// ---------
.typeahead {
margin-top: 2px; // give it some space to breathe
.border-radius(4px);
......
less/navbar.less
View file @ 20221a67
......@@ -274,11 +274,27 @@
left: 10px;
}
}
// Menu position and menu caret support for dropups via extra bottom-up class
.navbar .dropdown-menu.bottom-up {
&:before {
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret {
border-top-color: @white;
border-bottom-color: @white;
}
.navbar .nav .active .caret {
.opacity(100);
......@@ -297,7 +313,11 @@
}
// Right aligned menus need alt position
.navbar .nav.pull-right .dropdown-menu {
// TODO: rejigger this at some point to simplify the selectors
.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {
left: auto;
right: 12px;
......
less/navs.less
View file @ 20221a67
......@@ -204,11 +204,13 @@
.nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
}
// Active dropdown links
......@@ -216,6 +218,7 @@
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret {
border-top-color: @grayDark;
border-bottom-color: @grayDark;
}
// Active:hover dropdown links
......@@ -238,6 +241,7 @@
.nav .open.active .caret,
.nav .open a:hover .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}
......
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