javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(action-sheet): header, subheader, and icon alignment better matches native ios (#23322)

Browse Source 
resolves #23317
This commit is contained in:
Liam DeBeasi
2021-07-08 09:38:00 -04:00
committed by GitHub
parent a15cace139
commit 39315bc857
3 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,10 +110,16 @@
text-align: $action-sheet-ios-text-align; text-align: $action-sheet-ios-text-align;
} }
.action-sheet-title.action-sheet-has-sub-title {
font-weight: $action-sheet-ios-title-with-sub-title-font-weight;
}
.action-sheet-sub-title { .action-sheet-sub-title {
@include padding($action-sheet-ios-sub-title-padding-top, $action-sheet-ios-sub-title-padding-end, $action-sheet-ios-sub-title-padding-bottom, $action-sheet-ios-sub-title-padding-start); @include padding($action-sheet-ios-sub-title-padding-top, $action-sheet-ios-sub-title-padding-end, $action-sheet-ios-sub-title-padding-bottom, $action-sheet-ios-sub-title-padding-start);
font-size: $action-sheet-ios-sub-title-font-size; font-size: $action-sheet-ios-sub-title-font-size;
font-weight: $action-sheet-ios-title-font-weight;
} }

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

@ -55,6 +55,9 @@ $action-sheet-ios-title-font-size: 13px !default;
/// @prop - Font weight of the action sheet title /// @prop - Font weight of the action sheet title
$action-sheet-ios-title-font-weight: 400 !default; $action-sheet-ios-title-font-weight: 400 !default;
/// @prop - Font weight of the action sheet title when it has a sub title
$action-sheet-ios-title-with-sub-title-font-weight: 600 !default;
/// @prop - Border width of the action sheet title /// @prop - Border width of the action sheet title
$action-sheet-ios-title-border-width: $hairlines-width !default; $action-sheet-ios-title-border-width: $hairlines-width !default;
@ -72,10 +75,10 @@ $action-sheet-ios-title-border-color: rgba($text-col
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Font size of the action sheet sub title /// @prop - Font size of the action sheet sub title
$action-sheet-ios-sub-title-font-size: 12px !default; $action-sheet-ios-sub-title-font-size: 13px !default;
/// @prop - Padding top of the action sheet sub title /// @prop - Padding top of the action sheet sub title
$action-sheet-ios-sub-title-padding-top: 15px !default; $action-sheet-ios-sub-title-padding-top: 6px !default;
/// @prop - Padding end of the action sheet sub title /// @prop - Padding end of the action sheet sub title
$action-sheet-ios-sub-title-padding-end: 0 !default; $action-sheet-ios-sub-title-padding-end: 0 !default;
@ -103,7 +106,7 @@ $action-sheet-ios-button-text-color: ion-color(prim
$action-sheet-ios-button-icon-font-size: 28px !default; $action-sheet-ios-button-icon-font-size: 28px !default;
/// @prop - Padding right of the action sheet button icon /// @prop - Padding right of the action sheet button icon
$action-sheet-ios-button-icon-padding-right: .1em !default; $action-sheet-ios-button-icon-padding-right: .3em !default;
/// @prop - Font size of the action sheet button /// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 20px !default; $action-sheet-ios-button-font-size: 20px !default;

5
core/src/components/action-sheet/action-sheet.tsx
View File

@ -258,7 +258,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
<div class="action-sheet-container"> <div class="action-sheet-container">
<div class="action-sheet-group" ref={el => this.groupEl = el}> <div class="action-sheet-group" ref={el => this.groupEl = el}>
{this.header !== undefined && {this.header !== undefined &&
<div class="action-sheet-title"> <div class={{
'action-sheet-title': true,
'action-sheet-has-sub-title': this.subHeader !== undefined
}}>
{this.header} {this.header}
{this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>} {this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
</div> </div>