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 {
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;
}
}
.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;
border-bottom-color: transparent;
}
-.nav-pills > li > a {
- padding-top: 8px;
- padding-bottom: 8px;
- margin-top: 2px;
- margin-bottom: 2px;
- border-radius: 5px;
+.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-pills > .active > a,
-.nav-pills > .active > a:hover {
- color: #ffffff;
- background-color: #0088cc;
+.nav-list > li {
+ float: none;
}
-.nav-stacked > li {
- float: none;
+.nav-list > li > a {
+ margin-bottom: -1px;
+ border: 1px solid #e5e5e5;
}
-.nav-stacked > li > a {
- margin-right: 0;
+.nav-list > li > a:hover {
+ background-color: #f5f5f5;
}
-.nav-tabs.nav-stacked {
- border-bottom: 0;
+.nav-list > li:first-child > a {
+ border-radius: 6px 6px 0 0;
}
-.nav-tabs.nav-stacked > li > a {
- border: 1px solid #ddd;
- border-radius: 0;
+.nav-list > li:last-child > a {
+ border-radius: 0 0 6px 6px;
}
-.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-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-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-pills > li > a {
+ border-radius: 5px;
}
-.nav-tabs.nav-stacked > li > a:hover {
- z-index: 2;
- border-color: #ddd;
+.nav-pills > li + li > a {
+ margin-left: 2px;
}
-.nav-pills.nav-stacked > li > a {
- margin-bottom: 3px;
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+ color: #ffffff;
+ background-color: #0088cc;
}
-.nav-pills.nav-stacked > li:last-child > a {
- margin-bottom: 1px;
+.nav-stacked > li {
+ float: none;
}
-.nav-tabs .dropdown-menu {
- border-radius: 0 0 6px 6px;
+.nav-stacked > li + li > a {
+ margin-top: 2px;
+ margin-left: 0;
}
-.nav-pills .dropdown-menu {
- border-radius: 6px;
+.nav-tabs .dropdown-menu {
+ -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;
}
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;
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);
}
.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 {
margin-right: -6px;
opacity: .25;
}
-.bs-docs-sidenav > li > a:hover {
- background-color: #f5f5f5;
-}
.bs-docs-sidenav a:hover .icon-chevron-right {
opacity: .5;
}
- <!-- 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>
</ul>
</pre>
- <h3>Basic pills</h3>
- <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
+ <h2>List</h2>
+ <p>Swap the tabs class for <code>.nav-list</code>.</p>
<div class="bs-docs-example">
- <ul class="nav nav-pills">
+ <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-pills">
+<ul class="nav nav-list">
<li class="active">
<a href="#">Home</a>
</li>
</ul>
</pre>
- <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>
+ <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">
- <li><a href="#">Clickable link</a></li>
- <li><a href="#">Clickable link</a></li>
- <li class="disabled"><a href="#">Disabled link</a></li>
- </ul>
- </div>
-<pre class="prettyprint linenums">
-<ul class="nav nav-pills">
- ...
- <li class="disabled"><a href="#">Home</a></li>
- ...
-</ul>
-</pre>
-
- <h3>Component alignment</h3>
- <p>To align nav links, 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>
-
-
- <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 class="nav nav-pills">
+ <li class="active">
+ <a href="#">Home</a>
+ </li>
+ <li><a href="#">...</a></li>
+ <li><a href="#">...</a></li>
</ul>
</pre>
-
- <h3>Stacked pills</h3>
+ <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">
+ <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>
</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>
+ <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>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills">
+ <li><a href="#">Clickable link</a></li>
+ <li><a href="#">Clickable link</a></li>
+ <li class="disabled"><a href="#">Disabled link</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
-<ul class="nav nav-tabs nav-stacked">
+<ul class="nav nav-pills">
...
- <li class="divider"></li>
+ <li class="disabled"><a href="#">Home</a></li>
...
</ul>
</pre>
+ <h3>Component alignment</h3>
+ <p>To align nav links, 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>
+
<hr class="bs-docs-separator">
- <!-- 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>
</ul>
</pre>
- <h3>{{_i}}Basic pills{{/i}}</h3>
- <p>{{_i}}Take that same HTML, but use <code>.nav-pills</code> instead:{{/i}}</p>
+ <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-pills">
+ <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-pills">
+<ul class="nav nav-list">
<li class="active">
<a href="#">{{_i}}Home{{/i}}</a>
</li>
</ul>
</pre>
- <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>
+ <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">
- <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
- <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
- <li class="disabled"><a href="#">{{_i}}Disabled link{{/i}}</a></li>
- </ul>
- </div>
-<pre class="prettyprint linenums">
-<ul class="nav nav-pills">
- ...
- <li class="disabled"><a href="#">{{_i}}Home{{/i}}</a></li>
- ...
-</ul>
-</pre>
-
- <h3>{{_i}}Component alignment{{/i}}</h3>
- <p>{{_i}}To align nav links, 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>
-
-
- <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 class="nav nav-pills">
+ <li class="active">
+ <a href="#">{{_i}}Home{{/i}}</a>
+ </li>
+ <li><a href="#">...</a></li>
+ <li><a href="#">...</a></li>
</ul>
</pre>
-
- <h3>{{_i}}Stacked pills{{/i}}</h3>
+ <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">
+ <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>
</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>
+ <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>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills">
+ <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
+ <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
+ <li class="disabled"><a href="#">{{_i}}Disabled link{{/i}}</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
-<ul class="nav nav-tabs nav-stacked">
+<ul class="nav nav-pills">
...
- <li class="divider"></li>
+ <li class="disabled"><a href="#">{{_i}}Home{{/i}}</a></li>
...
</ul>
</pre>
+ <h3>{{_i}}Component alignment{{/i}}</h3>
+ <p>{{_i}}To align nav links, 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>
+
<hr class="bs-docs-separator">
// --------------------------------------------------
-// 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;
-// 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 {
}
// 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;
}
-// 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,
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
.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
// -------------------------
-// TABBABLE
-// --------
-
-
-// COMMON STYLES
-// -------------
+// Tabbable tabs
+// -------------------------
// Clear any floats
.tabbable {
-// DISABLED STATES
-// ---------------
+// Disabled state
+// -------------------------
// Gray out text
.nav > .disabled > a {
// Inverted navbar
@navbarInverseBackground: #111111;
@navbarInverseBackgroundHighlight: #222222;
-@navbarInverseBorder: #252525;
+@navbarInverseBorder: #111111;
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;