fix(fab): colors in speed dial buttons

src/components/fab/fab.ios.scss

@@ -3,11 +3,40 @@
 // iOS FAB Button
 // --------------------------------------------------
 
-/// @prop - Border radius of the FAB button
+/// @prop - Background color of the button
-$button-ios-fab-border-radius:                      50% !default;
+$fab-ios-background-color:                    color($colors-ios, primary) !default;
 
-.fab-button {
+/// @prop - Text color of the button
-  border-radius: $button-ios-fab-border-radius;
+$fab-ios-text-color:                          color-contrast($colors-ios, $fab-ios-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-ios-background-color-activated:          color-shade($fab-ios-background-color) !default;
+
+/// @prop - Background color of the button
+$fab-ios-in-list-background-color:            color($colors-ios, light) !default;
+
+/// @prop - Text color of the button
+$fab-ios-in-list-text-color:                  color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-ios-in-list-background-color-activated:  color-shade($fab-ios-in-list-background-color) !default;
+
+.fab-ios {
+  color: $fab-ios-text-color;
+  background-color: $fab-ios-background-color;
+}
+
+.fab-ios.activated {
+  background-color: $fab-ios-background-color-activated;
+}
+
+.fab-ios.fab-in-list {
+  color: $fab-ios-in-list-text-color;
+  background-color: $fab-ios-in-list-background-color;
+}
+
+.fab-ios.fab-in-list.activated {
+  background-color: $fab-ios-in-list-background-color-activated;
 }
 
 
@@ -20,12 +49,12 @@ $button-ios-fab-border-radius:                      50% !default;
   $background-color-activated: color-shade($background-color);
   $fg-color: $color-contrast;
 
-  .fab-ios-#{$color-name} {
+  .fab-ios.fab-ios-#{$color-name} {
     color: $fg-color;
     background-color: $background-color;
   }
 
-  .fab-ios-#{$color-name}.activated {
+  .fab-ios.fab-ios-#{$color-name}.activated {
     background-color: $background-color-activated;
   }
 }

src/components/fab/fab.md.scss

@@ -3,31 +3,58 @@
 // Material Design FAB Button
 // --------------------------------------------------
 
-/// @prop - Border radius of the FAB button
-$button-md-fab-border-radius:                   50% !default;
-
 /// @prop - Box shadow of the FAB button
-$button-md-fab-box-shadow:                      0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow:                         0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
 
 /// @prop - Box shadow of the activated FAB button
-$button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow-activated:               0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+
+/// @prop - Background color of the button
+$fab-md-background-color:                   color($colors-md, primary) !default;
+
+/// @prop - Text color of the button
+$fab-md-text-color:                         color-contrast($colors-md, $fab-md-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-md-background-color-activated:         color-shade($fab-md-background-color) !default;
+
+/// @prop - Background color of the button
+$fab-md-in-list-background-color:           color($colors-md, light) !default;
+
+/// @prop - Text color of the button
+$fab-md-in-list-text-color:                 color-contrast($colors-md, $fab-md-in-list-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
 
 
-.fab-button {
+.fab-md {
-  border-radius: $button-md-fab-border-radius;
+  color: $fab-md-text-color;
-  box-shadow: $button-md-fab-box-shadow;
+  background-color: $fab-md-background-color;
+
+  box-shadow: $fab-md-box-shadow;
 
   transition: 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;
+}
 
-  &.activated {
+.fab-md.activated {
-    box-shadow: $button-md-fab-box-shadow-activated;
+  background-color: $fab-md-background-color-activated;
-  }
+  box-shadow: $fab-md-box-shadow-activated;
+}
+
+.fab-md.fab-in-list {
+  color: $fab-md-in-list-text-color;
+  background-color: $fab-md-in-list-background-color;
+}
+
+.fab-md.fab-wp.fab-in-list.activated {
+  background-color: $fab-md-in-list-background-color-activated;
 }
 
 
-// Generate iOS FAB colors
+// Generate MD FAB colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@@ -36,12 +63,12 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
   $background-color-activated: color-shade($background-color);
   $fg-color: $color-contrast;
 
-  .fab-md-#{$color-name} {
+  .fab-md.fab-md-#{$color-name} {
     color: $fg-color;
     background-color: $background-color;
   }
 
-  .fab-md-#{$color-name}.activated {
+  .fab-md.fab-md-#{$color-name}.activated {
     background-color: $background-color-activated;
   }
 }

src/components/fab/fab.scss

@@ -4,34 +4,33 @@
 // --------------------------------------------------
 
 /// @prop - Width and height of the FAB button
