Merge pull request #2060 from crazyserver/MOBILE-3068

MOBILE-3068 ios: Style action sheets

src/app/app.ios.scss

@@ -99,16 +99,22 @@ ion-app.app-root.ios {
     background-color: $checkbox-ios-background-color-off;
   }
 
-  // File Uploader
+
-  // In iOS the input is 1 level higher, so the styles are different.
+  .action-sheet-ios {
-  .action-sheet-ios input.core-fileuploader-file-handler-input {
+    .action-sheet-title {
-    position: absolute;
+      font-size: 2rem;
-    @include position(null, 0, null, 0);
+    }
-    min-width: 100%;
+    // File Uploader
-    min-height: $action-sheet-ios-button-min-height;
+    // In iOS the input is 1 level higher, so the styles are different.
-    opacity: 0;
+    input.core-fileuploader-file-handler-input {
-    outline: none;
+      position: absolute;
-    z-index: 100;
+      @include position(null, 0, null, 0);
-    cursor: pointer;
+      min-width: 100%;
+      min-height: $action-sheet-ios-button-min-height;
+      opacity: 0;
+      outline: none;
+      z-index: 100;
+      cursor: pointer;
+    }
   }
 }

src/app/app.md.scss

@@ -70,19 +70,6 @@ ion-app.app-root.md {
       padding-top: 0;
       margin-top: $action-sheet-md-title-padding-top;
     }
-    .action-sheet-cancel {
-      color: $red;
-    }
-
-    .action-sheet-wrapper {
-      bottom: 0;
-      top: initial;
-      max-height: 50%;
-      height: 100%;
-    }
-    .action-sheet-selected {
-      color: $core-color;
-    }
   }
 }
 

src/app/app.scss

@@ -599,6 +599,25 @@ ion-app.app-root {
   .action-sheet-group {
       overflow: auto;
   }
+
+  .action-sheet-wrapper {
+    .action-sheet-button.action-sheet-cancel {
+      color: $core-action-sheet-cancel-color;
+    }
+    .action-sheet-selected {
+      color: $core-color;
+    }
+  }
+
+  @media (min-height: 500px) {
+    .action-sheet-wrapper {
+      bottom: 0;
+      top: initial;
+      max-height: 50%;
+      height: 100%;
+    }
+  }
+
   .alert-message {
       overflow-y: auto;
   }

src/theme/variables.scss

@@ -164,6 +164,9 @@ $core-login-loading-color: false !default;
 $core-login-item-inner-background-color: $white !default;
 $core-login-item-background-color: $white !default;
 
+$core-action-sheet-color: $core-color !default;
+$core-action-sheet-cancel-color: $danger !default;
+
 // App iOS Variables
 // --------------------------------------------------
 // iOS only Sass variables can go here
@@ -182,6 +185,9 @@ $checkbox-ios-disabled-opacity: $input-select-opacity !default;
 $toggle-ios-disabled-opacity: $input-select-opacity !default;
 $note-ios-color: $note-color;
 $popover-ios-width: $popover-width;
+$action-sheet-ios-title-color: $core-action-sheet-color;
+$action-sheet-ios-button-text-color: $black !default;
+$action-sheet-ios-button-destructive-text-color: $danger;
 $item-ios-divider-background: $item-divider-background;
 $item-ios-divider-color: $item-divider-color;
 
@@ -204,7 +210,8 @@ $checkbox-md-disabled-opacity: $input-select-opacity !default;
 $toggle-md-disabled-opacity: $input-select-opacity !default;
 $note-md-color: $note-color;
 $popover-md-width: $popover-width;
-$action-sheet-md-title-color: $core-color;
+$action-sheet-md-title-color: $core-action-sheet-color;
+$action-sheet-md-button-text-color: $black !default;
 $item-md-divider-background: $item-divider-background;
 $item-md-divider-color: $item-divider-color;
 
@@ -226,6 +233,8 @@ $checkbox-wp-disabled-opacity: $input-select-opacity !default;
 $toggle-wp-disabled-opacity: $input-select-opacity !default;
 $note-wp-color: $note-color;
 $popover-wp-width: $popover-width;
+$action-sheet-wp-title-color: $core-action-sheet-color;
+$action-sheet-wp-button-text-color: $black !default;
 $item-wp-divider-background: $item-divider-background;
 $item-wp-divider-color: $item-divider-color;