From d26074a17f6e4f11272450596e8c29e56d002b2a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 21 Mar 2018 11:56:09 -0400
Subject: [PATCH] feat(fab): add box shadow and transition for ios

---
 .../components/fab-button/fab-button.ios.scss  | 11 +++++++++++
 .../fab-button/fab-button.ios.vars.scss        | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss
index 545b90c137..27321eebbd 100755
--- a/core/src/components/fab-button/fab-button.ios.scss
+++ b/core/src/components/fab-button/fab-button.ios.scss
@@ -7,14 +7,25 @@
 .fab-button-ios {
   color: $fab-ios-text-color;
   background-color: $fab-ios-background-color;
+
+  box-shadow: $fab-ios-box-shadow;
+
+  transition: $fab-ios-transition;
 }
 
 .fab-button-ios.activated {
   background-color: $fab-ios-background-color-activated;
+
+  box-shadow: $fab-ios-box-shadow-activated;
+
+  transform: $fab-ios-transform;
+  transition: $fab-ios-transition-activated;
 }
 
 .fab-button-ios .icon {
   fill: $fab-ios-icon-fill-color;
+
+  font-size: $fab-ios-icon-font-size;
 }
 
 // FAB buttons in a list
diff --git a/core/src/components/fab-button/fab-button.ios.vars.scss b/core/src/components/fab-button/fab-button.ios.vars.scss
index 157e5aa8f1..f308b3f24d 100755
--- a/core/src/components/fab-button/fab-button.ios.vars.scss
+++ b/core/src/components/fab-button/fab-button.ios.vars.scss
@@ -3,6 +3,21 @@
 // iOS FAB Button
 // --------------------------------------------------
 
+/// @prop - Box shadow of the FAB button
+$fab-ios-box-shadow:                                    0px 4px 16px rgba(0, 0, 0, .12) !default;
+
+/// @prop - Box shadow of the activated FAB button
+$fab-ios-box-shadow-activated:                          $fab-ios-box-shadow !default;
+
+/// @prop - Transform of the FAB button
+$fab-ios-transform:                                     scale(1.1) !default;
+
+/// @prop - Transition of the FAB button
+$fab-ios-transition:                                    .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default;
+
+/// @prop - Transition of the activated FAB button
+$fab-ios-transition-activated:                          .2s transform ease-out !default;
+
 /// @prop - Background color of the button
 $fab-ios-background-color:                              ion-color($colors-ios, primary, base, ios) !default;
 
@@ -15,6 +30,9 @@ $fab-ios-text-color:                                    ion-color($colors-ios, $
 /// @prop - Color of the button icon
 $fab-ios-icon-fill-color:                               $fab-ios-text-color !default;
 
+/// @prop - Font size of the button icon
+$fab-ios-icon-font-size:                                28px !default;
+
 /// @prop - Background color of the activated button
 $fab-ios-background-color-activated:                    ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default;