diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss index 0f1508446b..d815c16abe 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss @@ -110,6 +110,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; .action-sheet-ios .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); } .action-sheet-ios .action-sheet-container { diff --git a/packages/core/src/components/action-sheet/test/basic.html b/packages/core/src/components/action-sheet/test/basic.html index fb121b4e78..dd089ef0b5 100644 --- a/packages/core/src/components/action-sheet/test/basic.html +++ b/packages/core/src/components/action-sheet/test/basic.html @@ -4,7 +4,7 @@ Action Sheet Basic - + @@ -301,4 +301,4 @@ - \ No newline at end of file + diff --git a/packages/core/src/components/fab/fab.scss b/packages/core/src/components/fab/fab.scss index 00a00a7355..a2b4430fd1 100755 --- a/packages/core/src/components/fab/fab.scss +++ b/packages/core/src/components/fab/fab.scss @@ -94,10 +94,16 @@ ion-fab { @include multi-dir() { right: $fab-content-margin; } + + @include multi-dir() { + right: calc(#{$fab-content-margin} + constant(safe-area-inset-right)); + right: calc(#{$fab-content-margin} + env(safe-area-inset-right)); + } } &[end] { @include position-horizontal(null, $fab-content-margin); + @include safe-position-horizontal(null, $fab-content-margin); } &[bottom] { @@ -109,10 +115,17 @@ ion-fab { @include multi-dir() { left: $fab-content-margin; } + + + @include multi-dir() { + left: calc(#{$fab-content-margin} + constant(safe-area-inset-left)); + left: calc(#{$fab-content-margin} + env(safe-area-inset-left)); + } } &[start] { @include position-horizontal($fab-content-margin, null); + @include safe-position-horizontal($fab-content-margin, null); } &[top][edge] { diff --git a/packages/core/src/components/fab/test/basic.html b/packages/core/src/components/fab/test/basic.html index 6f6134a787..73514218ed 100644 --- a/packages/core/src/components/fab/test/basic.html +++ b/packages/core/src/components/fab/test/basic.html @@ -3,7 +3,7 @@ Ionic FAB - + diff --git a/packages/core/src/components/picker/picker.scss b/packages/core/src/components/picker/picker.scss index 1151e2e69d..2ac9fb3ada 100644 --- a/packages/core/src/components/picker/picker.scss +++ b/packages/core/src/components/picker/picker.scss @@ -51,6 +51,9 @@ ion-picker { } .picker-columns { + @include margin(null, null, constant(safe-area-inset-bottom), null); + @include margin(null, null, env(safe-area-inset-bottom), null); + position: relative; display: flex; diff --git a/packages/core/src/components/popover/test/basic.html b/packages/core/src/components/popover/test/basic.html index df5f0ef60b..2ebdcd660e 100644 --- a/packages/core/src/components/popover/test/basic.html +++ b/packages/core/src/components/popover/test/basic.html @@ -4,7 +4,7 @@ Ionic Popover - + diff --git a/packages/core/src/themes/ionic.mixins.scss b/packages/core/src/themes/ionic.mixins.scss index 3af55898e1..1a3ee466fe 100644 --- a/packages/core/src/themes/ionic.mixins.scss +++ b/packages/core/src/themes/ionic.mixins.scss @@ -610,3 +610,52 @@ @include padding-horizontal($safe-area-start-env, $safe-area-end-env); } } + + +// Add safe position horizontal +// @param {string} $start - amount to position start +// @param {string} $end - amount to left: 0; end +// ---------------------------------------------------------- +@mixin safe-position-horizontal($start: null, $end: null){ + $safe-area-start: null; + $safe-area-end: null; + $safe-area-start-env: null; + $safe-area-end-env: null; + @if ($start) { + $safe-area-start: calc(constant(safe-area-inset-left) + #{$start}); + $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start}); + } + @if ($end) { + $safe-area-end: calc(constant(safe-area-inset-right) + #{$end}); + $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end}); + } + + @if $safe-area-start == $safe-area-end { + @include multi-dir() { + left: $safe-area-start; + right: $safe-area-end; + } + @include multi-dir() { + left: $safe-area-start-env; + right: $safe-area-end-env; + } + } @else { + @include ltr() { + left: $safe-area-start; + right: $safe-area-end; + } + @include ltr() { + left: $safe-area-start-env; + right: $safe-area-end-env; + } + @include rtl() { + left: $safe-area-end; + right: $safe-area-start; + } + @include rtl() { + left: $safe-area-end-env; + right: $safe-area-start-env; + } + } +} +