#6429 added accordion-navigation-active-font-color

diff --git a/doc/includes/accordion/examples_accordion_variables.html b/doc/includes/accordion/examples_accordion_variables.html
index 5c83a34a2b770fb7b089ce433bb80d9e2093deee..f251da0426f624dddb72718e8b8ced6463d9f4ed 100644 (file)
--- a/doc/includes/accordion/examples_accordion_variables.html
+++ b/doc/includes/accordion/examples_accordion_variables.html
@@ -6,6 +6,7 @@ $accordion-navigation-padding: rem-calc(16);
 $accordion-navigation-bg-color: $silver;
 $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
 $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
+$accordion-navigation-active-font-color: $jet;
 $accordion-navigation-font-color: $jet;
 $accordion-navigation-font-size: rem-calc(16);
 $accordion-navigation-font-family: $body-font-family;

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index e4b3e92da00e95d60a91235181b4fbfc1d982317..3acc2f25eddec1461450ce3e7d8487cae9de4f9a 100644 (file)
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -336,6 +336,7 @@ $include-html-global-classes: $include-html-classes;
 // $accordion-navigation-bg-color: $silver;
 // $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
 // $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
+// $accordion-navigation-active-font-color: $jet;
 // $accordion-navigation-font-color: $jet;
 // $accordion-navigation-font-size: rem-calc(16);
 // $accordion-navigation-font-family: $body-font-family;

diff --git a/scss/foundation/components/_accordion.scss b/scss/foundation/components/_accordion.scss
index de4a5ea518a3816f1f716e3fc0f0f27e53face5b..cc5138d8c210f274dd8fbb695c6fc401b4631d2d 100644 (file)
--- a/scss/foundation/components/_accordion.scss
+++ b/scss/foundation/components/_accordion.scss
@@ -14,6 +14,7 @@ $accordion-navigation-padding: rem-calc(16) !default;
 $accordion-navigation-bg-color: $silver !default;
 $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
 $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
+$accordion-navigation-active-font-color: $jet !default;
 $accordion-navigation-font-color: $jet !default;
 $accordion-navigation-font-size: rem-calc(16) !default;
 $accordion-navigation-font-family: $body-font-family !default;
@@ -40,8 +41,9 @@ $accordion-content-active-bg-color: $white !default;
 //    @params $font-color [ color or string ]: Color of the font for accordion
 //    @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
 //    @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
+//    @params $active-font [ color or string ]: Specify the font color for the navigation element when active.
 
-@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ) {
+@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family, $active-font: $accordion-navigation-active-font-color ) {
   display: block;
   margin-bottom: 0 !important;
   @if type-of($active_class) != "string" {
@@ -50,6 +52,7 @@ $accordion-content-active-bg-color: $white !default;
   @else {
     &.#{ $active_class } > a {
       background: $active-bg;
+      color: $active-font;
     }
   }
   > a {
@@ -132,7 +135,7 @@ $accordion-content-active-bg-color: $white !default;
       .accordion-navigation, dd {
         display: block;
         margin-bottom: 0 !important;
-        &.active > a { background: $accordion-navigation-active-bg-color; }
+        &.active > a { background: $accordion-navigation-active-bg-color; color: $accordion-navigation-active-font-color; }
         > a {
           background: $accordion-navigation-bg-color;
           color: $accordion-navigation-font-color;