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

Author: brandyscarney

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 {

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
 // --------------------------------------------------

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);

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 {