rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Extending the dropup support to tabs and pills

Browse Source 
This was needed to match the color of the carets that are used for tabs and pills
This commit is contained in:
Burak Tuyan 2012-01-30 01:13:21 +02:00
parent 918a17a30b
commit 97b3057824
4 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/assets/css/bootstrap.css vendored
View File

@ -2208,13 +2208,16 @@ button.btn.small, input[type="submit"].btn.small {
}
.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
border-top-color: #0088cc;
border-bottom-color: #0088cc;
margin-top: 6px;
}
.tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
border-bottom-color: #005580;
}
.tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.nav > .dropdown.active > a:hover {
color: #000000;

20
docs/components.html
View File

@ -410,6 +410,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 tabs"&gt;
@ -442,6 +452,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 pills"&gt;

20
docs/templates/pages/components.mustache vendored
View File

@ -338,6 +338,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 tabs"&gt;
@ -370,6 +380,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 pills"&gt;

3
less/navs.less
View File

@ -193,11 +193,13 @@
.tabs .dropdown-toggle .caret,
.pills .dropdown-toggle .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
margin-top: 6px;
}
.tabs .dropdown-toggle:hover .caret,
.pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
}
// Active dropdown links
@ -205,6 +207,7 @@
.tabs .active .dropdown-toggle .caret,
.pills .active .dropdown-toggle .caret {
border-top-color: @grayDark;
border-bottom-color: @grayDark;
}
// Active:hover dropdown links