-$button-fab-size:            56px !default;
+$fab-size:            56px !default;
-$button-fab-mini-size:       40px !default;
+$fab-mini-size:       40px !default;
-$button-fab-content-margin:  10px !default;
+$fab-content-margin:  10px !default;
-$button-fab-list-margin:     10px !default;
+$fab-list-margin:     10px !default;
 
 
-.fab-button {
+.fab {
+  @include appearance(none);
+
   position: relative;
   z-index: 0;
   display: block;
   overflow: hidden;
 
-  width: $button-fab-size;
+  width: $fab-size;
-  height: $button-fab-size;
+  height: $fab-size;
 
+  border-radius: 50%;
   font-size: 14px;
-  line-height: $button-fab-size;
+  line-height: $fab-size;
   text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;
-  color: #fff;
-  background-color: #327eff;
   cursor: pointer;
   transition: background-color, opacity 100ms linear;
 
-  -moz-appearance: none;
-  -webkit-appearance: none;
   background-clip: padding-box;
   font-kerning: none;
   user-select: none;
@@ -46,16 +45,16 @@ $button-fab-list-margin:     10px !default;
 // FAB mini
 // --------------------------------------------------
 
-.fab-button[mini] {
+.fab[mini] {
-  margin: ($button-fab-size - $button-fab-mini-size) / 2;
+  margin: ($fab-size - $fab-mini-size) / 2;
 
-  width: $button-fab-mini-size;
+  width: $fab-mini-size;
-  height: $button-fab-mini-size;
+  height: $fab-mini-size;
 
-  line-height: $button-fab-mini-size;
+  line-height: $fab-mini-size;
 
   .fab-close-icon {
-    line-height: $button-fab-mini-size;
+    line-height: $fab-mini-size;
   }
 }
 
@@ -70,37 +69,37 @@ ion-fab {
   &[center] {
     left: 50%;
 
-    margin-left: -$button-fab-size / 2;
+    margin-left: -$fab-size / 2;
   }
 
   &[middle] {
     top: 50%;
 
-    margin-top: -$button-fab-size / 2;
+    margin-top: -$fab-size / 2;
   }
 
   &[top] {
-    top: $button-fab-content-margin;
+    top: $fab-content-margin;
   }
 
   &[right] {
-    right: $button-fab-content-margin;
+    right: $fab-content-margin;
   }
 
   &[bottom] {
-    bottom: $button-fab-content-margin;
+    bottom: $fab-content-margin;
   }
 
   &[left] {
-    left: $button-fab-content-margin;
+    left: $fab-content-margin;
   }
 
   &[top][edge] {
-    top: -$button-fab-size / 2;
+    top: -$fab-size / 2;
   }
 
   &[bottom][edge] {
-    bottom: -$button-fab-size / 2;
+    bottom: -$fab-size / 2;
   }
 }
 
@@ -116,32 +115,30 @@ ion-fab-list {
   flex-direction: column;
   align-items: center;
 
-  margin: $button-fab-size + $button-fab-list-margin 0;
+  margin: $fab-size + $fab-list-margin 0;
 
-  min-width: $button-fab-size;
+  min-width: $fab-size;
-  min-height: $button-fab-size;
+  min-height: $fab-size;
+}
 
-  .fab-button {
+ion-fab-list .fab-in-list {
   margin: 8px;
 
-    width: $button-fab-mini-size;
+  width: $fab-mini-size;
-    height: $button-fab-mini-size;
+  height: $fab-mini-size;
 
-    color: #797979;
-    background: #fff;
   opacity: 0;
   visibility: hidden;
   transform: scale(0);
   transition: all 200ms ease;
   transition-delay: 10ms;
   transition-property: transform, opacity;
+}
 
-    &.fab-dial-button-visible {
+ion-fab-list .fab-in-list.show {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
-    }
-  }
 }
 
 ion-fab-list[side=top] {
@@ -156,7 +153,7 @@ ion-fab-list[side=left] {
 
   flex-direction: row-reverse;
 
-  margin: 0 $button-fab-size + $button-fab-list-margin;
+  margin: 0 $fab-size + $fab-list-margin;
 }
 
 ion-fab-list[side=right] {
@@ -164,7 +161,7 @@ ion-fab-list[side=right] {
 
   flex-direction: row;
 
-  margin: 0 $button-fab-size + $button-fab-list-margin;
+  margin: 0 $fab-size + $fab-list-margin;
 }
 
 
@@ -181,13 +178,13 @@ ion-fab-list[side=right] {
   right: 0;
   left: 0;
 
-  line-height: $button-fab-size;
+  line-height: $fab-size;
   opacity: 0;
   transform: scale(.4) rotateZ(-45deg);
   transition: all ease-in-out 300ms;
 }
 
-.fab-button .button-inner {
+.fab .button-inner {
   transition: all ease-in-out 300ms;
 }
 

src/components/fab/fab.ts

@@ -65,12 +65,6 @@ import { isTrueProperty } from '../../util/util';
 })
 export class FabButton extends Ion  {
 
-  /**
-   * @private
-   */
-  ngAfterContentInit() {
-    this.setElementClass('fab-button', true); // set role
-  }
   /**
    * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
    */
@@ -93,6 +87,7 @@ export class FabButton extends Ion  {
     renderer: Renderer,
   ) {
     super(config, elementRef, renderer);
+    this.setElementClass('fab', true); // set role
     this.mode = config.get('mode');
   }
 
@@ -120,8 +115,15 @@ export class FabButton extends Ion  {
 })
 export class FabList {
   _visible: boolean = false;
+  _fabs: FabButton[] = [];
 
-  @ContentChildren(FabButton) _buttons: QueryList<FabButton>;
+  @ContentChildren(FabButton)
+  set _setbuttons(query: QueryList<FabButton>) {
+    let fabs = this._fabs = query.toArray();
+    for (var fab of fabs) {
+      fab.setElementClass('fab-in-list', true);
+    }
+  }
 
   /**
    * @private
@@ -132,15 +134,15 @@ export class FabList {
       return;
     }
 
-    let buttons = this._buttons.toArray();
+    let fabs = this._fabs;
     let i = 1;
     if (visible) {
-      buttons.forEach(fab => {
+      fabs.forEach(fab => {
-        setTimeout(() => fab.setElementClass('fab-dial-button-visible', true), i * 30);
+        setTimeout(() => fab.setElementClass('show', true), i * 30);
         i++;
       });
     } else {
-      buttons.forEach(fab => fab.setElementClass('fab-dial-button-visible', false));
+      fabs.forEach(fab => fab.setElementClass('show', false));
     }
     this._visible = visible;
   }

src/components/fab/fab.wp.scss

@@ -3,16 +3,45 @@
 // Windows FAB Button
 // --------------------------------------------------
 
-/// @prop - Border radius of the FAB button
+/// @prop - Background color of the button
-$button-wp-fab-border-radius:                             50% !default;
+$fab-wp-background-color:                   color($colors-wp, primary) !default;
+
+/// @prop - Text color of the button
+$fab-wp-text-color:                         color-contrast($colors-wp, $fab-wp-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-wp-background-color-activated:         color-shade($fab-wp-background-color) !default;
+
+/// @prop - Background color of the button
+$fab-wp-in-list-background-color:           color($colors-wp, light) !default;
+
+/// @prop - Text color of the button
+$fab-wp-in-list-text-color:                 color-contrast($colors-wp, $fab-wp-in-list-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-background-color) !default;
 
 
-.fab-button {
+.fab-wp {
-  border-radius: $button-wp-fab-border-radius;
+  color: $fab-wp-text-color;
+  background-color: $fab-wp-background-color;
+}
+
+.fab-wp.activated {
+  background-color: $fab-wp-background-color-activated;
+}
+
+.fab-wp.fab-in-list {
+  color: $fab-wp-in-list-text-color;
+  background-color: $fab-wp-in-list-background-color;
+}
+
+.fab-wp.fab-in-list.activated {
+  background-color: $fab-wp-in-list-background-color-activated;
 }
 
 
-// Generate iOS FAB colors
+// Generate WP FAB colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
@@ -21,12 +50,12 @@ $button-wp-fab-border-radius:                             50% !default;
   $background-color-activated: color-shade($background-color);
   $fg-color: $color-contrast;
 
-  .fab-wp-#{$color-name} {
+  .fab-wp.fab-wp-#{$color-name} {
     color: $fg-color;
     background-color: $background-color;
   }
 
-  .fab-wp-#{$color-name}.activated {
+  .fab-wp.fab-wp-#{$color-name}.activated {
     background-color: $background-color-activated;
   }
 }

src/components/fab/test/basic/main.html

@@ -53,16 +53,16 @@
   <ion-fab center middle #fab5>
     <button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
     <ion-fab-list side="top">
-      <button ion-fab (click)="openSocial('vimeo', fab5)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
     </ion-fab-list>
     <ion-fab-list side="bottom">
-      <button ion-fab (click)="openSocial('facebook', fab5)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
     </ion-fab-list>
     <ion-fab-list side="left">
-      <button ion-fab (click)="openSocial('googleplus', fab5)"><ion-icon name="logo-googleplus"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
     </ion-fab-list>
     <ion-fab-list side="right">
-      <button ion-fab (click)="openSocial('twitter', fab5)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
     </ion-fab-list>
   </ion-fab>