diff --git a/_includes/nav-customize.html b/_includes/nav-customize.html
index 3099d6c719..26dbd3b039 100644
--- a/_includes/nav-customize.html
+++ b/_includes/nav-customize.html
@@ -12,6 +12,7 @@
+
+
diff --git a/less/navs.less b/less/navs.less
index 21968dd77e..7d64ef13a8 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -23,17 +23,17 @@
&:hover,
&:focus {
text-decoration: none;
- background-color: @gray-lighter;
+ background-color: @nav-link-hover-bg;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
- color: @gray-light;
+ color: @nav-disabled-link-color;
&:hover,
&:focus {
- color: @gray-light;
+ color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
@@ -51,12 +51,12 @@
&,
&:hover,
&:focus {
- color: #fff;
+ color: @nav-open-link-hover-color;
background-color: @link-color;
border-color: @link-color;
.caret {
- border-top-color: #fff;
- border-bottom-color: #fff;
+ border-top-color: @nav-open-caret-border-color;
+ border-bottom-color: @nav-open-caret-border-color;
}
}
}
@@ -83,7 +83,7 @@
// Give the tabs something to sit on
.nav-tabs {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid @nav-tabs-border-color;
> li {
float: left;
// Make the list-items overlay the bottom border
@@ -96,7 +96,7 @@
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
- border-color: @gray-lighter @gray-lighter #ddd;
+ border-color: @nav-tabs-link-hover-border-color;
}
}
@@ -105,9 +105,9 @@
&,
&:hover,
&:focus {
- color: @gray;
- background-color: @body-bg;
- border: 1px solid #ddd;
+ 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;
}
@@ -142,8 +142,8 @@
&,
&:hover,
&:focus {
- color: #fff;
- background-color: @component-active-bg;
+ color: @nav-pills-active-link-hover-color;
+ background-color: @nav-pills-active-link-hover-bg;
}
}
}
@@ -183,13 +183,13 @@
.nav-tabs-justified {
border-bottom: 0;
> li > a {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid @nav-tabs-justified-link-border-color;
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a {
- border-bottom-color: @body-bg;
+ border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
diff --git a/less/variables.less b/less/variables.less
index d2f7da3c7e..cba5b1194a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -234,6 +234,33 @@
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
+// Navs
+// -------------------------
+
+@nav-link-hover-bg: @gray-lighter;
+
+@nav-disabled-link-color: @gray-light;
+@nav-disabled-link-hover-color: @gray-light;
+
+@nav-open-link-hover-color: #fff;
+@nav-open-caret-border-color: #fff;
+
+// Tabs
+@nav-tabs-border-color: #ddd;
+
+@nav-tabs-link-hover-border-color: @gray-lighter;
+
+@nav-tabs-active-link-hover-bg: @body-bg;
+@nav-tabs-active-link-hover-color: @gray;
+@nav-tabs-active-link-hover-border-color: #ddd;
+
+@nav-tabs-justified-link-border-color: #ddd;
+@nav-tabs-justified-active-link-border-color: @body-bg;
+
+// Pills
+@nav-pills-active-link-hover-bg: @component-active-bg;
+
+@nav-pills-active-link-hover-color: #fff;
// Pagination
// -------------------------