From 720d40c9111b2cd0368736edc427e4fe18c8352f Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 17 Jul 2015 12:34:22 -0500
Subject: [PATCH] feat(button): FABulous

---
 ionic/components/button/button.scss           | 36 +++++++++++++++++++
 .../button/extensions/material.scss           |  6 ++--
 ionic/components/button/test/fab/index.ts     |  7 ++++
 ionic/components/button/test/fab/main.html    | 10 ++++++
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 ionic/components/button/test/fab/index.ts
 create mode 100644 ionic/components/button/test/fab/main.html

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index eb089f14ba..978cd753d8 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -20,6 +20,7 @@ $button-small-height:             2.8rem !default;
 $button-small-padding:            1.1rem !default;
 $button-small-icon-size:          2.1rem !default;
 
+$button-fab-size:                56px;
 
 // Core Button
 // --------------------------------------------------
@@ -126,6 +127,41 @@ button,
     pointer-events: none;
   }
 
+  // FABulous buttons (Floating action button from material)
+
+  &[fab] {
+    position: absolute;
+    width: $button-fab-size;
+    height: $button-fab-size;
+    line-height: $button-fab-size;
+    min-width: 0;
+    vertical-align: middle;
+
+    border-radius: 50%;
+    background-clip: padding-box;
+
+    overflow: hidden;
+
+    transition: .2s linear;
+    transition-property: background-color;
+
+    &[fab-center] {
+      left: 50%;
+      margin-left: -$button-fab-size/2;
+    }
+    &[fab-top] {
+      top: 15px;
+    }
+    &[fab-right] {
+      right: 15px;
+    }
+    &[fab-bottom] {
+      bottom: 15px;
+    }
+    &[fab-left] {
+      left: 15px;
+    }
+  }
 }
 
 [full],
diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index 0ce7f386cc..d15a2fb640 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/ionic/components/button/extensions/material.scss
@@ -20,15 +20,15 @@ $button-material-border-radius:            3px !default;
   box-shadow: $button-material-box-shadow;
 
 
-  &.button-icon {
+  &[icon] {
     font-size: $button-icon-size;
   }
 
-  &.button-large.button-icon {
+  &[large][icon] {
     font-size: $button-large-icon-size;
   }
 
-  &.button-small.button-icon {
+  &[small][icon] {
     font-size: $button-small-icon-size;
   }
 
diff --git a/ionic/components/button/test/fab/index.ts b/ionic/components/button/test/fab/index.ts
new file mode 100644
index 0000000000..2dac2b7a35
--- /dev/null
+++ b/ionic/components/button/test/fab/index.ts
@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html
new file mode 100644
index 0000000000..5445ddb1b9
--- /dev/null
+++ b/ionic/components/button/test/fab/main.html
@@ -0,0 +1,10 @@
+
+<div>
+  <button fab fab-left fab-top primary><i class="icon ion-plus"></i></button>
+  <button fab fab-center fab-top secondary><i class="icon ion-plus"></i></button>
+  <button fab fab-right fab-top danger><i class="icon ion-plus"></i></button>
+
+  <button fab fab-left fab-bottom light><i class="icon ion-plus"></i></button>
+  <button fab fab-center fab-bottom stable><i class="icon ion-plus"></i></button>
+  <button fab fab-right fab-bottom dark><i class="icon ion-plus"></i></button>
+</div>