Allow configuring :hover colors

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index b585d7d087b0c6c8e9ba0f28cf965532b598359d..3dc365672f9f7463770494bd979c3a2b547a1fe8 100644 (file)
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -685,9 +685,11 @@ $include-html-global-classes: $include-html-classes;
 // $include-html-icon-bar-classes: $include-html-classes;
 // $icon-bar-bg: $oil;
 // $icon-bar-font-color: $white;
+// $icon-bar-font-color-hover: $icon-bar-font-color;
 // $icon-bar-font-size: 1rem;
 // $icon-bar-hover-color: $primary-color;
 // $icon-bar-icon-color: $white;
+// $icon-bar-icon-color-hover: $icon-bar-icon-color;
 // $icon-bar-icon-size: 1.875rem;
 // $icon-bar-image-width: 1.875rem;
 // $icon-bar-image-height: 1.875rem;

diff --git a/scss/foundation/components/_icon-bar.scss b/scss/foundation/components/_icon-bar.scss
index bfe4dcae092523c98f78ff5796a75845e5e98529..8f5d6a7e37682fe1ddc253317f6c95117b466f8d 100644 (file)
--- a/scss/foundation/components/_icon-bar.scss
+++ b/scss/foundation/components/_icon-bar.scss
@@ -15,9 +15,11 @@ $include-html-icon-bar-classes: $include-html-classes !default;
 // We use these to style the icon-bar and items
 $icon-bar-bg: $oil !default;
 $icon-bar-font-color: $white !default;
+$icon-bar-font-color-hover: $icon-bar-font-color !default;
 $icon-bar-font-size: 1rem !default;
 $icon-bar-hover-color: $primary-color !default;
 $icon-bar-icon-color: $white !default;
+$icon-bar-icon-color-hover: $icon-bar-icon-color !default;
 $icon-bar-icon-size: 1.875rem !default;
 $icon-bar-image-width: 1.875rem !default;
 $icon-bar-image-height: 1.875rem !default;
@@ -31,7 +33,7 @@ $icon-bar-item-padding: 1.25rem !default;
 // We use this mixin to create the base styles for our Icon bar element.
 //
 @mixin icon-bar-base() {
- 
+
        width: 100%;
        font-size: 0;
        display: inline-block;
@@ -45,9 +47,9 @@ $icon-bar-item-padding: 1.25rem !default;
                padding: $icon-bar-item-padding;
                float: left;
 
-               i, img { 
+               i, img {
                        display: block;
-                       margin: 0 auto; 
+                       margin: 0 auto;
 
                        & + label {
                                margin-top: .0625rem;
@@ -67,8 +69,8 @@ $icon-bar-item-padding: 1.25rem !default;
 
        &.label-right > * {
 
-               i, img { 
-                       margin: 0 .0625rem 0 0; 
+               i, img {
+                       margin: 0 .0625rem 0 0;
                        display: inline-block;
 
                        & + label {
@@ -132,7 +134,7 @@ $icon-bar-item-padding: 1.25rem !default;
                font-size: $font-size;
                padding: $padding;
 
-               i, img { 
+               i, img {
 
                        & + label {
                                margin-top: .0625rem;
@@ -154,24 +156,30 @@ $icon-bar-item-padding: 1.25rem !default;
 @mixin icon-bar-style(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
   $bar-hover-color:$icon-bar-hover-color,
   $bar-icon-color:$icon-bar-icon-color,
+  $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $bar-active-color:$icon-bar-active-color,
   $base-style:true) {
 
        @if $base-style {
-       
+
                background: $bar-bg;
 
                & > * {
+                       label { color: $bar-font-color; }
+
+                       i { color: $bar-icon-color; }
+               }
 
-                       &:hover { background: $bar-hover-color; }
+               & > a:hover {
 
-                       label { color: $bar-font-color; }
+                       background: $bar-hover-color;
 
-                       i {
-                               color: $bar-icon-color;
-                       }
+                       label { color: $bar-font-color-hover; }
+
+                       i { color: $bar-icon-color-hover; }
                }
        }
 
@@ -189,8 +197,10 @@ $icon-bar-item-padding: 1.25rem !default;
 @mixin icon-bar(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
   $bar-hover-color:$icon-bar-hover-color,
   $bar-icon-color:$icon-bar-icon-color,
+  $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $bar-active-color:$icon-bar-active-color,
   $padding: $icon-bar-item-padding,
        $font-size: $icon-bar-font-size,
@@ -200,7 +210,7 @@ $icon-bar-item-padding: 1.25rem !default;
   $base-style:true) {
     @include icon-bar-base();
     @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
-    @include icon-bar-style($bar-bg, $bar-font-color, $bar-hover-color, $bar-icon-color, $bar-active-color, $base-style);
+    @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style);
 }
 
 @include exports("icon-bar") {