From 2003ae48d5d5246fcc405370999f6ac788549520 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 28 Oct 2016 13:28:15 -0400
Subject: [PATCH] fix(sass): rename $background-color variable in our loops
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We were overriding this variable so the user couldn’t reference what
they set it to.

Fixes #8475
---
 src/components/button/button.ios.scss |  8 ++++----
 src/components/button/button.md.scss  | 10 +++++-----
 src/components/fab/fab.ios.scss       |  8 ++++----
 src/components/fab/fab.md.scss        |  8 ++++----
 src/components/fab/fab.wp.scss        |  8 ++++----
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss
index 2fcf687d9d6..7d96190e5aa 100644
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -157,17 +157,17 @@ $button-ios-round-border-radius:                    $button-round-border-radius
 // --------------------------------------------------
 
 @mixin ios-button-default($color-name, $color-base, $color-contrast) {
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .button-ios-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .button-ios-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }
 
diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss
index a98cab64842..36f0a2c5282 100644
--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -204,21 +204,21 @@ $button-md-round-border-radius:                 $button-round-border-radius !def
 // --------------------------------------------------
 
 @mixin md-button-default($color-name, $color-base, $color-contrast) {
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .button-md-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .button-md-#{$color-name}:hover:not(.disable-hover) {
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .button-md-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
     opacity: $button-md-opacity-activated;
   }
 
diff --git a/src/components/fab/fab.ios.scss b/src/components/fab/fab.ios.scss
index 6630fb0e13d..40995f3f02f 100755
--- a/src/components/fab/fab.ios.scss
+++ b/src/components/fab/fab.ios.scss
@@ -45,17 +45,17 @@ $fab-ios-in-list-background-color-activated:  color-shade($fab-ios-in-list-backg
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .fab-ios.fab-ios-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .fab-ios.fab-ios-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }
 
diff --git a/src/components/fab/fab.md.scss b/src/components/fab/fab.md.scss
index 63dd0586ffb..1586ae7aaaf 100755
--- a/src/components/fab/fab.md.scss
+++ b/src/components/fab/fab.md.scss
@@ -59,17 +59,17 @@ $fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-backgrou
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .fab-md.fab-md-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .fab-md.fab-md-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }
 
diff --git a/src/components/fab/fab.wp.scss b/src/components/fab/fab.wp.scss
index b7da51b0cbe..3337cc07c16 100755
--- a/src/components/fab/fab.wp.scss
+++ b/src/components/fab/fab.wp.scss
@@ -46,16 +46,16 @@ $fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-backgrou
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .fab-wp.fab-wp-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .fab-wp.fab-wp-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }