From aada9cc7c49771fdefeab4259d9c79de32b0d663 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 4 Jan 2016 13:11:46 -0600
Subject: [PATCH] refactor(actionSheet): cleanup css, reduce classes

---
 .../action-sheet/action-sheet.ios.scss        | 38 +++++++++----------
 .../action-sheet/action-sheet.md.scss         | 29 +++++++-------
 .../components/action-sheet/action-sheet.scss | 19 ----------
 ionic/components/action-sheet/action-sheet.ts |  7 +++-
 4 files changed, 37 insertions(+), 56 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss
index 05e182b217..fb2c1190ca 100644
--- a/ionic/components/action-sheet/action-sheet.ios.scss
+++ b/ionic/components/action-sheet/action-sheet.ios.scss
@@ -7,17 +7,18 @@
 $action-sheet-ios-group-margin:                   10px !default;
 $action-sheet-ios-background-color:               rgba(243,243,243,.95) !default;
 
-$action-sheet-ios-height:                         5.6rem !default;
-$action-sheet-ios-padding:                        18px !default;
 $action-sheet-ios-border-color:                   #d6d6da !default;
 $action-sheet-ios-border-radius:                  13px !default;
 
 $action-sheet-ios-title-color:                    #5f5f5f !default;
 $action-sheet-ios-title-font-size:                1.2rem !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-background-active-color:        #e9e9e9 !default;
+$action-sheet-ios-button-border-color:            #d1d3d6 !default;
+$action-sheet-ios-button-background-active-color: #e9e9e9 !default;
 
 $action-sheet-ios-destructive-button-text-color:  #f53d3d !default;
 
@@ -31,8 +32,10 @@ ion-action-sheet {
 }
 
 .action-sheet-group {
+  overflow: hidden;
   margin-bottom: $action-sheet-ios-group-margin - 2;
   border-radius: $action-sheet-ios-border-radius;
+  background: $action-sheet-ios-background-color;
 
   &:last-child {
     margin-bottom: $action-sheet-ios-group-margin;
@@ -48,29 +51,24 @@ ion-action-sheet {
   text-align: center;
 }
 
-.action-sheet-title,
-.action-sheet-option {
+.action-sheet-title {
   border-bottom: 1px solid $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;
+  font-size: $action-sheet-ios-button-font-size;
+  color: $action-sheet-ios-button-text-color;
+  background: transparent;
 
   &:last-child {
     border-bottom: 0;
   }
-}
-
-.action-sheet-button {
-  color: $action-sheet-ios-button-text-color;
-  min-height: $action-sheet-ios-height;
-  padding: $action-sheet-ios-padding;
-  font-size: $action-sheet-ios-button-font-size;
-
-  background: transparent;
 
   &.activated {
-    background: $action-sheet-ios-background-active-color;
-    box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    color: $action-sheet-options-text-color;
-    background: $action-sheet-options-background-active-color;
+    background: $action-sheet-ios-button-background-active-color;
   }
 }
 
@@ -84,7 +82,7 @@ ion-action-sheet {
 
 &.hairlines {
   .action-sheet-title,
-  .action-sheet-option {
+  .action-sheet-button {
     border-bottom-width: 0.55px;
   }
 }
diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/ionic/components/action-sheet/action-sheet.md.scss
index 8aa4eade34..0669f24ee2 100644
--- a/ionic/components/action-sheet/action-sheet.md.scss
+++ b/ionic/components/action-sheet/action-sheet.md.scss
@@ -4,21 +4,20 @@
 // Material Design Action Sheet
 // --------------------------------------------------
 
-$action-sheet-md-background-color:         #fafafa !default;
+$action-sheet-md-background-color:                #fafafa !default;
 
-$action-sheet-md-height:                   4.8rem !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-text-color:        #222 !default;
-$action-sheet-md-button-font-size:         1.6rem !default;
-$action-sheet-md-button-padding:           0 16px !default;
-$action-sheet-md-background-active-color:  #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-margin:                     0 28px 0 0 !default;
 
 
 .action-sheet-title {
@@ -32,7 +31,7 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
   position: relative;
   overflow: hidden;
   padding: $action-sheet-md-button-padding;
-  min-height: $action-sheet-md-height;
+  min-height: $action-sheet-md-button-height;
   font-size: $action-sheet-md-button-font-size;
   font-weight: normal;
   color: $action-sheet-md-button-text-color;
@@ -40,7 +39,7 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
   text-align: left;
 
   &.activated {
-    background: $action-sheet-md-background-active-color;
+    background: $action-sheet-md-button-background-active-color;
     border-radius: 0;
     box-shadow: none;
   }
@@ -56,6 +55,7 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 }
 
 .action-sheet-group {
+  overflow: hidden;
   margin: 0;
   border-radius: 0;
   background-color: $action-sheet-md-background-color;
@@ -67,6 +67,5 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 
 .action-sheet-cancel {
   background-color: $action-sheet-md-background-color;
-  width: auto;
   border: none;
 }
diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index cadcf1bbc3..0ea4e5c226 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -5,13 +5,6 @@
 
 $action-sheet-width:                             100% !default;
 $action-sheet-max-width:                         520px !default;
-$action-sheet-background-color:                  rgba(243,243,243,.95) !default;
-$action-sheet-button-text-color:                 #007aff !default;
-
-$action-sheet-options-background-color:          #f1f2f3 !default;
-$action-sheet-options-background-active-color:   #e4e5e7 !default;
-$action-sheet-options-text-color:                #007aff !default;
-$action-sheet-options-border-color:              #d1d3d6 !default;
 
 
 ion-action-sheet {
@@ -48,20 +41,8 @@ ion-action-sheet {
   width: 100%;
   margin: 0;
   border-radius: 0;
-  border-color: $action-sheet-options-border-color;
 
   &.activated {
     box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    background: $action-sheet-options-background-active-color;
   }
 }
-
-.action-sheet-group {
-  background-color: #fff;
-  overflow: hidden;
-}
-
-.action-sheet-options {
-  background: $action-sheet-options-background-color;
-}
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index e3761ceadc..2583ba6bfe 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -130,10 +130,10 @@ import {Animation} from '../../animations/animation';
     '<div (click)="dismiss()" tappable disable-activated class="backdrop" role="presentation"></div>' +
     '<div class="action-sheet-wrapper">' +
       '<div class="action-sheet-container">' +
-        '<div class="action-sheet-group action-sheet-options">' +
+        '<div class="action-sheet-group">' +
           '<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button action-sheet-option disable-hover" [ngClass]="b.cssClass">' +
+          '<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
             '<icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></icon> ' +
             '{{b.text}}' +
           '</button>' +
@@ -195,6 +195,9 @@ class ActionSheetCmp {
       if (typeof button === 'string') {
         button = { text: button };
       }
+      if (!button.cssClass) {
+        button.cssClass = '';
+      }
 
       if (button.style === 'cancel') {
         this.d.cancelButton = button;