From 1e2374f9100c1f2530f9b65083a6ef7ca56ccbdf Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 8 Dec 2016 13:01:21 -0500
Subject: [PATCH] fix(fab): add box shadow transition for md fab list buttons

This adds the box-shadow, background-color, and color to the transition
for Material Design buttons in a fab list, Sass variables for this
transition in all modes, it also defaults the md ripple color to the
contrast of the fab button color (which by default is primary).

Closes #9557
---
 src/components/fab/fab.ios.scss | 12 ++++++++++++
 src/components/fab/fab.md.scss  | 22 ++++++++++++++++++++++
 src/components/fab/fab.scss     |  7 ++-----
 src/components/fab/fab.wp.scss  | 12 ++++++++++++
 4 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/components/fab/fab.ios.scss b/src/components/fab/fab.ios.scss
index 1c6c747c98..5cfa6ca274 100755
--- a/src/components/fab/fab.ios.scss
+++ b/src/components/fab/fab.ios.scss
@@ -21,6 +21,15 @@ $fab-ios-list-button-text-color:                  color-contrast($colors-ios, $f
 /// @prop - Background color of the activated button in a list
 $fab-ios-list-button-background-color-activated:  color-shade($fab-ios-list-button-background-color) !default;
 
+/// @prop - Transition duration of the transform and opacity of the button in a list
+$fab-ios-list-button-transition-duration:         200ms !default;
+
+/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
+$fab-ios-list-button-transition-timing-function:  ease !default;
+
+/// @prop - Transition delay of the transform and opacity of the button in a list
+$fab-ios-list-button-transition-delay:            10ms !default;
+
 
 .fab-ios {
   color: $fab-ios-text-color;
@@ -34,6 +43,9 @@ $fab-ios-list-button-background-color-activated:  color-shade($fab-ios-list-butt
 .fab-ios-in-list {
   color: $fab-ios-list-button-text-color;
   background-color: $fab-ios-list-button-background-color;
+
+  transition: transform $fab-ios-list-button-transition-duration $fab-ios-list-button-transition-timing-function $fab-ios-list-button-transition-delay,
+              opacity $fab-ios-list-button-transition-duration $fab-ios-list-button-transition-timing-function $fab-ios-list-button-transition-delay;
 }
 
 .fab-ios-in-list.activated {
diff --git a/src/components/fab/fab.md.scss b/src/components/fab/fab.md.scss
index 3e73b423d1..a8b2fd45e1 100755
--- a/src/components/fab/fab.md.scss
+++ b/src/components/fab/fab.md.scss
@@ -27,6 +27,15 @@ $fab-md-list-button-text-color:                   color-contrast($colors-md, $fa
 /// @prop - Background color of the activated button in a list
 $fab-md-list-button-background-color-activated:   color-shade($fab-md-list-button-background-color) !default;
 
+/// @prop - Transition duration of the transform and opacity of the button in a list
+$fab-md-list-button-transition-duration:          200ms !default;
+
+/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
+$fab-md-list-button-transition-timing-function:   ease !default;
+
+/// @prop - Transition delay of the transform and opacity of the button in a list
+$fab-md-list-button-transition-delay:             10ms !default;
+
 
 .fab-md {
   color: $fab-md-text-color;
@@ -47,12 +56,25 @@ $fab-md-list-button-background-color-activated:   color-shade($fab-md-list-butto
 .fab-md-in-list {
   color: $fab-md-list-button-text-color;
   background-color: $fab-md-list-button-background-color;
+
+  transition: transform $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
+              opacity $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
+              box-shadow $button-md-transition-duration $button-md-transition-timing-function,
+              background-color $button-md-transition-duration $button-md-transition-timing-function,
+              color $button-md-transition-duration $button-md-transition-timing-function;
 }
 
 .fab-md-in-list.activated {
   background-color: $fab-md-list-button-background-color-activated;
 }
 
+// Material Design FAB Ripple
+// --------------------------------------------------
+
+.fab-md .button-effect {
+  background-color: color-contrast($colors-md, $fab-md-background-color);
+}
+
 
 // Generate MD FAB colors
 // --------------------------------------------------
diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss
index fb12d37cbb..d084c26568 100755
--- a/src/components/fab/fab.scss
+++ b/src/components/fab/fab.scss
@@ -132,7 +132,7 @@ ion-fab-list {
   min-height: $fab-size;
 }
 
-ion-fab-list .fab-in-list {
+.fab-in-list {
   margin: 8px 0;
 
   width: $fab-mini-size;
@@ -141,12 +141,9 @@ ion-fab-list .fab-in-list {
   opacity: 0;
   visibility: hidden;
   transform: scale(0);
-  transition: all 200ms ease;
-  transition-delay: 10ms;
-  transition-property: transform, opacity;
 }
 
-ion-fab-list .fab-in-list.show {
+.fab-in-list.show {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
diff --git a/src/components/fab/fab.wp.scss b/src/components/fab/fab.wp.scss
index 0c02f55faf..25429f9411 100755
--- a/src/components/fab/fab.wp.scss
+++ b/src/components/fab/fab.wp.scss
@@ -21,6 +21,15 @@ $fab-wp-list-button-text-color:                   color-contrast($colors-wp, $fa
 /// @prop - Background color of the activated button in a list
 $fab-wp-list-button-background-color-activated:   color-shade($fab-wp-list-button-background-color) !default;
 
+/// @prop - Transition duration of the transform and opacity of the button in a list
+$fab-wp-list-button-transition-duration:          200ms !default;
+
+/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
+$fab-wp-list-button-transition-timing-function:   ease !default;
+
+/// @prop - Transition delay of the transform and opacity of the button in a list
+$fab-wp-list-button-transition-delay:             10ms !default;
+
 
 .fab-wp {
   color: $fab-wp-text-color;
@@ -34,6 +43,9 @@ $fab-wp-list-button-background-color-activated:   color-shade($fab-wp-list-butto
 .fab-wp-in-list {
   color: $fab-wp-list-button-text-color;
   background-color: $fab-wp-list-button-background-color;
+
+  transition: transform $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay,
+              opacity $fab-wp-list-button-transition-duration $fab-wp-list-button-transition-timing-function $fab-wp-list-button-transition-delay;
 }
 
 .fab-wp-in-list.activated {