From 563fda7ffc5278dbdff98576d3e8f07d16167460 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 10 Jul 2023 11:14:10 -0400 Subject: [PATCH] feat(action-sheet): support dynamic type (#27747) --- core/src/components/action-sheet/action-sheet.ios.scss | 4 ++-- .../components/action-sheet/action-sheet.ios.vars.scss | 10 +++++----- core/src/components/action-sheet/action-sheet.md.scss | 4 ++-- .../components/action-sheet/action-sheet.md.vars.scss | 10 +++++----- core/src/components/action-sheet/action-sheet.scss | 3 +++ 5 files changed, 17 insertions(+), 14 deletions(-) diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index d8c17c89e77..594b735386e 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -131,11 +131,11 @@ .action-sheet-button { @include padding($action-sheet-ios-button-padding); - height: $action-sheet-ios-button-height; + min-height: $action-sheet-ios-button-height; font-size: $action-sheet-ios-button-font-size; - contain: strict; + contain: content; } .action-sheet-button .action-sheet-icon { diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index f984d4902ec..722683a71ce 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start: $action-sheet- $action-sheet-ios-title-color: $text-color-step-600 !default; /// @prop - Font size of the action sheet title -$action-sheet-ios-title-font-size: 13px !default; +$action-sheet-ios-title-font-size: max(13px, 0.8125rem) !default; /// @prop - Font weight of the action sheet title $action-sheet-ios-title-font-weight: 400 !default; @@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color: rgba($text-col // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-ios-sub-title-font-size: 13px !default; +$action-sheet-ios-sub-title-font-size: max(13px, 0.8125rem) !default; /// @prop - Padding top of the action sheet sub title $action-sheet-ios-sub-title-padding-top: 6px !default; @@ -97,19 +97,19 @@ $action-sheet-ios-sub-title-padding-start: $action-sheet- $action-sheet-ios-button-height: 56px !default; /// @prop - Padding of the action sheet button -$action-sheet-ios-button-padding: 18px !default; +$action-sheet-ios-button-padding: 14px !default; /// @prop - Text color of the action sheet button $action-sheet-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Font size of the action sheet button icon -$action-sheet-ios-button-icon-font-size: 28px !default; +$action-sheet-ios-button-icon-font-size: max(28px, 1.75rem) !default; /// @prop - Padding right of the action sheet button icon $action-sheet-ios-button-icon-padding-right: .3em !default; /// @prop - Font size of the action sheet button -$action-sheet-ios-button-font-size: 20px !default; +$action-sheet-ios-button-font-size: max(20px, 1.25rem) !default; /// @prop - Border color alpha of the action sheet button $action-sheet-ios-button-border-color-alpha: .08 !default; diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss index 2a306c8dbc0..17076563c39 100644 --- a/core/src/components/action-sheet/action-sheet.md.scss +++ b/core/src/components/action-sheet/action-sheet.md.scss @@ -67,13 +67,13 @@ position: relative; - height: $action-sheet-md-button-height; + min-height: $action-sheet-md-button-height; font-size: $action-sheet-md-button-font-size; text-align: $action-sheet-md-text-align; - contain: strict; + contain: content; overflow: hidden; } 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 fd7bbdfd65c..7da925c8f31 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -26,7 +26,7 @@ $action-sheet-md-title-height: 60px !default; $action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default; /// @prop - Font size of the action sheet title -$action-sheet-md-title-font-size: 16px !default; +$action-sheet-md-title-font-size: 1rem !default; /// @prop - Padding top of the action sheet title $action-sheet-md-title-padding-top: 20px !default; @@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start: $action-sheet-md-title-p // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-md-sub-title-font-size: 14px !default; +$action-sheet-md-sub-title-font-size: 0.875rem !default; /// @prop - Padding top of the action sheet sub title $action-sheet-md-sub-title-padding-top: 16px !default; @@ -70,10 +70,10 @@ $action-sheet-md-button-height: 52px !default; $action-sheet-md-button-text-color: $text-color-step-150 !default; /// @prop - Font size of the action sheet button -$action-sheet-md-button-font-size: 16px !default; +$action-sheet-md-button-font-size: 1rem !default; /// @prop - Padding top of the action sheet button -$action-sheet-md-button-padding-top: 0 !default; +$action-sheet-md-button-padding-top: 12px !default; /// @prop - Padding end of the action sheet button $action-sheet-md-button-padding-end: 16px !default; @@ -91,7 +91,7 @@ $action-sheet-md-button-background: transparent !default; // -------------------------------------------------- /// @prop - Font size of the icon in the action sheet button -$action-sheet-md-icon-font-size: 24px !default; +$action-sheet-md-icon-font-size: 1.5rem !default; /// @prop - Margin top of the icon in the action sheet button $action-sheet-md-icon-margin-top: 0 !default; diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 41dd720bec1..1c8ff8a6600 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -126,7 +126,10 @@ justify-content: flex-end; height: 100%; + + /* Fallback for browsers that do not support dvh */ max-height: 100vh; + max-height: 100dvh; } .action-sheet-group {