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 a07294f9c6..0f1508446b 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss @@ -19,6 +19,9 @@ $action-sheet-ios-padding-bottom: $action-sheet-ios-paddin /// @prop - Padding start of the action sheet $action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; +/// @prop - Top margin of the action sheet button group +$action-sheet-ios-group-margin-top: 10px !default; + /// @prop - Bottom margin of the action sheet button group $action-sheet-ios-group-margin-bottom: 10px !default; @@ -105,6 +108,10 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; @include text-align($action-sheet-ios-text-align); } +.action-sheet-ios .action-sheet-wrapper { + @include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto); +} + .action-sheet-ios .action-sheet-container { @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start); } @@ -113,9 +120,16 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; @include border-radius($action-sheet-ios-border-radius); @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null); - overflow: hidden; - background: $action-sheet-ios-background; + + // scss-lint:disable VendorPrefix + -webkit-overflow-scrolling: touch; + // Prevents borders from going outside of the container + -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000); +} + +.action-sheet-ios .action-sheet-group:first-child { + @include margin($action-sheet-ios-group-margin-top, null, null, null); } .action-sheet-ios .action-sheet-group:last-child { diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss index f3c3960c89..89e5a99719 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.scss @@ -10,8 +10,11 @@ $action-sheet-md-text-align: start !default; /// @prop - Background color of the action sheet $action-sheet-md-background: #fafafa !default; -/// @prop - Bottom margin of the action sheet button group -$action-sheet-md-group-margin-bottom: 8px !default; +/// @prop - Padding top of the action sheet +$action-sheet-md-padding-top: .8rem !default; + +/// @prop - Padding bottom of the action sheet +$action-sheet-md-padding-bottom: .8rem !default; /// @prop - Color of the action sheet title $action-sheet-md-title-color: #757575 !default; @@ -82,11 +85,6 @@ $action-sheet-md-icon-margin-bottom: 0 !default; /// @prop - Margin start of the icon in the action sheet button $action-sheet-md-icon-margin-start: 0 !default; -.action-sheet-md .action-sheet-container { - @include padding(.8rem, 0); - - background: $action-sheet-md-background; -} .action-sheet-md .action-sheet-title, .action-sheet-md .action-sheet-sub-title { @@ -131,7 +129,15 @@ $action-sheet-md-icon-margin-start: 0 !default; } .action-sheet-md .action-sheet-group { - overflow: hidden; + background: $action-sheet-md-background; +} + +.action-sheet-md .action-sheet-group:first-child { + @include padding($action-sheet-md-padding-top, null, null, null); +} + +.action-sheet-md .action-sheet-group:last-child { + @include padding(null, null, $action-sheet-md-padding-bottom, null); } .action-sheet-md .action-sheet-group .button-inner { diff --git a/packages/core/src/components/action-sheet/action-sheet.scss b/packages/core/src/components/action-sheet/action-sheet.scss index e1993583cd..e0667f07d4 100644 --- a/packages/core/src/components/action-sheet/action-sheet.scss +++ b/packages/core/src/components/action-sheet/action-sheet.scss @@ -4,10 +4,11 @@ // -------------------------------------------------- /// @prop - Width of the action sheet -$action-sheet-width: 100% !default; +$action-sheet-width: 100% !default; /// @prop - Maximum width of the action sheet -$action-sheet-max-width: 500px !default; +$action-sheet-max-width: 500px !default; + ion-action-sheet { @include position(0, null, null, 0); @@ -21,7 +22,7 @@ ion-action-sheet { } .action-sheet-wrapper { - @include position(null, 0, 0, 0); + @include position(0, 0, 0, 0); @include margin(auto); @include transform(translate3d(0, 100%, 0)); @@ -31,12 +32,35 @@ ion-action-sheet { width: $action-sheet-width; max-width: $action-sheet-max-width; + + pointer-events: none; } .action-sheet-button { width: $action-sheet-width; } -ion-action-sheet-controller { - display: none; +.action-sheet-container { + display: flex; + + flex-flow: column; + + justify-content: flex-end; + + height: 100%; + max-height: 100%; } + +.action-sheet-group { + overflow: scroll; + + flex-shrink: 2; + + pointer-events: all; +} + +.action-sheet-group-cancel { + overflow: hidden; + + flex-shrink: 0; +} \ No newline at end of file diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index d53ee3f30c..b409ad3bf4 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -199,7 +199,7 @@ export class ActionSheet { )} {cancelButton - ?
+ ?