From aa23d08a7164ed1ea5d2599f08cdc55ed8717b66 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Fri, 10 Aug 2018 01:41:05 +0200
Subject: [PATCH] fix(all): safe-area using css variables

---
 core/.stylelintrc.yml                             |  4 ----
 .../components/action-sheet/action-sheet.ios.scss |  2 +-
 .../components/action-sheet/test/basic/index.html |  4 ++--
 core/src/components/app/app.scss                  | 15 ++++++++++-----
 core/src/components/footer/footer.scss            |  2 +-
 core/src/components/header/header.scss            |  2 +-
 .../components/item-divider/item-divider.ios.scss |  3 +--
 .../components/item-divider/item-divider.md.scss  |  3 +--
 .../src/components/item-divider/item-divider.scss | 12 +++++++++++-
 core/src/components/item/item.ios.scss            |  6 ------
 core/src/components/item/item.scss                | 15 ++++++++++-----
 core/src/components/picker/picker.scss            |  2 +-
 .../components/popover/animations/ios.enter.ts    | 12 ++----------
 core/src/components/tabbar/tabbar.scss            |  2 +-
 core/src/components/toast/animations/ios.enter.ts |  4 ++--
 core/src/components/toast/animations/ios.leave.ts |  4 ++--
 core/src/components/toast/test/basic/index.html   |  4 ++--
 core/src/components/toast/toast.md.scss           |  4 ++--
 18 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml
index 5fc36bde75..b82ce8de42 100644
--- a/core/.stylelintrc.yml
+++ b/core/.stylelintrc.yml
@@ -45,10 +45,6 @@ rules:
   declaration-no-important:
     - true
 
-  length-zero-no-unit:
-    - true
-    - ignore:
-      - custom-properties
 
   order/order:
     - custom-properties
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 40d677877e..400836fb40 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -11,7 +11,7 @@
 }
 
 .action-sheet-wrapper {
-  @include margin(var(--ion-statusbar-padding), auto, var(--ion-bottom-padding), auto);
+  @include margin(var(--ion-safe-area-top), auto, var(--ion-safe-area-bottom), auto);
 }
 
 
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index e02451199d..975b715bfa 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -34,8 +34,8 @@
 
     <style>
       :root {
-        --ion-statusbar-padding: 20px;
-        --ion-bottom-padding: 40px;
+        --ion-safe-area-top: 20px;
+        --ion-safe-area-bottom: 40px;
       }
       .my-custom-class {
         --max-width: 300px;
diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss
index 25da437d34..07f4eb5b2c 100644
--- a/core/src/components/app/app.scss
+++ b/core/src/components/app/app.scss
@@ -4,19 +4,24 @@ ion-app.is-device {
 }
 
 ion-app.statusbar-padding {
-  --ion-statusbar-padding: 20px;
+  --ion-safe-area-top: 20px;
 }
 
+// TODO: remove once Safari 11.2 dies
 @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);
+    --ion-safe-area-top: constant(safe-area-inset-top);
+    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
+    --ion-safe-area-left: constant(safe-area-inset-left);
+    --ion-safe-area-rigtht: constant(safe-area-inset-right);
   }
 }
 
 @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);
+    --ion-safe-area-top: env(safe-area-inset-top);
+    --ion-safe-area-bottom: env(safe-area-inset-bottom);
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-rigtht: env(safe-area-inset-right);
   }
 }
diff --git a/core/src/components/footer/footer.scss b/core/src/components/footer/footer.scss
index 2ab73de68a..ed42f6e139 100644
--- a/core/src/components/footer/footer.scss
+++ b/core/src/components/footer/footer.scss
@@ -15,5 +15,5 @@ ion-footer {
 }
 
 ion-footer ion-toolbar:last-child {
-  padding-bottom: var(--ion-bottom-padding);
+  padding-bottom: var(--ion-safe-area-bottom);
 }
