refactor(action-sheet): iOS changed action-sheet to use classes

references #689

ionic/components/action-sheet/action-sheet.scss

@@ -41,25 +41,20 @@ ion-action-sheet {
 .action-sheet-container {
   width: auto;
   overflow: hidden;
+}
 
-  button {
-    display: block;
-    padding: 1px;
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-    border-color: $action-sheet-options-border-color;
-    background-color: transparent;
+.action-sheet-button {
+  display: block;
+  width: 100%;
+  margin: 0;
+  border-radius: 0;
+  border-color: $action-sheet-options-border-color;
+}
 
-    color: $action-sheet-options-text-color;
-    font-size: 21px;
-  }
-
-  button.activated {
-    box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    background: $action-sheet-options-background-active-color;
-  }
+.action-sheet-button.activated {
+  box-shadow: none;
+  border-color: $action-sheet-options-border-color;
+  background: $action-sheet-options-background-active-color;
 }
 
 .action-sheet-title {
@@ -73,11 +68,7 @@ ion-action-sheet {
   background-color: #fff;
   overflow: hidden;
 
-  button {
-    border-width: 1px 0px 0px 0px;
-  }
-
-  button:first-child:last-child {
+  .action-sheet-button:first-child:last-child {
     border-width: 0;
   }
 }

ionic/components/action-sheet/action-sheet.ts

@@ -22,17 +22,17 @@ import {extend} from '../../util/util';
       '<div class="action-sheet-container">' +
         '<div class="action-sheet-group action-sheet-options">' +
           '<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
-          '<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-option disable-hover">' +
+          '<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
             '<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
             '{{b.text}}' +
           '</button>' +
-          '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-destructive disable-hover">' +
+          '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
             '<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon"></icon> ' +
             '{{d.destructiveText}}' +
           '</button>' +
         '</div>' +
-        '<div class="action-sheet-group action-sheet-cancel" *ng-if="d.cancelText">' +
-          '<button (click)="cancel()" class="disable-hover">' +
+        '<div class="action-sheet-group" *ng-if="d.cancelText">' +
+          '<button (click)="cancel()" class="action-sheet-button action-sheet-cancel disable-hover">' +
             '<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon"></icon> ' +
             '{{d.cancelText}}' +
           '</button>' +

ionic/components/action-sheet/modes/ios.scss

@@ -26,29 +26,8 @@ ion-action-sheet {
   text-align: center;
 }
 
-ion-action-sheet button {
-  min-height: $action-sheet-ios-height;
-  padding: $action-sheet-ios-padding;
-
-  margin: 0;
-  border: 0;
-
-  background: transparent;
-
-  &.activated {
-    background: $action-sheet-ios-background-active-color;
-  }
-}
-
 .action-sheet-container {
   padding: 0 $action-sheet-ios-group-margin;
-
-  button.activated {
-    box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    color: $action-sheet-options-text-color;
-    background: $action-sheet-options-background-active-color;
-  }
 }
 
 .action-sheet-group {
@@ -70,8 +49,22 @@ ion-action-sheet button {
   border-bottom: 1px solid $action-sheet-ios-border-color;
 }
 
-.action-sheet-cancel button {
-  font-weight: bold;
+.action-sheet-button {
+  color: $action-sheet-ios-button-text-color;
+  min-height: $action-sheet-ios-height;
+  padding: $action-sheet-ios-padding;
+  font-size: 21px;
+  margin: 0;
+
+  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;
+  }
 }
 
 .action-sheet-title {
@@ -84,8 +77,6 @@ ion-action-sheet button {
 
 .action-sheet-option {
   font-size: $action-sheet-ios-button-font-size;
-  color: $action-sheet-ios-button-text-color;
-  border-radius: 0;
 }
 
 .action-sheet-title:first-child,
@@ -110,6 +101,10 @@ ion-action-sheet button {
   }
 }
 
-.action-sheet-destructive{
+.action-sheet-destructive {
   color: $action-sheet-ios-destructive-button-text-color;
 }
+
+.action-sheet-cancel  {
+  font-weight: bold;
+}

ionic/components/action-sheet/modes/md.scss

@@ -21,40 +21,18 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 
 ion-action-sheet {
   margin: 0;
+
+  icon {
+    display: inline-block;
+    margin: $action-sheet-md-icon-margin;
+    min-width: 24px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: $action-sheet-md-icon-font-size;
+  }
 }
 
-.action-sheet-container {
-  margin: 0;
-}
-
-.action-sheet-title,
-.action-sheet-option,
-.action-sheet-destructive,
-.action-sheet-cancel button {
-  text-align: left;
-  border-color: transparent;
-  font-size: $action-sheet-md-button-font-size;
-  color: $action-sheet-md-button-text-color;
-  box-shadow: none;
-  text-transform: none;
-}
-
-ion-action-sheet icon {
-  display: inline-block;
-  margin: $action-sheet-md-icon-margin;
-  min-width: 24px;
-  text-align: center;
-  vertical-align: middle;
-  font-size: $action-sheet-md-icon-font-size;
-}
-
-.action-sheet-title {
-  padding: $action-sheet-md-title-padding;
-  font-size: $action-sheet-md-title-font-size;
-  color: $action-sheet-md-title-color;
-}
-
-ion-action-sheet button {
+.action-sheet-button {
   font-weight: normal;
   min-height: $action-sheet-md-height;
 
@@ -65,16 +43,38 @@ ion-action-sheet button {
   }
 }
 
+.action-sheet-container {
+  margin: 0;
+}
+
 .action-sheet-group {
   margin: 0;
   border-radius: 0;
   background-color: $action-sheet-md-background-color;
 
-  &:last-child button {
+  &:last-child .action-sheet-button {
     margin-bottom: 8px;
   }
 }
 
+.action-sheet-title {
+  padding: $action-sheet-md-title-padding;
+  font-size: $action-sheet-md-title-font-size;
+  color: $action-sheet-md-title-color;
+}
+
+.action-sheet-title,
+.action-sheet-option,
+.action-sheet-destructive,
+.action-sheet-cancel .action-sheet-button {
+  text-align: left;
+  border-color: transparent;
+  font-size: $action-sheet-md-button-font-size;
+  color: $action-sheet-md-button-text-color;
+  box-shadow: none;
+  text-transform: none;
+}
+
 .action-sheet-cancel {
   background-color: $action-sheet-md-background-color;
   width: auto;