Adds a variable for the background color of the active tab in the tab component.

diff --git a/doc/includes/tabs/examples_tabs_variables.html b/doc/includes/tabs/examples_tabs_variables.html
index ac52a42f0ae6c3746979891198ab71b796377915..75355fb1d577d765241aef7da4b758a9f19579b0 100644 (file)
--- 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 2e349244d163ed45e506e9326fa39db741ade01e..c3645c5257714551645eff45b1fc1eec271ca839 100644 (file)
--- 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 4578574d0fdb5265ce9a9c7d6b0e3fb9b2433da9..32d75d0e6c27820458c0e75d9e1ed2bbfb0c01d2 100644 (file)
--- 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 {