mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-24 12:07:18 +00:00
Navs refactor, restoring .nav-list
This commit is contained in:
Mark Otto
parent
a12eb2b9f5
commit
c0eacca0db
161
docs/assets/css/bootstrap.css
vendored
161
docs/assets/css/bootstrap.css
vendored
@ -3439,8 +3439,24 @@ input[type="button"].btn-block {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav:before,
|
||||
.nav:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.nav > li > a:hover {
|
||||
@ -3475,33 +3491,6 @@ input[type="button"].btn-block {
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.nav-tabs:before,
|
||||
.nav-pills:before,
|
||||
.nav-tabs:after,
|
||||
.nav-pills:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.nav-tabs:after,
|
||||
.nav-pills:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.nav-tabs > li,
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a,
|
||||
.nav-pills > li > a {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
@ -3511,8 +3500,7 @@ input[type="button"].btn-block {
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-right: 2px;
|
||||
line-height: 20px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
@ -3531,14 +3519,55 @@ input[type="button"].btn-block {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
||||
}
|
||||
|
||||
.nav-list > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.nav-list > li > a {
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.nav-list > li > a:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.nav-list > li:first-child > a {
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.nav-list > li:last-child > a {
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
.nav-list > .active > a,
|
||||
.nav-list > .active > a:hover {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 9px 15px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: #0088cc;
|
||||
border-width: 0;
|
||||
-webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-pills > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.nav-pills > li + li > a {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.nav-pills > .active > a,
|
||||
.nav-pills > .active > a:hover {
|
||||
color: #ffffff;
|
||||
@ -3549,60 +3578,22 @@ input[type="button"].btn-block {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.nav-stacked > li > a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav-tabs.nav-stacked {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-tabs.nav-stacked > li > a {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.nav-tabs.nav-stacked > li:first-child > a {
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
}
|
||||
|
||||
.nav-tabs.nav-stacked > li:last-child > a {
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
}
|
||||
|
||||
.nav-tabs.nav-stacked > li > a:hover {
|
||||
z-index: 2;
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.nav-pills.nav-stacked > li > a {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.nav-pills.nav-stacked > li:last-child > a {
|
||||
margin-bottom: 1px;
|
||||
.nav-stacked > li + li > a {
|
||||
margin-top: 2px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-tabs .dropdown-menu {
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
.nav-pills .dropdown-menu {
|
||||
border-radius: 6px;
|
||||
-webkit-border-top-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
-webkit-border-top-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
-moz-border-radius-topright: 0;
|
||||
-moz-border-radius-topleft: 0;
|
||||
}
|
||||
|
||||
.nav .dropdown-toggle .caret {
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
border-top-color: #0088cc;
|
||||
border-bottom-color: #0088cc;
|
||||
}
|
||||
@ -3612,12 +3603,6 @@ input[type="button"].btn-block {
|
||||
border-bottom-color: #005580;
|
||||
}
|
||||
|
||||
/* move down carets for tabs */
|
||||
|
||||
.nav-tabs .dropdown-toggle .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.nav .active .dropdown-toggle .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
@ -4071,7 +4056,7 @@ input[type="button"].btn-block {
|
||||
background-image: -o-linear-gradient(top, #222222, #111111);
|
||||
background-image: linear-gradient(to bottom, #222222, #111111);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #252525;
|
||||
border-color: #111111;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
|
||||
}
|
||||
|
||||
|
||||
@ -754,41 +754,6 @@ form.bs-docs-example {
|
||||
.bs-docs-sidenav {
|
||||
width: 228px;
|
||||
margin: 30px 0 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
|
||||
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.065);
|
||||
}
|
||||
.bs-docs-sidenav > li > a {
|
||||
display: block;
|
||||
width: 190px \9;
|
||||
margin: 0 0 -1px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
.bs-docs-sidenav > li:first-child > a {
|
||||
-webkit-border-radius: 6px 6px 0 0;
|
||||
-moz-border-radius: 6px 6px 0 0;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
.bs-docs-sidenav > li:last-child > a {
|
||||
-webkit-border-radius: 0 0 6px 6px;
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
.bs-docs-sidenav > .active > a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 9px 15px;
|
||||
border: 0;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.15);
|
||||
-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
|
||||
-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
|
||||
box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
|
||||
}
|
||||
/* Chevrons */
|
||||
.bs-docs-sidenav .icon-chevron-right {
|
||||
@ -797,9 +762,6 @@ form.bs-docs-example {
|
||||
margin-right: -6px;
|
||||
opacity: .25;
|
||||
}
|
||||
.bs-docs-sidenav > li > a:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.bs-docs-sidenav a:hover .icon-chevron-right {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
@ -668,18 +668,17 @@
|
||||
|
||||
|
||||
|
||||
<!-- Nav, Tabs, & Pills
|
||||
<!-- Navs
|
||||
================================================== -->
|
||||
<section id="navs">
|
||||
<div class="page-header">
|
||||
<h1>Nav: tabs, pills, and lists</small></h1>
|
||||
<h1>Navs</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
|
||||
<p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
|
||||
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
|
||||
|
||||
<h3>Basic tabs</h3>
|
||||
<p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p>
|
||||
<h2>Tabs</h2>
|
||||
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
@ -697,7 +696,26 @@
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Basic pills</h3>
|
||||
<h2>List</h2>
|
||||
<p>Swap the tabs class for <code>.nav-list</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-list" style="max-width: 300px;">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-list">
|
||||
<li class="active">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li><a href="#">...</a></li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h2>Pills</h2>
|
||||
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills">
|
||||
@ -715,6 +733,21 @@
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h2>Options</h2>
|
||||
|
||||
<h3>Disabled state</h3>
|
||||
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
|
||||
@ -740,51 +773,6 @@
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Stackable</h2>
|
||||
<p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
|
||||
|
||||
<h3>Stacked tabs</h3>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-tabs nav-stacked">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs nav-stacked">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Stacked pills</h3>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Horizontal dividers</h3>
|
||||
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs nav-stacked">
|
||||
...
|
||||
<li class="divider"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Dropdowns</h2>
|
||||
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
|
||||
|
||||
|
||||
92
docs/templates/pages/components.mustache
vendored
92
docs/templates/pages/components.mustache
vendored
@ -599,18 +599,17 @@
|
||||
|
||||
|
||||
|
||||
<!-- Nav, Tabs, & Pills
|
||||
<!-- Navs
|
||||
================================================== -->
|
||||
<section id="navs">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Nav: tabs, pills, and lists{{/i}}</small></h1>
|
||||
<h1>{{_i}}Navs{{/i}}</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Lightweight defaults{{/i}} <small>{{_i}}Same markup, different classes{{/i}}</small></h2>
|
||||
<p>{{_i}}All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
|
||||
<p class="lead">{{_i}}Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Basic tabs{{/i}}</h3>
|
||||
<p>{{_i}}Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
|
||||
<h2>{{_i}}Tabs{{/i}}</h2>
|
||||
<p>{{_i}}Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
@ -628,7 +627,26 @@
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Basic pills{{/i}}</h3>
|
||||
<h2>{{_i}}List{{/i}}</h2>
|
||||
<p>{{_i}}Swap the tabs class for <code>.nav-list</code>.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-list" style="max-width: 300px;">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-list">
|
||||
<li class="active">
|
||||
<a href="#">{{_i}}Home{{/i}}</a>
|
||||
</li>
|
||||
<li><a href="#">...</a></li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Pills{{/i}}</h2>
|
||||
<p>{{_i}}Take that same HTML, but use <code>.nav-pills</code> instead:{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills">
|
||||
@ -646,6 +664,21 @@
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>{{_i}}Pills are also vertically stackable. Just add <code>.nav-stacked</code>.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Options{{/i}}</h2>
|
||||
|
||||
<h3>{{_i}}Disabled state{{/i}}</h3>
|
||||
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}</p>
|
||||
@ -671,51 +704,6 @@
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Stackable{{/i}}</h2>
|
||||
<p>{{_i}}As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Stacked tabs{{/i}}</h3>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-tabs nav-stacked">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs nav-stacked">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Stacked pills{{/i}}</h3>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Horizontal dividers{{/i}}</h3>
|
||||
<p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs nav-stacked">
|
||||
...
|
||||
<li class="divider"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Dropdowns{{/i}}</h2>
|
||||
<p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
|
||||
|
||||
|
||||
155
less/navs.less
155
less/navs.less
@ -3,18 +3,21 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// BASE CLASS
|
||||
// ----------
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: @baseLineHeight;
|
||||
list-style: none;
|
||||
.clearfix();
|
||||
}
|
||||
.nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Make links block level
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.nav > li > a:hover {
|
||||
text-decoration: none;
|
||||
@ -49,28 +52,8 @@
|
||||
|
||||
|
||||
|
||||
// TABS AND PILLS
|
||||
// -------------
|
||||
|
||||
// Common styles
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
.clearfix();
|
||||
}
|
||||
.nav-tabs > li,
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-tabs > li > a,
|
||||
.nav-pills > li > a {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px; // keeps the overall height an even number
|
||||
}
|
||||
|
||||
// TABS
|
||||
// ----
|
||||
// Tabs
|
||||
// -------------------------
|
||||
|
||||
// Give the tabs something to sit on
|
||||
.nav-tabs {
|
||||
@ -82,8 +65,7 @@
|
||||
}
|
||||
// Actual tabs (as links)
|
||||
.nav-tabs > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-right: 2px;
|
||||
line-height: @baseLineHeight;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
@ -102,17 +84,55 @@
|
||||
}
|
||||
|
||||
|
||||
// PILLS
|
||||
// -----
|
||||
|
||||
// Lists
|
||||
// -------------------------
|
||||
|
||||
.nav-list {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
.box-shadow(0 1px 4px rgba(0,0,0,.065))
|
||||
}
|
||||
.nav-list > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-list > li > a {
|
||||
margin-bottom: -1px; // pull up the following link for a 1px border between
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
.nav-list > li > a:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.nav-list > li:first-child > a {
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
.nav-list > li:last-child > a {
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
.nav-list > .active > a,
|
||||
.nav-list > .active > a:hover {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 9px 15px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.15);
|
||||
background-color: @linkColor;
|
||||
border-width: 0;
|
||||
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Pills
|
||||
// -------------------------
|
||||
|
||||
// Links rendered as pills
|
||||
.nav-pills > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.nav-pills > li + li > a {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
// Active state
|
||||
.nav-pills > .active > a,
|
||||
@ -121,56 +141,23 @@
|
||||
background-color: @linkColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// STACKED NAV
|
||||
// -----------
|
||||
|
||||
// Stacked tabs and pills
|
||||
// Stacked pills
|
||||
.nav-stacked > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-stacked > li > a {
|
||||
margin-right: 0; // no need for the gap between nav items
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.nav-tabs.nav-stacked {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs.nav-stacked > li > a {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0;
|
||||
}
|
||||
.nav-tabs.nav-stacked > li:first-child > a {
|
||||
.border-top-radius(4px);
|
||||
}
|
||||
.nav-tabs.nav-stacked > li:last-child > a {
|
||||
.border-bottom-radius(4px);
|
||||
}
|
||||
.nav-tabs.nav-stacked > li > a:hover {
|
||||
border-color: #ddd;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Pills
|
||||
.nav-pills.nav-stacked > li > a {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.nav-pills.nav-stacked > li:last-child > a {
|
||||
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
|
||||
.nav-stacked > li + li > a {
|
||||
margin-top: 2px;
|
||||
margin-left: 0; // no need for the gap between nav items
|
||||
}
|
||||
|
||||
|
||||
|
||||
// DROPDOWNS
|
||||
// ---------
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
|
||||
.nav-tabs .dropdown-menu {
|
||||
border-radius: 0 0 6px 6px; // remove the top rounded corners here since there is a hard edge above the menu
|
||||
}
|
||||
.nav-pills .dropdown-menu {
|
||||
border-radius: 6px; // make rounded corners match the pills
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
.border-top-radius(0);
|
||||
}
|
||||
|
||||
// Default dropdown links
|
||||
@ -179,16 +166,12 @@
|
||||
.nav .dropdown-toggle .caret {
|
||||
border-top-color: @linkColor;
|
||||
border-bottom-color: @linkColor;
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.nav .dropdown-toggle:hover .caret {
|
||||
border-top-color: @linkColorHover;
|
||||
border-bottom-color: @linkColorHover;
|
||||
}
|
||||
/* move down carets for tabs */
|
||||
.nav-tabs .dropdown-toggle .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
// Active dropdown links
|
||||
// -------------------------
|
||||
@ -231,12 +214,8 @@
|
||||
|
||||
|
||||
|
||||
// TABBABLE
|
||||
// --------
|
||||
|
||||
|
||||
// COMMON STYLES
|
||||
// -------------
|
||||
// Tabbable tabs
|
||||
// -------------------------
|
||||
|
||||
// Clear any floats
|
||||
.tabbable {
|
||||
@ -258,8 +237,8 @@
|
||||
|
||||
|
||||
|
||||
// DISABLED STATES
|
||||
// ---------------
|
||||
// Disabled state
|
||||
// -------------------------
|
||||
|
||||
// Gray out text
|
||||
.nav > .disabled > a {
|
||||
|
||||
@ -197,7 +197,7 @@
|
||||
// Inverted navbar
|
||||
@navbarInverseBackground: #111111;
|
||||
@navbarInverseBackgroundHighlight: #222222;
|
||||
@navbarInverseBorder: #252525;
|
||||
@navbarInverseBorder: #111111;
|
||||
|
||||
@navbarInverseText: @grayLight;
|
||||
@navbarInverseLinkColor: @grayLight;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user