javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(action-sheet): background includes safe area margin (#24700)

Browse Source 
Resolves #24699
This commit is contained in:
Sean Perkins
2022-02-07 15:13:35 -05:00
committed by GitHub
parent d40c0c3a09
commit 8c22646d66
4 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -22,6 +22,13 @@
text-align: $action-sheet-ios-text-align; 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 // iOS Action Sheet Container
// --------------------------------------------------- // ---------------------------------------------------

8
core/src/components/action-sheet/action-sheet.md.scss
View File

@ -20,6 +20,14 @@
--color: #{$action-sheet-md-title-color}; --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 { .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); @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);

2
core/src/components/action-sheet/action-sheet.md.vars.scss
View File

@ -13,7 +13,7 @@ $action-sheet-md-background-color: $overlay-md-background-c
$action-sheet-md-padding-top: 0 !default; $action-sheet-md-padding-top: 0 !default;
/// @prop - Padding bottom of the action sheet /// @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 // Action Sheet Title

1
core/src/components/action-sheet/action-sheet.scss
View File

@ -67,7 +67,6 @@
.action-sheet-wrapper { .action-sheet-wrapper {
@include position(null, 0, 0, 0); @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)); @include transform(translate3d(0, 100%, 0));
display: block; display: block;