fix(fab): fix the icon colors and fixed styles

packages/core/src/components/fab/fab.ios.scss

@@ -11,7 +11,7 @@ $fab-ios-background-color:                        color($colors-ios, primary) !d
 $fab-ios-text-color:                              color-contrast($colors-ios, $fab-ios-background-color) !default;
 
 /// @prop - Color of the button icon
-$fab-ios-icon-color:                              color-contrast($colors-ios, $fab-ios-background-color) !default;
+$fab-ios-icon-fill-color:                         $fab-ios-text-color !default;
 
 /// @prop - Background color of the activated button
 $fab-ios-background-color-activated:              color-shade($fab-ios-background-color) !default;
@@ -22,6 +22,9 @@ $fab-ios-list-button-background-color:            $fab-list-button-background-co
 /// @prop - Text color of the button in a list
 $fab-ios-list-button-text-color:                  color-contrast($colors-ios, $fab-ios-list-button-background-color) !default;
 
+/// @prop - Color of the button icon in a list
+$fab-ios-list-icon-fill-color:                    $fab-ios-list-button-text-color !default;
+
 /// @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;
 
@@ -44,6 +47,13 @@ $fab-ios-list-button-transition-delay:            10ms !default;
   background-color: $fab-ios-background-color-activated;
 }
 
+.fab-ios .icon {
+  fill: $fab-ios-icon-fill-color;
+}
+
+// FAB buttons in a list
+// --------------------------------------------------
+
 .fab-ios-in-list {
   color: $fab-ios-list-button-text-color;
   background-color: $fab-ios-list-button-background-color;
@@ -56,8 +66,8 @@ $fab-ios-list-button-transition-delay:            10ms !default;
   background-color: $fab-ios-list-button-background-color-activated;
 }
 
-.fab-ios .icon {
+.fab-ios-in-list .icon {
-  fill: $fab-ios-icon-color;
+  fill: $fab-ios-list-icon-fill-color;
 }
 
 

packages/core/src/components/fab/fab.md.scss

@@ -16,6 +16,9 @@ $fab-md-background-color:                         color($colors-md, primary) !de
 /// @prop - Text color of the button
 $fab-md-text-color:                               color-contrast($colors-md, $fab-md-background-color) !default;
 
+/// @prop - Color of the button icon
+$fab-md-icon-fill-color:                          $fab-md-text-color !default;
+
 /// @prop - Background color of the activated button
 $fab-md-background-color-activated:               color-shade($fab-md-background-color) !default;
 
@@ -25,6 +28,9 @@ $fab-md-list-button-background-color:             $fab-list-button-background-co
 /// @prop - Text color of the button in a list
 $fab-md-list-button-text-color:                   color-contrast($colors-md, $fab-md-list-button-background-color) !default;
 
+/// @prop - Color of the button icon in a list
+$fab-md-list-icon-fill-color:                     $fab-md-list-button-text-color !default;
+
 /// @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;
 
@@ -37,9 +43,11 @@ $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;
 
+/// @prop - Transition duration of the box-shadow and background-color of the button
 $fab-button-md-transition-duration:               300ms !default;
 
-$fab-button-md-transition-timing-function:     cubic-bezier(.4, 0, .2, 1) !default;
+/// @prop - Speed curve of the transition of the box-shadow and background-color of the button
+$fab-button-md-transition-timing-function:        cubic-bezier(.4, 0, .2, 1) !default;
 
 
 .fab-md {
@@ -58,6 +66,14 @@ $fab-button-md-transition-timing-function:     cubic-bezier(.4, 0, .2, 1) !defau
   box-shadow: $fab-md-box-shadow-activated;
 }
 
+.fab-md .icon {
+  fill: $fab-md-icon-fill-color;
+}
+
+
+// FAB buttons in a list
+// --------------------------------------------------
+
 .fab-md-in-list {
   color: $fab-md-list-button-text-color;
   background-color: $fab-md-list-button-background-color;
@@ -73,6 +89,11 @@ $fab-button-md-transition-timing-function:     cubic-bezier(.4, 0, .2, 1) !defau
   background-color: $fab-md-list-button-background-color-activated;
 }
 
+.fab-md-in-list .icon {
+  fill: $fab-md-list-icon-fill-color;
+}
+
+
 // Material Design FAB Ripple
 // --------------------------------------------------
 
@@ -95,6 +116,10 @@ $fab-button-md-transition-timing-function:     cubic-bezier(.4, 0, .2, 1) !defau
     background-color: $bg-color;
   }
 
+  .fab-md-#{$color-name} .icon {
+    fill: $fg-color;
+  }
+
   .fab-md-#{$color-name}.activated {
     background-color: $bg-color-activated;
   }

packages/core/src/components/fab/fab.wp.scss

@@ -10,6 +10,9 @@ $fab-wp-background-color:                         color($colors-wp, primary) !de
 /// @prop - Text color of the button
 $fab-wp-text-color:                               color-contrast($colors-wp, $fab-wp-background-color) !default;
 
+/// @prop - Color of the button icon
+$fab-wp-icon-fill-color:                          $fab-wp-text-color !default;
+
 /// @prop - Background color of the activated button
 $fab-wp-background-color-activated:               color-shade($fab-wp-background-color) !default;
 
@@ -19,6 +22,9 @@ $fab-wp-list-button-background-color:             $fab-list-button-background-co
 /// @prop - Text color of the button in a list
 $fab-wp-list-button-text-color:                   color-contrast($colors-wp, $fab-wp-list-button-background-color) !default;
 
+/// @prop - Color of the button icon in a list
+$fab-wp-list-icon-fill-color:                     $fab-wp-list-button-text-color !default;
+
 /// @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;
 
@@ -41,6 +47,14 @@ $fab-wp-list-button-transition-delay:             10ms !default;
   background-color: $fab-wp-background-color-activated;
 }
 
+.fab-wp .icon {
+  fill: $fab-wp-icon-fill-color;
+}
+
+
+// FAB buttons in a list
+// --------------------------------------------------
+
 .fab-wp-in-list {
   color: $fab-wp-list-button-text-color;
   background-color: $fab-wp-list-button-background-color;
@@ -53,6 +67,10 @@ $fab-wp-list-button-transition-delay:             10ms !default;
   background-color: $fab-wp-list-button-background-color-activated;
 }
 
+.fab-wp-in-list .icon {
+  fill: $fab-wp-list-icon-fill-color;
+}
+
 
 // Generate WP FAB colors
 // --------------------------------------------------
@@ -68,6 +86,10 @@ $fab-wp-list-button-transition-delay:             10ms !default;
     background-color: $bg-color;
   }
 
+  .fab-wp-#{$color-name} .icon {
+    fill: $fg-color;
+  }
+
   .fab-wp-#{$color-name}.activated {
     background-color: $bg-color-activated;
   }

packages/core/src/components/fixed/fixed.tsx

@@ -4,7 +4,13 @@ import { getParentElement, getToolbarHeight } from '../../utils/helpers';
 
 @Component({
   tag: 'ion-fixed',
-  styleUrl: 'fixed.scss'
+  styleUrl: 'fixed.scss',
+  // TODO REMOVE when https://github.com/ionic-team/stencil/issues/52 is done
+  styleUrls: {
+    ios: 'fixed.scss',
+    md: 'fixed.scss',
+    wp: 'fixed.scss'
+  }
 })
 export class Fixed {
   @Element() private el: HTMLElement;