From 11bb8ac587c4b03b6362ad61ad40cc374a694def Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Sat, 19 Nov 2016 18:25:46 +0100
Subject: [PATCH] style(modal): follows ios/md design spec in large screens

---
 src/components/modal/modal.ios.scss |  8 +++++++-
 src/components/modal/modal.md.scss  | 17 ++++++++++++++++-
 src/components/modal/modal.scss     | 13 +++++++------
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/modal/modal.ios.scss b/src/components/modal/modal.ios.scss
index fd9f124cf4..266db6d495 100644
--- a/src/components/modal/modal.ios.scss
+++ b/src/components/modal/modal.ios.scss
@@ -7,9 +7,15 @@
 $modal-ios-background-color:          $background-ios-color !default;
 
 /// @prop - Border radius for the modal
-$modal-ios-border-radius:             5px !default;
+$modal-ios-border-radius:             10px !default;
 
 .ios .modal-wrapper {
   // hidden by default to prevent flickers, the animation will show it
   transform: translate3d(0, 100%, 0);
+
+  @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+    overflow: hidden;
+
+    border-radius: $modal-ios-border-radius;
+  }
 }
diff --git a/src/components/modal/modal.md.scss b/src/components/modal/modal.md.scss
index 868fcce9cc..2215063d17 100644
--- a/src/components/modal/modal.md.scss
+++ b/src/components/modal/modal.md.scss
@@ -4,9 +4,24 @@
 // --------------------------------------------------
 
 /// @prop - Background color for the modal
-$modal-md-background-color:          $background-md-color !default;
+$modal-md-background-color:       $background-md-color !default;
+
+/// @prop - Box shadow color of the alert
+$modal-inset-box-shadow-color:    rgba(0, 0, 0, .4) !default;
+
+/// @prop - Box shadow of the alert
+$modal-inset-box-shadow:          0 28px 48px $modal-inset-box-shadow-color !default;
 
 .md .modal-wrapper {
   opacity: .01;
   transform: translate3d(0, 40px, 0);
+
+  @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+    overflow: hidden;
+
+    border-radius: 2px;
+
+    box-shadow: $modal-inset-box-shadow;
+  }
+
 }
diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index 94fefe3918..10de882115 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -4,22 +4,23 @@
 // --------------------------------------------------
 
 /// @prop - Min width of the modal inset
-$modal-inset-min-width:                      768px !default;
+$modal-inset-min-width:         768px !default;
 
 /// @prop - Min height of the small modal inset
-$modal-inset-min-height-small:               600px !default;
+$modal-inset-min-height-small:  600px !default;
 
 /// @prop - Min height of the large modal inset
-$modal-inset-min-height-large:               768px !default;
+$modal-inset-min-height-large:  768px !default;
 
 /// @prop - Width of the large modal inset
-$modal-inset-width:                          600px !default;
+$modal-inset-width:             600px !default;
 
 /// @prop - Height of the small modal inset
-$modal-inset-height-small:                   500px !default;
+$modal-inset-height-small:      500px !default;
 
 /// @prop - Height of the large modal inset
-$modal-inset-height-large:                   600px !default;
+$modal-inset-height-large:      600px !default;
+
 
 ion-modal {
   position: absolute;