From 529cd97cac1b14a1c55c3f1b12039cf1713c2ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 20 Aug 2019 16:19:34 +0200
Subject: [PATCH] MOBILE-3068 ios: Style action sheets

---
 src/app/app.ios.scss     | 28 +++++++++++++++++-----------
 src/app/app.md.scss      | 13 -------------
 src/app/app.scss         | 19 +++++++++++++++++++
 src/theme/variables.scss | 11 ++++++++++-
 4 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss
index 2655a2276..8eeaf67a3 100644
--- a/src/app/app.ios.scss
+++ b/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 input.core-fileuploader-file-handler-input {
-    position: absolute;
-    @include position(null, 0, null, 0);
-    min-width: 100%;
-    min-height: $action-sheet-ios-button-min-height;
-    opacity: 0;
-    outline: none;
-    z-index: 100;
-    cursor: pointer;
+
+  .action-sheet-ios {
+    .action-sheet-title {
+      font-size: 2rem;
+    }
+    // File Uploader
+    // In iOS the input is 1 level higher, so the styles are different.
+    input.core-fileuploader-file-handler-input {
+      position: absolute;
+      @include position(null, 0, null, 0);
+      min-width: 100%;
+      min-height: $action-sheet-ios-button-min-height;
+      opacity: 0;
+      outline: none;
+      z-index: 100;
+      cursor: pointer;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/app/app.md.scss b/src/app/app.md.scss
index 8a7745585..bee372275 100644
--- a/src/app/app.md.scss
+++ b/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;
-    }
   }
 }
 
diff --git a/src/app/app.scss b/src/app/app.scss
index 8bbc87959..0b52e8337 100644
--- a/src/app/app.scss
+++ b/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;
   }
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 1727a6d28..b2ac149d1 100644
--- a/src/theme/variables.scss
+++ b/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;