feat(fab): add box shadow and transition for ios

ionic-team · Mar 21, 2018 · d26074a · d26074a
1 parent 6e683c5
commit d26074a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git 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
@@ -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;