mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00
Code Issues Releases Wiki 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
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 { .tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
border-top-color: #0088cc; border-top-color: #0088cc;
border-bottom-color: #0088cc;
margin-top: 6px; margin-top: 6px;
} }
.tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret { .tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret {
border-top-color: #005580; border-top-color: #005580;
border-bottom-color: #005580;
} }
.tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret { .tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret {
border-top-color: #333333; border-top-color: #333333;
border-bottom-color: #333333;
} }
.nav > .dropdown.active > a:hover { .nav > .dropdown.active > a:hover {
color: #000000; color: #000000;

20
docs/components.html
View File

@@ -410,6 +410,16 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav tabs"&gt; &lt;ul class="nav tabs"&gt;
@@ -442,6 +452,16 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt; &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> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav tabs"&gt; &lt;ul class="nav tabs"&gt;
@@ -370,6 +380,16 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt; &lt;ul class="nav pills"&gt;

3
less/navs.less
View File

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