fix(action-sheet): fix button positioning, backdrop opacity

packages/core/src/components/action-sheet/action-sheet.ios.scss

@@ -61,6 +61,18 @@ $action-sheet-ios-button-text-color:                    #007aff !default;
 /// @prop - Fill color of the action sheet button icon
 $action-sheet-ios-button-icon-fill-color:               $action-sheet-ios-button-text-color !default;
 
+/// @prop - Font size of the action sheet button icon
+$action-sheet-ios-button-icon-font-size:                1.4em !default;
+
+/// @prop - Padding right of the action sheet button icon
+$action-sheet-ios-button-icon-padding-right:            0.1em !default;
+
+/// @prop - Height of the action sheet button icon
+$action-sheet-ios-button-icon-height:                   .7em !default;
+
+/// @prop - Margin top of the action sheet button icon
+$action-sheet-ios-button-icon-margin-top:               -10px !default;
+
 /// @prop - Font size of the action sheet button
 $action-sheet-ios-button-font-size:                     2rem !default;
 
@@ -138,8 +150,12 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   background: $action-sheet-ios-button-background;
 }
 
-.action-sheet-ios .action-sheet-button {
+.action-sheet-ios .action-sheet-button .action-sheet-icon {
   fill: $action-sheet-ios-button-icon-fill-color;
+  font-size: $action-sheet-ios-button-icon-font-size;
+  padding-right: $action-sheet-ios-button-icon-padding-right;
+  height: $action-sheet-ios-button-icon-height;
+  margin-top: $action-sheet-ios-button-icon-margin-top;
 }
 
 .action-sheet-ios .action-sheet-button:last-child {

packages/core/src/components/action-sheet/action-sheet.tsx

@@ -179,10 +179,12 @@ export class ActionSheet {
               : null}
             {buttons.map(b =>
               <button class={this.buttonClass(b)} onClick={() => this.click(b)}>
+                <span class="button-inner">
                   {b.icon
                     ? <ion-icon name={b.icon} class="action-sheet-icon" />
                     : null}
                   {b.text}
+                </span>
               </button>
             )}
           </div>

packages/core/src/components/action-sheet/animations/ios.enter.ts

@@ -1,7 +1,7 @@
 import { Animation } from '../../../index';
 
 /**
- * iOS Loading Enter Animation
+ * iOS Action Sheet Animation
  */
 export default function(Animation: Animation, baseElm: HTMLElement) {
   const baseAnimation = new Animation();
@@ -12,7 +12,7 @@ export default function(Animation: Animation, baseElm: HTMLElement) {
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.26);
+  backdropAnimation.fromTo('opacity', 0.01, 0.4);
 
   wrapperAnimation.fromTo('translateY', '100%', '0%');
 

packages/core/src/components/action-sheet/animations/ios.leave.ts

@@ -1,7 +1,7 @@
 import { Animation } from '../../../index';
 
 /**
- * iOS Loading Leave Animation
+ * iOS Action Sheet Leave Animation
  */
 export default function(Animation: Animation, baseElm: HTMLElement) {
   const baseAnimation = new Animation();
@@ -12,7 +12,7 @@ export default function(Animation: Animation, baseElm: HTMLElement) {
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
 
-  backdropAnimation.fromTo('opacity', 0.26, 0);
+  backdropAnimation.fromTo('opacity', 0.4, 0);
 
   wrapperAnimation.fromTo('translateY', '0%', '100%');
 

packages/core/src/components/action-sheet/test/basic.html

@@ -18,12 +18,15 @@
 
     <ion-content padding>
       <ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button>
+      <ion-button block onclick="presentActionSheet2()">Present Action Sheet 2</ion-button>
+      <ion-button block onclick="presentActionSheet3()">Present Action Sheet 3</ion-button>
     </ion-content>
   </ion-app>
 
   <script>
+
     function presentActionSheet1() {
-      console.log('presenting');
+      var mode = Ionic.mode;
 
       Ionic.controller('action-sheet', {
         title: "Albums",
@@ -48,9 +51,57 @@
           }
         }, {
           text: 'Favorite',
+          icon: mode !== 'ios' ? 'heart' : null,
           handler: () => {
             console.log('Favorite clicked');
           }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          icon: mode !== 'ios' ? 'close' : null,
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      })
+      .then(actionSheet => {
+        actionSheet.present()
+      });
+    }
+
+    function presentActionSheet2() {
+      Ionic.controller('action-sheet', {
+        buttons: [{
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        }, {
+          text: 'Destructive',
+          role: 'destructive',
+          handler: () => {
+            console.log('Destructive clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      })
+      .then(actionSheet => {
+        actionSheet.present()
+      });
+    }
+
+    function presentActionSheet3() {
+      Ionic.controller('action-sheet', {
+        buttons: [{
+          text: 'Open Alert',
+          handler: () => {
+            console.log('Open Alert clicked');
+          }
         }, {
           text: 'Cancel',
           role: 'cancel',