javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(action-sheet): style the subtitle and move it inside of title

Browse Source 
fixes #10983
This commit is contained in:
Brandy Carney
2017-12-21 12:38:01 -05:00
parent 41ba80f53c
commit 334824bb7a
5 changed files with 64 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,7 +56,7 @@
// -----------------------------------------
.action-sheet-ios .action-sheet-title {
@include padding($action-sheet-ios-title-padding);
@include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start);
@include text-align($action-sheet-ios-text-align);
@@ -67,6 +67,12 @@
color: $action-sheet-ios-title-color;
}
.action-sheet-ios .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);
font-size: $action-sheet-ios-sub-title-font-size;
}
// iOS Action Sheet Buttons
// -----------------------------------------

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

@@ -30,8 +30,17 @@ $action-sheet-ios-background: #f9f9f9 !default;
/// @prop - Border radius of the action sheet
$action-sheet-ios-border-radius: 13px !default;
/// @prop - Padding of the action sheet title
$action-sheet-ios-title-padding: 15px !default;
/// @prop - Padding top of the action sheet title
$action-sheet-ios-title-padding-top: 15px !default;
/// @prop - Padding end of the action sheet title
$action-sheet-ios-title-padding-end: $action-sheet-ios-title-padding-top !default;
/// @prop - Padding bottom of the action sheet title
$action-sheet-ios-title-padding-bottom: $action-sheet-ios-title-padding-top !default;
/// @prop - Padding start of the action sheet title
$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default;
/// @prop - Color of the action sheet title
$action-sheet-ios-title-color: #8f8f8f !default;
@@ -43,13 +52,28 @@ $action-sheet-ios-title-font-size: 13px !default;
$action-sheet-ios-title-font-weight: 400 !default;
/// @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;
/// @prop - Border style of the action sheet title
$action-sheet-ios-title-border-style: solid !default;
$action-sheet-ios-title-border-style: solid !default;
/// @prop - Border color of the action sheet title
$action-sheet-ios-title-border-color: rgba(0, 0, 0, .1) !default;
$action-sheet-ios-title-border-color: rgba(0, 0, 0, .1) !default;
/// @prop - Font size of the action sheet sub title
$action-sheet-ios-sub-title-font-size: 12px !default;
/// @prop - Padding top of the action sheet sub title
$action-sheet-ios-sub-title-padding-top: 15px !default;
/// @prop - Padding end of the action sheet sub title
$action-sheet-ios-sub-title-padding-end: 0 !default;
/// @prop - Padding bottom of the action sheet sub title
$action-sheet-ios-sub-title-padding-bottom: 0 !default;
/// @prop - Padding start of the action sheet sub title
$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default;
/// @prop - Minimum height of the action sheet button
$action-sheet-ios-button-min-height: 56px !default;

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

@@ -7,8 +7,7 @@
// Material Design Action Sheet Title
// -----------------------------------------
.action-sheet-md .action-sheet-title,
.action-sheet-md .action-sheet-sub-title {
.action-sheet-md .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 text-align($action-sheet-md-text-align);
@@ -17,6 +16,12 @@
color: $action-sheet-md-title-color;
}
.action-sheet-md .action-sheet-sub-title {
@include padding($action-sheet-md-sub-title-padding-top, $action-sheet-md-sub-title-padding-end, $action-sheet-md-sub-title-padding-bottom, $action-sheet-md-sub-title-padding-start);
font-size: $action-sheet-md-sub-title-font-size;
}
// Material Design Action Sheet Group
// -----------------------------------------

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

@@ -33,6 +33,21 @@ $action-sheet-md-title-padding-bottom: 17px !default;
/// @prop - Padding start of the action sheet title
$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default;
/// @prop - Font size of the action sheet sub title
$action-sheet-md-sub-title-font-size: 14px !default;
/// @prop - Padding top of the action sheet sub title
$action-sheet-md-sub-title-padding-top: 16px !default;
/// @prop - Padding end of the action sheet sub title
$action-sheet-md-sub-title-padding-end: 0 !default;
/// @prop - Padding bottom of the action sheet sub title
$action-sheet-md-sub-title-padding-bottom: 0 !default;
/// @prop - Padding start of the action sheet sub title
$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default;
/// @prop - Minimum height of the action sheet button
$action-sheet-md-button-min-height: 48px !default;

10
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@@ -281,10 +281,12 @@ export class ActionSheet {
<div class='action-sheet-container'>
<div class='action-sheet-group'>
{this.title
? <div class='action-sheet-title'>{this.title}</div>
: null}
{this.subTitle
? <div class='action-sheet-sub-title'>{this.subTitle}</div>
? <div class='action-sheet-title'>
{this.title}
{this.subTitle
? <div class='action-sheet-sub-title'>{this.subTitle}</div>
: null}
</div>
: null}
{buttons.map(b =>
<button class={this.buttonClass(b)} onClick={() => this.buttonClick(b)}>