From 50b7d7052d71427f82894cec276fa54eaddbfaf3 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 2 Mar 2016 12:26:10 -0500
Subject: [PATCH] refactor(sass): add Sass variables for action sheet and
 rename some

also remove unused properties

references #5651
---
 .../action-sheet/action-sheet.ios.scss        | 88 ++++++++++---------
 .../action-sheet/action-sheet.md.scss         | 61 ++++++-------
 .../components/action-sheet/action-sheet.scss | 26 ++----
 .../action-sheet/test/basic/index.ts          | 34 ++++---
 4 files changed, 104 insertions(+), 105 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss
index 26807e1bced..06a70e926ad 100644
--- a/ionic/components/action-sheet/action-sheet.ios.scss
+++ b/ionic/components/action-sheet/action-sheet.ios.scss
@@ -4,85 +4,91 @@
 // iOS Action Sheet
 // --------------------------------------------------
 
-$action-sheet-ios-group-margin:                   10px !default;
-$action-sheet-ios-background-color:               #f9f9f9 !default;
-
-$action-sheet-ios-border-color:                   #d6d6da !default;
-$action-sheet-ios-border-radius:                  13px !default;
-
-$action-sheet-ios-title-color:                    #8f8f8f !default;
-$action-sheet-ios-title-font-size:                1.3rem !default;
-
-$action-sheet-ios-button-height:                  5.6rem !default;
-$action-sheet-ios-button-padding:                 18px !default;
-$action-sheet-ios-button-text-color:              #007aff !default;
-$action-sheet-ios-button-font-size:               2rem !default;
-$action-sheet-ios-button-border-color:            #d1d3d6 !default;
-$action-sheet-ios-button-background-active-color: #ebebeb !default;
-
-$action-sheet-ios-destructive-button-text-color:  #f53d3d !default;
-$action-sheet-ios-cancel-button-background-color: #fff !default;
+$action-sheet-ios-text-align:                           center !default;
+$action-sheet-ios-padding:                              0 10px !default;
+$action-sheet-ios-group-margin-bottom:                  10px !default;
+$action-sheet-ios-background:                           #f9f9f9 !default;
+
+$action-sheet-ios-border-color:                         #d6d6da !default;
+$action-sheet-ios-border-radius:                        13px !default;
+
+$action-sheet-ios-title-padding:                        1.5rem !default;
+$action-sheet-ios-title-color:                          #8f8f8f !default;
+$action-sheet-ios-title-font-size:                      1.3rem !default;
+$action-sheet-ios-title-font-weight:                    400 !default;
+$action-sheet-ios-title-border-radius:                  0 !default;
+
+$action-sheet-ios-button-min-height:                    5.6rem !default;
+$action-sheet-ios-button-padding:                       18px !default;
+$action-sheet-ios-button-text-color:                    #007aff !default;
+$action-sheet-ios-button-font-size:                     2rem !default;
+$action-sheet-ios-button-border-width:                  1px !default;
+$action-sheet-ios-button-border-style:                  solid !default;
+$action-sheet-ios-button-border-color:                  #d1d3d6 !default;
+$action-sheet-ios-button-background:                    transparent !default;
+$action-sheet-ios-button-background-activated:          #ebebeb !default;
+
+$action-sheet-ios-button-destructive-text-color:        #f53d3d !default;
+$action-sheet-ios-button-cancel-background:             #fff !default;
+$action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 
 ion-action-sheet {
-  text-align: center;
+  text-align: $action-sheet-ios-text-align;
 }
 
 .action-sheet-container {
-  padding: 0 $action-sheet-ios-group-margin;
+  padding: $action-sheet-ios-padding;
 }
 
 .action-sheet-group {
   overflow: hidden;
-  margin-bottom: $action-sheet-ios-group-margin - 2;
+  margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
   border-radius: $action-sheet-ios-border-radius;
-  background: $action-sheet-ios-background-color;
+  background: $action-sheet-ios-background;
 
   &:last-child {
-    margin-bottom: $action-sheet-ios-group-margin;
+    margin-bottom: $action-sheet-ios-group-margin-bottom;
   }
 }
 
 .action-sheet-title {
-  padding: 1.5rem;
+  padding: $action-sheet-ios-title-padding;
   font-size: $action-sheet-ios-title-font-size;
-  font-weight: 400;
   color: $action-sheet-ios-title-color;
-  border-radius: 0;
-  text-align: center;
-}
-
-.action-sheet-title {
-  border-bottom: 1px solid $action-sheet-ios-border-color;
+  font-weight: $action-sheet-ios-title-font-weight;
+  border-radius: $action-sheet-ios-title-border-radius;
+  text-align: $action-sheet-ios-text-align;
+  border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
 }
 
 .action-sheet-button {
   padding: $action-sheet-ios-button-padding;
-  min-height: $action-sheet-ios-button-height;
-  border-bottom: 1px solid $action-sheet-ios-border-color;
+  min-height: $action-sheet-ios-button-min-height;
+  border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
   font-size: $action-sheet-ios-button-font-size;
   color: $action-sheet-ios-button-text-color;
-  background: transparent;
+  background: $action-sheet-ios-button-background;
 
   &:last-child {
     border-bottom: 0;
   }
 
   &.activated {
-    margin-top:-1px;
-    background: $action-sheet-ios-button-background-active-color;
-    border-bottom-color: $action-sheet-ios-button-background-active-color;
-    border-top:1px solid $action-sheet-ios-button-background-active-color;
+    margin-top: -$action-sheet-ios-button-border-width;
+    background: $action-sheet-ios-button-background-activated;
+    border-bottom-color: $action-sheet-ios-button-background-activated;
+    border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
   }
 }
 
 .action-sheet-destructive {
-  color: $action-sheet-ios-destructive-button-text-color;
+  color: $action-sheet-ios-button-destructive-text-color;
 }
 
 .action-sheet-cancel {
-  font-weight: 600;
-  background: $action-sheet-ios-cancel-button-background-color;
+  font-weight: $action-sheet-ios-button-cancel-font-weight;
+  background: $action-sheet-ios-button-cancel-background;
 }
 
 &.hairlines {
diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/ionic/components/action-sheet/action-sheet.md.scss
index 0669f24ee2f..e11f83599e8 100644
--- a/ionic/components/action-sheet/action-sheet.md.scss
+++ b/ionic/components/action-sheet/action-sheet.md.scss
@@ -4,68 +4,61 @@
 // Material Design Action Sheet
 // --------------------------------------------------
 
-$action-sheet-md-background-color:                #fafafa !default;
+$action-sheet-md-text-align:                            left !default;
+$action-sheet-md-background:                            #fafafa !default;
+$action-sheet-md-group-margin-bottom:                   8px !default;
 
-$action-sheet-md-title-color:                     #757575 !default;
-$action-sheet-md-title-font-size:                 1.6rem !default;
-$action-sheet-md-title-padding:                   19px 16px 17px !default;
+$action-sheet-md-title-color:                           #757575 !default;
+$action-sheet-md-title-font-size:                       1.6rem !default;
+$action-sheet-md-title-padding:                         19px 16px 17px !default;
 
-$action-sheet-md-button-height:                   4.8rem !default;
-$action-sheet-md-button-text-color:               #222 !default;
-$action-sheet-md-button-font-size:                1.6rem !default;
-$action-sheet-md-button-padding:                  0 16px !default;
-$action-sheet-md-button-background-active-color:  #f1f1f1 !default;
+$action-sheet-md-button-min-height:                     4.8rem !default;
+$action-sheet-md-button-text-color:                     #222 !default;
+$action-sheet-md-button-font-size:                      1.6rem !default;
+$action-sheet-md-button-padding:                        0 16px !default;
+$action-sheet-md-button-background:                     transparent !default;
+$action-sheet-md-button-background-activated:           #f1f1f1 !default;
 
-$action-sheet-md-icon-font-size:                  2.4rem !default;
-$action-sheet-md-icon-margin:                     0 28px 0 0 !default;
+$action-sheet-md-icon-font-size:                        2.4rem !default;
+$action-sheet-md-icon-min-width:                        24px !default;
+$action-sheet-md-icon-text-align:                       center !default;
+$action-sheet-md-icon-vertical-align:                   middle !default;
+$action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 
 
 .action-sheet-title {
   padding: $action-sheet-md-title-padding;
   font-size: $action-sheet-md-title-font-size;
   color: $action-sheet-md-title-color;
-  text-align: left;
+  text-align: $action-sheet-md-text-align;
 }
 
 .action-sheet-button {
-  position: relative;
-  overflow: hidden;
   padding: $action-sheet-md-button-padding;
-  min-height: $action-sheet-md-button-height;
+  min-height: $action-sheet-md-button-min-height;
   font-size: $action-sheet-md-button-font-size;
-  font-weight: normal;
   color: $action-sheet-md-button-text-color;
-  background-color: transparent;
-  text-align: left;
+  background: $action-sheet-md-button-background;
+  text-align: $action-sheet-md-text-align;
 
   &.activated {
-    background: $action-sheet-md-button-background-active-color;
-    border-radius: 0;
-    box-shadow: none;
+    background: $action-sheet-md-button-background-activated;
   }
 }
 
 .action-sheet-icon {
-  display: inline-block;
   margin: $action-sheet-md-icon-margin;
-  min-width: 24px;
-  text-align: center;
-  vertical-align: middle;
+  min-width: $action-sheet-md-icon-min-width;
+  text-align: $action-sheet-md-icon-text-align;
+  vertical-align: $action-sheet-md-icon-vertical-align;
   font-size: $action-sheet-md-icon-font-size;
 }
 
 .action-sheet-group {
   overflow: hidden;
-  margin: 0;
-  border-radius: 0;
-  background-color: $action-sheet-md-background-color;
+  background: $action-sheet-md-background;
 
   &:last-child .action-sheet-button {
-    margin-bottom: 8px;
+    margin-bottom: $action-sheet-md-group-margin-bottom;
   }
 }
-
-.action-sheet-cancel {
-  background-color: $action-sheet-md-background-color;
-  border: none;
-}
diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index 0ea4e5c2260..a66fd66ad86 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -4,45 +4,33 @@
 // --------------------------------------------------
 
 $action-sheet-width:                             100% !default;
-$action-sheet-max-width:                         520px !default;
+$action-sheet-max-width:                         500px !default;
 
 
 ion-action-sheet {
   position: absolute;
+  width: $action-sheet-width;
+  height: $action-sheet-width;
+  z-index: $z-index-overlay;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
   display: block;
-  z-index: $z-index-overlay;
 }
 
 .action-sheet-wrapper {
   position: absolute;
+  width: $action-sheet-width;
+  max-width: $action-sheet-max-width;
   z-index: $z-index-overlay-wrapper;
   bottom: 0;
   left: 0;
   right: 0;
-  width: 100%;
   display: block;
-  max-width: 500px;
   margin: auto;
 
   transform: translate3d(0, 100%, 0);
 }
 
-.action-sheet-container {
-  width: auto;
-  overflow: hidden;
-}
-
 .action-sheet-button {
-  display: block;
-  width: 100%;
-  margin: 0;
-  border-radius: 0;
-
-  &.activated {
-    box-shadow: none;
-  }
+  width: $action-sheet-width;
 }
diff --git a/ionic/components/action-sheet/test/basic/index.ts b/ionic/components/action-sheet/test/basic/index.ts
index 49949d70bda..9c97e4ca1a4 100644
--- a/ionic/components/action-sheet/test/basic/index.ts
+++ b/ionic/components/action-sheet/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ionic-angular';
+import {App, Page, ActionSheet, Modal, NavController, ViewController, Platform} from 'ionic-angular';
 
 
 @Page({
@@ -7,31 +7,34 @@ import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ioni
 class E2EPage {
   result: string = '';
 
-  constructor(private nav: NavController) {}
+  constructor(private nav: NavController, private platform: Platform) {}
 
   presentActionSheet1() {
     this.result = '';
 
     let actionSheet = ActionSheet.create({
-      title: 'Modify your album',
+      title: 'Albums',
       buttons: [
         {
-          text: 'Destructive',
+          text: 'Delete',
           role: 'destructive',
+          icon: this.platform.is('android') ? 'trash' : null,
           handler: () => {
-            console.log('Destructive clicked');
-            this.result = 'Destructive';
+            console.log('Delete clicked');
+            this.result = 'Deleted';
           }
         },
         {
-          text: 'Archive',
+          text: 'Share',
+          icon: this.platform.is('android') ? 'share' : null,
           handler: () => {
-            console.log('Archive clicked');
-            this.result = 'Archived';
+            console.log('Share clicked');
+            this.result = 'Shared';
           }
         },
         {
-          text: 'Open Modal',
+          text: 'Play',
+          icon: this.platform.is('android') ? 'arrow-dropright-circle' : null,
           handler: () => {
             let modal = Modal.create(ModalPage);
             this.nav.present(modal);
@@ -40,9 +43,18 @@ class E2EPage {
             return false;
           }
         },
+        {
+          text: 'Favorite',
+          icon: this.platform.is('android') ? 'heart' : null,
+          handler: () => {
+            console.log('Favorite clicked');
+            this.result = 'Favorited';
+          }
+        },
         {
           text: 'Cancel',
           role: 'cancel', // will always sort to be on the bottom
+          icon: this.platform.is('android') ? 'close' : null,
           handler: () => {
             console.log('Cancel clicked');
             this.result = 'Canceled';
@@ -94,7 +106,7 @@ class E2EPage {
 @Page({
   template: `
     <ion-toolbar>
-      <ion-buttons>
+      <ion-buttons start>
         <button (click)="dismiss()">Close</button>
       </ion-buttons>
       <ion-title>Modal</ion-title>