feat(fab): Introduces new floating action buttons

src/components/button/button.ios.scss

@@ -311,14 +311,6 @@ $button-ios-fab-border-radius:                      50% !default;
 }
 
 
-// iOS FAB Button
-// --------------------------------------------------
-
-.button-fab-ios {
-  border-radius: $button-ios-fab-border-radius;
-}
-
-
 // Generate iOS Button Colors
 // --------------------------------------------------
 

src/components/button/button.md.scss

@@ -394,23 +394,6 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
   border-radius: $button-md-round-border-radius;
 }
 
-
-// Material Design FAB Button
-// --------------------------------------------------
-
-.button-fab-md {
-  border-radius: $button-md-fab-border-radius;
-  box-shadow: $button-md-fab-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;
-}
-
-.button-fab-md.activated {
-  box-shadow: $button-md-fab-box-shadow-activated;
-}
-
 .button-md [icon-only] {
   padding: 0;
 }

src/components/button/button.wp.scss

@@ -309,14 +309,6 @@ $button-wp-fab-border-radius:                             50% !default;
   border-radius: $button-wp-round-border-radius;
 }
 
-
-// Windows FAB Button
-// --------------------------------------------------
-
-.button-fab-wp {
-  border-radius: $button-wp-fab-border-radius;
-}
-
 .button-wp [icon-only] {
   padding: 0;
 }

src/components/content/content.scss

@@ -66,10 +66,17 @@ ion-content.js-scroll > .scroll-content {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: $z-index-scroll-content;
   display: block;
 }
 
+[ion-fixed] {
+  position: absolute;
+
+  z-index: $z-index-fixed-content;
+
+  transform: translateZ(0);
+}
+
 
 // Content Padding
 // --------------------------------------------------
@@ -165,15 +172,3 @@ ion-content.js-scroll > .scroll-content {
     margin-left: $content-margin;
   }
 }
-
-
-// Content Fixed
-// --------------------------------------------------
-
-ion-fixed {
-  position: absolute;
-
-  z-index: $z-index-fixed-content;
-
-  transform: translateZ(0);
-}

src/components/content/content.ts

@@ -104,7 +104,7 @@ import { isTrueProperty } from '../../util/util';
   selector: 'ion-content',
   template:
     '<div class="fixed-content">' +
-      '<ng-content select="[ion-fixed]"></ng-content>' +
+      '<ng-content select="[ion-fixed],ion-fab"></ng-content>' +
     '</div>' +
     '<div class="scroll-content">' +
       '<ng-content></ng-content>' +
@@ -182,7 +182,7 @@ export class Content extends Ion {
    * @private
    */
   ngOnInit() {
-    this._fixedEle =  this._elementRef.nativeElement.children[0];
+    this._fixedEle = this._elementRef.nativeElement.children[0];
     this._scrollEle = this._elementRef.nativeElement.children[1];
 
     this._zone.runOutsideAngular(() => {

src/components/fab/fab.ios.scss

@@ -0,0 +1,37 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS FAB Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the FAB button
+$button-ios-fab-border-radius:                      50% !default;
+
+.fab-button {
+  border-radius: $button-ios-fab-border-radius;
+}
+
+// iOS does not use the button effect
+ion-button-effect {
+  display: none;
+}
+
+
+// Generate iOS FAB colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  $background-color: $color-base;
+  $background-color-activated: color-shade($background-color);
+  $fg-color: $color-contrast;
+
+  .fab-ios-#{$color-name} {
+    color: $fg-color;
+    background-color: $background-color;
+  }
+
+  .fab-ios-#{$color-name}.activated {
+    background-color: $background-color-activated;
+  }
+}
+

src/components/fab/fab.md.scss

@@ -0,0 +1,51 @@
+@import "../../themes/ionic.globals.md";
+
+// 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;
+
+/// @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-button {
+  border-radius: $button-md-fab-border-radius;
+  box-shadow: $button-md-fab-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 {
+    box-shadow: $button-md-fab-box-shadow-activated;
+  }
+}
+
+[icon-only] {
+  padding: 0;
+}
+
+// Generate iOS FAB colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  $background-color: $color-base;
+  $background-color-activated: color-shade($background-color);
+  $fg-color: $color-contrast;
+
+  .fab-md-#{$color-name} {
+    color: $fg-color;
+    background-color: $background-color;
+  }
+
+  .fab-md-#{$color-name}.activated {
+    background-color: $background-color-activated;
+  }
+}
+