diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index d2c06d96bf..d8c17c89e7 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -22,6 +22,13 @@ text-align: $action-sheet-ios-text-align; } +// iOS Action Sheet Wrapper +// --------------------------------------------------- + +.action-sheet-wrapper { + @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto); +} + // iOS Action Sheet Container // --------------------------------------------------- diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss index f455d0afc5..fafe9705df 100644 --- a/core/src/components/action-sheet/action-sheet.md.scss +++ b/core/src/components/action-sheet/action-sheet.md.scss @@ -20,6 +20,14 @@ --color: #{$action-sheet-md-title-color}; } + +// Material Design Action Sheet Wrapper +// ----------------------------------------- + +.action-sheet-wrapper { + @include margin(var(--ion-safe-area-top, 0), auto, 0, auto); +} + .action-sheet-title { @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start); diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index 0dc27f6e77..fd7bbdfd65 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -13,7 +13,7 @@ $action-sheet-md-background-color: $overlay-md-background-c $action-sheet-md-padding-top: 0 !default; /// @prop - Padding bottom of the action sheet -$action-sheet-md-padding-bottom: 0 !default; +$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom) !default; // Action Sheet Title diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index bdc813571a..1b6226e05a 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -67,7 +67,6 @@ .action-sheet-wrapper { @include position(null, 0, 0, 0); - @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto); @include transform(translate3d(0, 100%, 0)); display: block;