\ No newline at end of file
diff --git a/core/src/components/header/header.scss b/core/src/components/header/header.scss
index 550366a990..bd6af54849 100644
--- a/core/src/components/header/header.scss
+++ b/core/src/components/header/header.scss
@@ -15,5 +15,5 @@ ion-header {
 }
 
 ion-header ion-toolbar:first-child {
-  padding-top: var(--ion-statusbar-padding, 0);
+  padding-top: var(--ion-safe-area-top, 0);
 }
diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss
index 9ea299dacc..4dfcc6e32b 100644
--- a/core/src/components/item-divider/item-divider.ios.scss
+++ b/core/src/components/item-divider/item-divider.ios.scss
@@ -7,9 +7,8 @@
 :host {
   --ion-color-base: #{$item-ios-divider-background};
   --ion-color-contrast: #{$item-ios-divider-color};
+  --padding-start: #{$item-ios-divider-padding-start};
 
-  @include padding-horizontal($item-ios-divider-padding-start, null);
-  @include safe-area-padding-horizontal($item-ios-divider-padding-start, null);
   @include border-radius(0);
 
   position: relative;
diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss
index 092683c39d..932f5c8a76 100644
--- a/core/src/components/item-divider/item-divider.md.scss
+++ b/core/src/components/item-divider/item-divider.md.scss
@@ -7,8 +7,7 @@
 :host {
   --ion-color-base: #{$item-md-divider-background};
   --ion-color-contrast: #{$item-md-divider-color};
-
-  @include padding-horizontal($item-md-divider-padding-start, null);
+  --padding-start: #{$item-md-divider-padding-start};
 
   border-bottom: $item-md-divider-border-bottom;
 
diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss
index ec4fc2a8b8..c95d15c875 100644
--- a/core/src/components/item-divider/item-divider.scss
+++ b/core/src/components/item-divider/item-divider.scss
@@ -5,9 +5,19 @@
 // --------------------------------------------------
 
 :host {
+  --padding-start: 0px;
+  --padding-end: 0px;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+
   @include font-smoothing();
   @include margin(0);
-  @include padding(0);
+  @include padding(
+    var(--padding-top),
+    calc(var(--padding-end) + var(--ion-safe-area-right, 0px))
+    var(--padding-bottom),
+    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
+  );
 
   display: flex;
 
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index ef60296587..9cfbd77d2b 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -22,12 +22,6 @@
   --transition: none;
 }
 
-@media screen and (orientation: landscape) {
-  .item-inner {
-    @include safe-area-padding-horizontal(var(--inner-padding-start), var(--inner-padding-end));
-  }
-}
-
 
 // iOS Item Lines
 // --------------------------------------------------
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 27e90b7443..43ddc68dbb 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -18,10 +18,10 @@
   --padding-bottom: 0;
   --padding-end: 0;
   --padding-start: 0;
-  --inner-padding-top: 0;
-  --inner-padding-bottom: 0;
-  --inner-padding-start: 0;
-  --inner-padding-end: 0;
+  --inner-padding-top: 0px;
+  --inner-padding-bottom: 0px;
+  --inner-padding-start: 0px;
+  --inner-padding-end: 0px;
   --box-shadow: none;
   --inner-box-shadow: none;
   --highlight-color-focus: #{ion-color(primary, base)};
@@ -99,7 +99,12 @@ button, a {
 
 .item-inner {
   @include margin(0);
-  @include padding(var(--inner-padding-top), var(--inner-padding-end), var(--inner-padding-bottom), var(--inner-padding-start));
+  @include padding(
+    var(--inner-padding-top),
+    calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
+    var(--inner-padding-bottom),
+    calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-start))
+  );
 
   display: flex;
 
diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss
index 093df27f9e..8794366028 100644
--- a/core/src/components/picker/picker.scss
+++ b/core/src/components/picker/picker.scss
@@ -53,7 +53,7 @@ ion-picker {
 
   justify-content: center;
 
-  margin-bottom: var(--ion-bottom-padding);
+  margin-bottom: var(--ion-safe-area-bottom);
 
   contain: strict;
   overflow: hidden;
diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts
index 9f96cd4c6e..819a69e530 100644
--- a/core/src/components/popover/animations/ios.enter.ts
+++ b/core/src/components/popover/animations/ios.enter.ts
@@ -100,19 +100,11 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
   contentEl.style.left = popoverCSS.left + 'px';
 
   if (checkSafeAreaLeft) {
-    if (CSS.supports('left', 'constant(safe-area-inset-left)')) {
-      contentEl.style.left = `calc(${popoverCSS.left}px + constant(safe-area-inset-left)`;
-    } else if (CSS.supports('left', 'env(safe-area-inset-left)')) {
-      contentEl.style.left = `calc(${popoverCSS.left}px + env(safe-area-inset-left)`;
-    }
+    contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-left, 0px)`;
   }
 
   if (checkSafeAreaRight) {
-    if (CSS.supports('right', 'constant(safe-area-inset-right)')) {
-      contentEl.style.left = `calc(${popoverCSS.left}px - constant(safe-area-inset-right)`;
-    } else if (CSS.supports('right', 'env(safe-area-inset-right)')) {
-      contentEl.style.left = `calc(${popoverCSS.left}px - env(safe-area-inset-right)`;
-    }
+    contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-right, 0px)`;
   }
 
   contentEl.style.transformOrigin = originY + ' ' + originX;
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
index bc51e6e640..6aee0b1ab4 100644
--- a/core/src/components/tabbar/tabbar.scss
+++ b/core/src/components/tabbar/tabbar.scss
@@ -33,7 +33,7 @@
 }
 
 :host(.placement-bottom) {
-  padding-bottom: var(--ion-bottom-padding);
+  padding-bottom: var(--ion-safe-area-bottom);
 }
 
 
diff --git a/core/src/components/toast/animations/ios.enter.ts b/core/src/components/toast/animations/ios.enter.ts
index 8ee58bcf8d..512fdc6f9e 100644
--- a/core/src/components/toast/animations/ios.enter.ts
+++ b/core/src/components/toast/animations/ios.enter.ts
@@ -10,8 +10,8 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, po
   const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
-  const bottom = `calc(-10px - var(--ion-bottom-padding, 0px))`;
-  const top = `calc(10px + var(--ion-statusbar-padding, 0px))`;
+  const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
+  const top = `calc(10px + var(--ion-safe-area-top, 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 58d18f7914..2abb50b25d 100644
--- a/core/src/components/toast/animations/ios.leave.ts
+++ b/core/src/components/toast/animations/ios.leave.ts
@@ -10,8 +10,8 @@ export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, po
   const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
-  const bottom = `calc(-10px - var(--ion-bottom-padding, 0px))`;
-  const top = `calc(10px + var(--ion-statusbar-padding, 0px))`;
+  const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
+  const top = `calc(10px + var(--ion-safe-area-top, 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 09f1545a88..9a7978ebc1 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -85,8 +85,8 @@
 
   <style>
     :root {
-      --ion-statusbar-padding: 20px;
-      --ion-bottom-padding: 40px;
+      --ion-safe-area-top: 20px;
+      --ion-safe-area-bottom: 40px;
     }
 
     f {
diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss
index 294df3b063..66cd2a5636 100644
--- a/core/src/components/toast/toast.md.scss
+++ b/core/src/components/toast/toast.md.scss
@@ -26,11 +26,11 @@
 }
 
 .toast-md .toast-wrapper.toast-top {
-  padding-top: var(--ion-statusbar-padding);
+  padding-top: var(--ion-safe-area-top);
 }
 
 .toast-md .toast-wrapper.toast-bottom {
-  padding-bottom: var(--ion-bottom-padding);
+  padding-bottom: var(--ion-safe-area-bottom);
 }
 
 .toast-md .toast-wrapper.toast-middle {