From 0514cec9026241f049771cbdb35217f725a967ef Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 7 Feb 2018 17:48:37 -0500
Subject: [PATCH] fix(fab): remove button dependency and fix button color

---
 .../core/src/components/fab-button/fab-button.ios.vars.scss | 2 +-
 .../core/src/components/fab-button/fab-button.md.vars.scss  | 2 +-
 packages/core/src/components/fab-button/fab-button.scss     | 6 +++---
 packages/core/src/components/fab-button/fab-button.tsx      | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/components/fab-button/fab-button.ios.vars.scss b/packages/core/src/components/fab-button/fab-button.ios.vars.scss
index 5db7ebbcd9..395016c5be 100755
--- a/packages/core/src/components/fab-button/fab-button.ios.vars.scss
+++ b/packages/core/src/components/fab-button/fab-button.ios.vars.scss
@@ -19,7 +19,7 @@ $fab-ios-icon-fill-color:                               $fab-ios-text-color !def
 $fab-ios-background-color-activated:                    ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default;
 
 /// @prop - Background color of the button in a list
-$fab-ios-list-button-background-color:                  ion-color($colors-ios, tertiary, base, ios) !default;
+$fab-ios-list-button-background-color:                  ion-color($colors-ios, light, base, ios) !default;
 
 /// @prop - Background color of the button in a list
 $fab-ios-list-button-translucent-background-color:      ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
diff --git a/packages/core/src/components/fab-button/fab-button.md.vars.scss b/packages/core/src/components/fab-button/fab-button.md.vars.scss
index 79252eaeae..eabe370bf1 100755
--- a/packages/core/src/components/fab-button/fab-button.md.vars.scss
+++ b/packages/core/src/components/fab-button/fab-button.md.vars.scss
@@ -22,7 +22,7 @@ $fab-md-icon-fill-color:                          $fab-md-text-color !default;
 $fab-md-background-color-activated:               ion-color($colors-md, $fab-md-background-color, tint, md) !default;
 
 /// @prop - Background color of the button in a list
-$fab-md-list-button-background-color:             ion-color($colors-md, tertiary, base, md) !default;
+$fab-md-list-button-background-color:             ion-color($colors-md, light, base, md) !default;
 
 /// @prop - Text color of the button in a list
 $fab-md-list-button-text-color:                   ion-color($colors-md, $fab-md-list-button-background-color, contrast, md) !default;
diff --git a/packages/core/src/components/fab-button/fab-button.scss b/packages/core/src/components/fab-button/fab-button.scss
index ab793686bc..4fe327e985 100755
--- a/packages/core/src/components/fab-button/fab-button.scss
+++ b/packages/core/src/components/fab-button/fab-button.scss
@@ -43,7 +43,7 @@
   line-height: 1;
 }
 
-.button-inner {
+.fab-button-inner {
   display: flex;
 
   flex-flow: row nowrap;
@@ -93,7 +93,7 @@ ion-fab-button[mini] .fab-button {
 // FAB Animation
 // --------------------------------------------------
 
-.fab-button .button-inner {
+.fab-button-inner {
   transition: all ease-in-out 300ms;
   transition-property: transform, opacity;
 }
@@ -103,7 +103,7 @@ ion-fab-button[mini] .fab-button {
   transform: scale(1) rotateZ(0deg);
 }
 
-.fab-button-close-active .button-inner {
+.fab-button-close-active .fab-button-inner {
   opacity: 0;
   transform: scale(.4) rotateZ(45deg);
 }
diff --git a/packages/core/src/components/fab-button/fab-button.tsx b/packages/core/src/components/fab-button/fab-button.tsx
index 6989b57ddf..5e92fef479 100755
--- a/packages/core/src/components/fab-button/fab-button.tsx
+++ b/packages/core/src/components/fab-button/fab-button.tsx
@@ -102,7 +102,7 @@ export class FabButton {
         href={this.href}
         onClick={this.clickedFab.bind(this)}>
         <ion-icon name='close' class='fab-button-close-icon'></ion-icon>
-        <span class='button-inner'>
+        <span class='fab-button-inner'>
           <slot></slot>
         </span>
         { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }