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 @@
  • Form states
  • Alerts
  • Navbar
  • +
  • Nav
  • Tables
  • Forms
  • Dropdowns
  • diff --git a/customize.html b/customize.html index 6140783f7f..d2ac699b37 100644 --- a/customize.html +++ b/customize.html @@ -771,6 +771,46 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge + +

    Nav

    +
    +
    +

    Default nav

    +

    Basics

    + + + + + + + + + + +

    Tabs

    + + + + + + + + + + + + + + +

    Pills

    + + + + +
    +
    + +

    Tables

    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 // -------------------------