]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Navs refactor, restoring .nav-list
authorMark Otto <otto@github.com>
Sat, 3 Nov 2012 23:14:44 +0000 (16:14 -0700)
committerMark Otto <otto@github.com>
Sat, 3 Nov 2012 23:14:44 +0000 (16:14 -0700)
docs/assets/css/bootstrap.css
docs/assets/css/docs.css
docs/components.html
docs/templates/pages/components.mustache
less/navs.less
less/variables.less

index 57c498650df10886c1cd64acc4329f17a12404b2..1241ac6874560d63bd6e0ad4b170e764c19522b5 100644 (file)
@@ -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,78 +3519,81 @@ input[type="button"].btn-block {
   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;
 }
@@ -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);
 }
 
index 8852926d3b56b9df59d74faacb5ba7c52bb27c2c..335d05a02c1bfcaa416b6119181baabfaa4460c6 100644 (file)
@@ -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;
 }
index 969bd0eebe0d027c14a75917bdb7d71e572c1ab2..e59351782a31f0e6cb3a595b74e9f7c44761629b 100644 (file)
 
 
 
-        <!-- 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&mdash;tabs, pills, and lists&mdash;<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>&lt;ul&gt;</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>
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-pills"&gt;
+&lt;ul class="nav nav-list"&gt;
   &lt;li class="active"&gt;
     &lt;a href="#"&gt;Home&lt;/a&gt;
   &lt;/li&gt;
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-pills"&gt;
-  ...
-  &lt;li class="disabled"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  ...
-&lt;/ul&gt;
-</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">
-&lt;ul class="nav nav-tabs nav-stacked"&gt;
-  ...
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </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>
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-tabs nav-stacked"&gt;
+&lt;ul class="nav nav-pills"&gt;
   ...
-  &lt;li class="divider"&gt;&lt;/li&gt;
+  &lt;li class="disabled"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
 </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">
 
index 62eff9740f3d14aa4cd6d5af10f511ba37edc529..4ae3467a69b893b47a61a1f712d30616d96745b6 100644 (file)
 
 
 
-        <!-- 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&mdash;tabs, pills, and lists&mdash;<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>&lt;ul&gt;</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>
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-pills"&gt;
+&lt;ul class="nav nav-list"&gt;
   &lt;li class="active"&gt;
     &lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;
   &lt;/li&gt;
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-pills"&gt;
-  ...
-  &lt;li class="disabled"&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
-  ...
-&lt;/ul&gt;
-</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">
-&lt;ul class="nav nav-tabs nav-stacked"&gt;
-  ...
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </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>
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-tabs nav-stacked"&gt;
+&lt;ul class="nav nav-pills"&gt;
   ...
-  &lt;li class="divider"&gt;&lt;/li&gt;
+  &lt;li class="disabled"&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
 </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">
 
index e435e45e88bcd78d19f92c5eda5ef57389011261..5ca43f9e0de960b36030a6551b9c88d2627521ed 100644 (file)
@@ -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;
 
 
 
-// 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;
 }
 
 
-// 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 {
index 11a4d2daa423d2b9b072f1a2110ed02f53e17fe1..b4c5a2580a5f47577691486a7e227676df6cab6d 100644 (file)
 // Inverted navbar
 @navbarInverseBackground:                #111111;
 @navbarInverseBackgroundHighlight:       #222222;
-@navbarInverseBorder:                    #252525;
+@navbarInverseBorder:                    #111111;
 
 @navbarInverseText:                      @grayLight;
 @navbarInverseLinkColor:                 @grayLight;