Allow configuring :hover colors

foundation · Oct 7, 2014 · 759f3df · 759f3df
1 parent 8aa918e
commit 759f3df
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git 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
@@ -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") {