move tabs and pills to separate files with unique classes

dist/css/bootstrap.css

@@ -3171,6 +3171,95 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+.nav-tab {
+  padding-left: 0;
+  margin-bottom: 24px;
+  list-style: none;
+  border-bottom: 1px solid #ddd;
+}
+.nav-tab-item {
+  position: relative;
+  display: block;
+  float: left;
+  margin-bottom: -1px;
+}
+.nav-tab-link {
+  display: block;
+  padding: 10px 15px;
+  margin-right: .2rem;
+  line-height: 1.5;
+  border: 1px solid transparent;
+  border-radius: .2rem .2rem 0 0;
+}
+.nav-tab-link:hover,
+.nav-tab-link:focus {
+  text-decoration: none;
+  background-color: #eceeef;
+  border-color: #eceeef #eceeef #ddd;
+}
+.open > .nav-tab-link,
+.active > .nav-tab-link,
+.open > .nav-tab-link:hover,
+.active > .nav-tab-link:hover,
+.open > .nav-tab-link:focus,
+.active > .nav-tab-link:focus {
+  color: #55595c;
+  cursor: default;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+}
+.disabled > .nav-tab-link,
+.disabled > .nav-tab-link:hover,
+.disabled > .nav-tab-link:focus {
+  color: #818a91;
+  cursor: not-allowed;
+  background-color: transparent;
+  border-color: transparent;
+}
+.nav-pill {
+  padding-left: 0;
+  margin-bottom: 24px;
+  list-style: none;
+}
+.nav-pill-item {
+  position: relative;
+  display: block;
+  float: left;
+}
+.nav-pill-item + .nav-pill-item {
+  margin-left: .2rem;
+}
+.nav-pill-link {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  border-radius: .2rem;
+}
+.nav-pill-link:hover,
+.nav-pill-link:focus {
+  text-decoration: none;
+  background-color: #eceeef;
+}
+.open > .nav-pill-link,
+.active > .nav-pill-link,
+.open > .nav-pill-link:hover,
+.active > .nav-pill-link:hover,
+.open > .nav-pill-link:focus,
+.active > .nav-pill-link:focus {
+  color: #fff;
+  background-color: #027de7;
+}
+.disabled > .nav-pill-link {
+  color: #818a91;
+}
+.disabled > .nav-pill-link,
+.disabled > .nav-pill-link:hover,
+.disabled > .nav-pill-link:focus {
+  color: #818a91;
+  cursor: not-allowed;
+  background-color: transparent;
+}
 .navbar {
   position: relative;
   min-height: 50px;
@@ -4947,6 +5036,10 @@ button.close {
 .btn-group-vertical > .btn-group:after,
 .nav:before,
 .nav:after,
+.nav-tab:before,
+.nav-tab:after,
+.nav-pill:before,
+.nav-pill:after,
 .navbar:before,
 .navbar:after,
 .navbar-header:before,
@@ -4969,6 +5062,8 @@ button.close {
 .btn-toolbar:after,
 .btn-group-vertical > .btn-group:after,
 .nav:after,
+.nav-tab:after,
+.nav-pill:after,
 .navbar:after,
 .navbar-header:after,
 .navbar-collapse:after,

docs/_includes/components/navs.html

@@ -6,17 +6,35 @@
   <h2 id="nav-tabs">Tabs</h2>
   <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
   <div class="bs-example">
-    <ul class="nav nav-tabs" role="tablist">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages</a></li>
+    <ul class="nav-tab" role="tablist">
+      <li class="nav-tab-item active">
+        <a href="#" class="nav-tab-link">Active</a>
+      </li>
+      <li class="nav-tab-item">
+        <a href="#" class="nav-tab-link">Link</a>
+      </li>
+      <li class="nav-tab-item">
+        <a href="#" class="nav-tab-link">Another link</a>
+      </li>
+      <li class="nav-tab-item disabled">
+        <a href="#" class="nav-tab-link">Disabled</a>
+      </li>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-tabs" role="tablist">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
+<ul class="nav-tab" role="tablist">
+  <li class="nav-tab-item active">
+    <a href="#" class="nav-tab-link">Active</a>
+  </li>
+  <li class="nav-tab-item">
+    <a href="#" class="nav-tab-link">Link</a>
+  </li>
+  <li class="nav-tab-item">
+    <a href="#" class="nav-tab-link">Another link</a>
+  </li>
+  <li class="nav-tab-item disabled">
+    <a href="#" class="nav-tab-link">Disabled</a>
+  </li>
 </ul>
 {% endhighlight %}
   <div class="bs-callout bs-callout-info">
@@ -27,19 +45,38 @@
   <h2 id="nav-pills">Pills</h2>
   <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
   <div class="bs-example">
-    <ul class="nav nav-pills" role="tablist">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Profile</a></li>
-      <li><a href="#">Messages</a></li>
+    <ul class="nav-pill" role="tablist">
+      <li class="nav-pill-item active">
+        <a href="#" class="nav-pill-link">Active</a>
+      </li>
+      <li class="nav-pill-item">
+        <a href="#" class="nav-pill-link">Link</a>
+      </li>
+      <li class="nav-pill-item">
+        <a href="#" class="nav-pill-link">Another link</a>
+      </li>
+      <li class="nav-pill-item disabled">
+        <a href="#" class="nav-pill-link">Disabled</a>
+      </li>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills" role="tablist">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
+<ul class="nav-pill" role="tablist">
+  <li class="nav-pill-item active">
+    <a href="#" class="nav-pill-link">Active</a>
+  </li>
+  <li class="nav-pill-item">
+    <a href="#" class="nav-pill-link">Link</a>
+  </li>
+  <li class="nav-pill-item">
+    <a href="#" class="nav-pill-link">Another link</a>
+  </li>
+  <li class="nav-pill-item disabled">
+    <a href="#" class="nav-pill-link">Disabled</a>
+  </li>
 </ul>
 {% endhighlight %}
+
   <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
   <div class="bs-example">
     <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">

docs/dist/css/bootstrap.css

@@ -3171,6 +3171,95 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+.nav-tab {
+  padding-left: 0;
+  margin-bottom: 24px;
+  list-style: none;
+  border-bottom: 1px solid #ddd;
+}
+.nav-tab-item {
+  position: relative;
+  display: block;
+  float: left;
+  margin-bottom: -1px;
+}
+.nav-tab-link {
+  display: block;
+  padding: 10px 15px;
+  margin-right: .2rem;
+  line-height: 1.5;
+  border: 1px solid transparent;
+  border-radius: .2rem .2rem 0 0;
+}
+.nav-tab-link:hover,
+.nav-tab-link:focus {
+  text-decoration: none;
+  background-color: #eceeef;
+  border-color: #eceeef #eceeef #ddd;
+}
+.open > .nav-tab-link,
+.active > .nav-tab-link,
+.open > .nav-tab-link:hover,
+.active > .nav-tab-link:hover,
+.open > .nav-tab-link:focus,
+.active > .nav-tab-link:focus {
+  color: #55595c;
+  cursor: default;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+}
+.disabled > .nav-tab-link,
+.disabled > .nav-tab-link:hover,
+.disabled > .nav-tab-link:focus {
+  color: #818a91;
+  cursor: not-allowed;
+  background-color: transparent;
+  border-color: transparent;
+}
+.nav-pill {
+  padding-left: 0;
+  margin-bottom: 24px;
+  list-style: none;
+}
+.nav-pill-item {
+  position: relative;
+  display: block;
+  float: left;
+}
+.nav-pill-item + .nav-pill-item {
+  margin-left: .2rem;
+}
+.nav-pill-link {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  border-radius: .2rem;
+}
+.nav-pill-link:hover,
+.nav-pill-link:focus {
+  text-decoration: none;
+  background-color: #eceeef;
+}
+.open > .nav-pill-link,
+.active > .nav-pill-link,
+.open > .nav-pill-link:hover,
+.active > .nav-pill-link:hover,
+.open > .nav-pill-link:focus,
+.active > .nav-pill-link:focus {
+  color: #fff;
+  background-color: #027de7;
+}
+.disabled > .nav-pill-link {
+  color: #818a91;
+}
+.disabled > .nav-pill-link,
+.disabled > .nav-pill-link:hover,
+.disabled > .nav-pill-link:focus {
+  color: #818a91;
+  cursor: not-allowed;
+  background-color: transparent;
+}
 .navbar {
   position: relative;
   min-height: 50px;
@@ -4947,6 +5036,10 @@ button.close {
 .btn-group-vertical > .btn-group:after,
 .nav:before,
 .nav:after,
+.nav-tab:before,
+.nav-tab:after,
+.nav-pill:before,
+.nav-pill:after,
 .navbar:before,
 .navbar:after,
 .navbar-header:before,
@@ -4969,6 +5062,8 @@ button.close {
 .btn-toolbar:after,
 .btn-group-vertical > .btn-group:after,
 .nav:after,
+.nav-tab:after,
+.nav-pill:after,
 .navbar:after,
 .navbar-header:after,
 .navbar-collapse:after,

less/bootstrap.less

@@ -21,6 +21,8 @@
 @import "button-groups.less";
 @import "input-groups.less";
 @import "navs.less";
+@import "nav-tab.less";
+@import "nav-pill.less";
 @import "navbar.less";
 @import "breadcrumbs.less";
 @import "pagination.less";

less/nav-pill.less

+// Pill nav
+//
+// Horizontal navigation with large (rounded) rectangle hit areas for links.
+
+.nav-pill {
+  .list-unstyled();
+  margin-bottom: @line-height-computed;
+  &:extend(.clearfix all);
+}
+
+.nav-pill-item {
+  position: relative;
+  display: block;
+  float: left;
+
+  & + & {
+    margin-left: .2rem;
+  }
+}
+
+.nav-pill-link {
+  position: relative;
+  display: block;
+  padding: @nav-link-padding;
+  .border-radius(@nav-pills-border-radius);
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: @nav-link-hover-bg;
+  }
+}
+
+// Open dropdown and active states
+.open,
+.active {
+  > .nav-pill-link {
+    &,
+    &:hover,
+    &:focus {
+      color: @nav-pills-active-link-hover-color;
+      background-color: @nav-pills-active-link-hover-bg;
+    }
+  }
+}
+
+// Disabled state sets text to gray and nukes hover/tab effects
+.disabled {
+  > .nav-pill-link {
+    color: @nav-disabled-link-color;
+
+    &,
+    &:hover,
+    &:focus {
+      color: @nav-disabled-link-hover-color;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+}

less/nav-tab.less

+// Pill nav
+//
+// Horizontal navigation with large top-aligned tab visuals.
+
+.nav-tab {
+  .list-unstyled();
+  margin-bottom: @line-height-computed;
+  border-bottom: 1px solid @nav-tabs-border-color;
+  &:extend(.clearfix all);
+}
+
+.nav-tab-item {
+  position: relative;
+  display: block;
+  float: left;
+  // Make the list-items overlay the bottom border
+  margin-bottom: -1px;
+}
+
+.nav-tab-link {
+  display: block;
+  padding: @nav-link-padding;
+  margin-right: .2rem;
+  line-height: @line-height-base;
+  border: 1px solid transparent;
+  .border-radius(@border-radius-base @border-radius-base 0 0);
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: @nav-link-hover-bg;
+    border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
+  }
+}
+
+// Open dropdown and active states
+.open,
+.active {
+  > .nav-tab-link {
+    &,
+    &:hover,
+    &:focus {
+      color: @nav-tabs-active-link-hover-color;
+      background-color: @nav-tabs-active-link-hover-bg;
+      border: 1px solid @nav-tabs-active-link-hover-border-color;
+      border-bottom-color: transparent;
+      cursor: default;
+    }
+  }
+}
+
+// Disabled state sets text to gray and nukes hover/tab effects
+.disabled {
+  > .nav-tab-link {
+    &,
+    &:hover,
+    &:focus {
+      color: @nav-disabled-link-color;
+      background-color: transparent;
+      border-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+}
+