From 3da1bf45bae75c8513fbb4a8ed126252bbc4e9d4 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Fri, 10 Aug 2018 01:08:47 +0200
Subject: [PATCH] fix(toast): statusbarPadding

---
 core/.stylelintrc.yml                              |  2 --
 .../components/action-sheet/action-sheet.ios.scss  |  3 +--
 .../components/action-sheet/test/basic/index.html  |  4 ++++
 core/src/components/app/app.scss                   |  2 ++
 core/src/components/footer/footer.scss             |  8 +++-----
 core/src/components/picker/picker.scss             |  5 ++---
 core/src/components/tabbar/tabbar.scss             |  6 ++----
 core/src/components/toast/animations/ios.enter.ts  | 12 ++----------
 core/src/components/toast/animations/ios.leave.ts  | 12 ++----------
 core/src/components/toast/test/basic/index.html    |  5 +++++
 core/src/components/toast/toast.ios.scss           | 12 ------------
 core/src/components/toast/toast.md.scss            |  8 ++------
 core/src/components/toast/toast.scss               | 14 +++++++++++++-
 13 files changed, 38 insertions(+), 55 deletions(-)

diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml
index 0db23dfb84..5fc36bde75 100644
--- a/core/.stylelintrc.yml
+++ b/core/.stylelintrc.yml
@@ -268,8 +268,6 @@ rules:
     - margin
     - margin-left
     - margin-right
-    - margin-top
-    - margin-bottom
     - border-radius
     - border-top-left-radius
     - border-top-right-radius
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index d4443a2011..40d677877e 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -11,8 +11,7 @@
 }
 
 .action-sheet-wrapper {
-  @include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
-  @include margin(env(safe-area-inset-top), auto, env(safe-area-inset-bottom), auto);
+  @include margin(var(--ion-statusbar-padding), auto, var(--ion-bottom-padding), auto);
 }
 
 
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index 0570f70b42..e02451199d 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -33,6 +33,10 @@
     </ion-content>
 
     <style>
+      :root {
+        --ion-statusbar-padding: 20px;
+        --ion-bottom-padding: 40px;
+      }
       .my-custom-class {
         --max-width: 300px;
       }
diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss
index 504bc99d4d..25da437d34 100644
--- a/core/src/components/app/app.scss
+++ b/core/src/components/app/app.scss
@@ -10,11 +10,13 @@ ion-app.statusbar-padding {
 @supports (padding-top: constant(safe-area-inset-top)) {
   ion-app.statusbar-padding {
     --ion-statusbar-padding: constant(safe-area-inset-top);
+    --ion-bottom-padding: constant(safe-area-inset-bottom);
   }
 }
 
 @supports (padding-top: env(safe-area-inset-top)) {
   ion-app.statusbar-padding {
     --ion-statusbar-padding: env(safe-area-inset-top);
+    --ion-bottom-padding: env(safe-area-inset-bottom);
   }
 }
diff --git a/core/src/components/footer/footer.scss b/core/src/components/footer/footer.scss
index c6fb076188..2ab73de68a 100644
--- a/core/src/components/footer/footer.scss
+++ b/core/src/components/footer/footer.scss
@@ -14,8 +14,6 @@ ion-footer {
   z-index: $z-index-toolbar;
 }
 
-@supports (padding-top: env(safe-area-inset-top)) {
-  ion-footer ion-toolbar:last-child {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-}
+ion-footer ion-toolbar:last-child {
+  padding-bottom: var(--ion-bottom-padding);
+}
\ No newline at end of file
diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss
index 1ec74d7121..093df27f9e 100644
--- a/core/src/components/picker/picker.scss
+++ b/core/src/components/picker/picker.scss
@@ -43,9 +43,6 @@ ion-picker {
 }
 
 .picker-columns {
-  @include margin(null, null, constant(safe-area-inset-bottom), null);
-  @include margin(null, null, env(safe-area-inset-bottom), null);
-
   @include rtl() {
     // Date is the same format in both directions
     flex-direction: row-reverse;
@@ -56,6 +53,8 @@ ion-picker {
 
   justify-content: center;
 
+  margin-bottom: var(--ion-bottom-padding);
+
   contain: strict;
   overflow: hidden;
 }
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
index 820b6c93b8..bc51e6e640 100644
--- a/core/src/components/tabbar/tabbar.scss
+++ b/core/src/components/tabbar/tabbar.scss
@@ -32,10 +32,8 @@
   order: -1;
 }
 
-@supports (padding-top: env(safe-area-inset-top)) {
-  :host(.placement-bottom) {
-    @include padding(null, null, env(safe-area-inset-bottom));
-  }
+:host(.placement-bottom) {
+  padding-bottom: var(--ion-bottom-padding);
 }
 
 
diff --git a/core/src/components/toast/animations/ios.enter.ts b/core/src/components/toast/animations/ios.enter.ts
index 18868e3325..8ee58bcf8d 100644
--- a/core/src/components/toast/animations/ios.enter.ts
+++ b/core/src/components/toast/animations/ios.enter.ts
@@ -10,16 +10,8 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, po
   const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
-  let variable;
-
-  if (CSS.supports('bottom', 'env(safe-area-inset-bottom)')) {
-    variable = 'env';
-  } else if (CSS.supports('bottom', 'constant(safe-area-inset-bottom)')) {
-    variable = 'constant';
-  }
-
-  const bottom = variable ? 'calc(-10px - ' + variable + '(safe-area-inset-bottom))' : '-10px';
-  const top = variable ? 'calc(' + variable + '(safe-area-inset-top) + 10px)' : '10px';
+  const bottom = `calc(-10px - var(--ion-bottom-padding, 0px))`;
+  const top = `calc(10px + var(--ion-statusbar-padding, 0px))`;
 
   switch (position) {
     case 'top':
diff --git a/core/src/components/toast/animations/ios.leave.ts b/core/src/components/toast/animations/ios.leave.ts
index bc22ffa819..58d18f7914 100644
--- a/core/src/components/toast/animations/ios.leave.ts
+++ b/core/src/components/toast/animations/ios.leave.ts
@@ -10,16 +10,8 @@ export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, po
   const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
-  let variable;
-
-  if (CSS.supports('bottom', 'env(safe-area-inset-bottom)')) {
-    variable = 'env';
-  } else if (CSS.supports('bottom', 'constant(safe-area-inset-bottom)')) {
-    variable = 'constant';
-  }
-
-  const bottom = variable ? 'calc(-10px - ' + variable + '(safe-area-inset-bottom))' : '-10px';
-  const top = variable ? 'calc(' + variable + '(safe-area-inset-top) + 10px)' : '10px';
+  const bottom = `calc(-10px - var(--ion-bottom-padding, 0px))`;
+  const top = `calc(10px + var(--ion-statusbar-padding, 0px))`;
 
   switch (position) {
     case 'top':
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 36d2e30e5e..09f1545a88 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -84,6 +84,11 @@
   </script>
 
   <style>
+    :root {
+      --ion-statusbar-padding: 20px;
+      --ion-bottom-padding: 40px;
+    }
+
     f {
       display: block;
       background: blue;
diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss
index 66b1115da6..8c63c9e82b 100644
--- a/core/src/components/toast/toast.ios.scss
+++ b/core/src/components/toast/toast.ios.scss
@@ -31,18 +31,6 @@
   backdrop-filter: $toast-ios-translucent-filter;
 }
 
-.toast-ios .toast-wrapper.toast-top {
-  @include transform(translate3d(0, -100%, 0));
-
-  top: 0;
-}
-
-.toast-ios .toast-wrapper.toast-bottom {
-  @include transform(translate3d(0, 100%, 0));
-
-  bottom: 0;
-}
-
 .toast-ios .toast-wrapper.toast-middle {
   opacity: .01;
 }
diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss
index 07216ed512..294df3b063 100644
--- a/core/src/components/toast/toast.md.scss
+++ b/core/src/components/toast/toast.md.scss
@@ -26,15 +26,11 @@
 }
 
 .toast-md .toast-wrapper.toast-top {
-  @include transform(translate3d(0, -100%, 0));
-
-  top: 0;
+  padding-top: var(--ion-statusbar-padding);
 }
 
 .toast-md .toast-wrapper.toast-bottom {
-  @include transform(translate3d(0, 100%, 0));
-
-  bottom: 0;
+  padding-bottom: var(--ion-bottom-padding);
 }
 
 .toast-md .toast-wrapper.toast-middle {
diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index bb4dc7e1f2..b3fd462bdd 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -9,7 +9,6 @@ ion-toast {
    * @prop --button-color: Color of the button text
    * @prop --color: Color of the toast text
    */
-
   @include position(0, null, null, 0);
 
   display: block;
@@ -29,6 +28,19 @@ ion-toast {
   background: var(--background);
 }
 
+.toast-wrapper.toast-top {
+  @include transform(translate3d(0, -100%, 0));
+
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  @include transform(translate3d(0, 100%, 0));
+
+  bottom: 0;
+}
+
+
 .toast-container {
   display: flex;