fix(toast): statusbarPadding

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

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

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

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

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);
-  }
+  padding-bottom: var(--ion-bottom-padding);
 }

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

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));
-  }
+  padding-bottom: var(--ion-bottom-padding);
 }
 
 

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':

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':

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;

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

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 {

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;