move tabs and pills to separate files with unique classes

3 files changed, 127 insertions, 0 deletions

diff --git a/less/bootstrap.less b/less/bootstrap.less
index 0ba1febc2..4df50de4c 100644
--- a/less/bootstrap.less
+++ b/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";
diff --git a/less/nav-pill.less b/less/nav-pill.less
new file mode 100644
index 000000000..3ce4cf305
--- /dev/null
+++ b/less/nav-pill.less
@@ -0,0 +1,60 @@
+// 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;
+    }
+  }
+}
diff --git a/less/nav-tab.less b/less/nav-tab.less
new file mode 100644
index 000000000..ebaaec727
--- /dev/null
+++ b/less/nav-tab.less
@@ -0,0 +1,65 @@
+// 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;
+    }
+  }
+}
+