From 6531cbd4388dc15b82e7cb0e13a0c499868bdb67 Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Thu, 12 Dec 2013 12:53:03 -0500
Subject: [PATCH] Adds a variable for the background color of the active tab in
 the tab component.

---
 doc/includes/tabs/examples_tabs_variables.html | 1 +
 scss/foundation/_settings.scss                 | 3 ++-
 scss/foundation/components/_tabs.scss          | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/doc/includes/tabs/examples_tabs_variables.html b/doc/includes/tabs/examples_tabs_variables.html
index ac52a42f0..75355fb1d 100644
--- a/doc/includes/tabs/examples_tabs_variables.html
+++ b/doc/includes/tabs/examples_tabs_variables.html
@@ -3,6 +3,7 @@
 $tabs-navigation-padding: rem-calc(16);
 $tabs-navigation-bg-color: #efefef;
 $tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%);
+$tabs-navigation-active-bg-color: #fff;
 $tabs-navigation-font-color: #222;
 $tabs-navigation-font-size: rem-calc(16);
 $tabs-navigation-font-family: $body-font-family;
diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 2e349244d..c3645c525 100644
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -1,4 +1,4 @@
-// 
+//
 // FOUNDATION SETTINGS
 //
 
@@ -952,6 +952,7 @@
 // $tabs-navigation-padding: rem-calc(16);
 // $tabs-navigation-bg-color: #efefef  ;
 // $tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%);
+// $tabs-navigation-active-bg-color: #fff;
 // $tabs-navigation-font-color: #222;
 // $tabs-navigation-font-size: rem-calc(16);
 // $tabs-navigation-font-family: $body-font-family;
diff --git a/scss/foundation/components/_tabs.scss b/scss/foundation/components/_tabs.scss
index 4578574d0..32d75d0e6 100644
--- a/scss/foundation/components/_tabs.scss
+++ b/scss/foundation/components/_tabs.scss
@@ -9,6 +9,7 @@ $include-html-tabs-classes: $include-html-classes !default;
 $tabs-navigation-padding: rem-calc(16) !default;
 $tabs-navigation-bg-color: #efefef !default;
 $tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%) !default;
+$tabs-navigation-active-bg-color: #fff !default;
 $tabs-navigation-font-color: #222 !default;
 $tabs-navigation-font-size: rem-calc(16) !default;
 $tabs-navigation-font-family: $body-font-family !default;
@@ -40,7 +41,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
           font-size: $tabs-navigation-font-size; 
           &:hover { background: $tabs-navigation-hover-bg-color; }
         }
-        &.active a { background: #fff; }
+        &.active a { background: $tabs-navigation-active-bg-color; }
       }
       &.radius {
         dd:first-child {
-- 
2.47.2