fix(all): safe-area using css variables

core/.stylelintrc.yml

@@ -45,10 +45,6 @@ rules:
   declaration-no-important:
     - true
 
-  length-zero-no-unit:
-    - true
-    - ignore:
-      - custom-properties
 
   order/order:
     - custom-properties

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);
 }
 
 

core/src/components/action-sheet/test/basic/index.html

@@ -34,8 +34,8 @@
 
     <style>
       :root {
-        --ion-statusbar-padding: 20px;
+        --ion-safe-area-top: 20px;
-        --ion-bottom-padding: 40px;
+        --ion-safe-area-bottom: 40px;
       }
       .my-custom-class {
         --max-width: 300px;

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-safe-area-top: constant(safe-area-inset-top);
-    --ion-bottom-padding: constant(safe-area-inset-bottom);
+    --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-safe-area-top: env(safe-area-inset-top);
-    --ion-bottom-padding: env(safe-area-inset-bottom);
+    --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);
   }
 }

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);
 }

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);
 }

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;

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};
-
+  --padding-start: #{$item-md-divider-padding-start};
-  @include padding-horizontal($item-md-divider-padding-start, null);
 
   border-bottom: $item-md-divider-border-bottom;
 

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;
 

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
 // --------------------------------------------------

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-top: 0px;
-  --inner-padding-bottom: 0;
+  --inner-padding-bottom: 0px;
-  --inner-padding-start: 0;
+  --inner-padding-start: 0px;
-  --inner-padding-end: 0;
+  --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;
 

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;

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 + var(--ion-safe-area-left, 0px)`;
-      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)`;
-    }
   }
 
   if (checkSafeAreaRight) {
-    if (CSS.supports('right', 'constant(safe-area-inset-right)')) {
+    contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-right, 0px)`;
-      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.transformOrigin = originY + ' ' + originX;

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);
 }
 
 

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 bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
-  const top = `calc(10px + var(--ion-statusbar-padding, 0px))`;
+  const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
 
   switch (position) {
     case 'top':

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 bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
-  const top = `calc(10px + var(--ion-statusbar-padding, 0px))`;
+  const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
 
   switch (position) {
     case 'top':

core/src/components/toast/test/basic/index.html

@@ -85,8 +85,8 @@
 
   <style>
     :root {
-      --ion-statusbar-padding: 20px;
+      --ion-safe-area-top: 20px;
-      --ion-bottom-padding: 40px;
+      --ion-safe-area-bottom: 40px;
     }
 
     f {

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 {