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(alert): match MD spec (#16145)

Browse Source 
This updates our alert to match the updated Material Design
spec, including enter/leave animations.
This commit is contained in:
Cam Wiegert
2018-10-30 14:49:40 -05:00
committed by Adam Bradley
parent c2f58038f5
commit 287aec89ab
4 changed files with 14 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/alert/alert.md.scss
View File

@@ -60,6 +60,10 @@
@include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
}
.alert-head + .alert-message {
padding-top: 0;
}
// Material Design Alert Input
// --------------------------------------------------
@@ -255,7 +259,7 @@
// --------------------------------------------------
.alert-button-group {
@include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
@include padding(8px);
box-sizing: border-box;

22
core/src/components/alert/alert.md.vars.scss
View File

@@ -11,13 +11,13 @@ $alert-md-font-size: 14px !default;
$alert-md-max-width: 280px !default;
/// @prop - Border radius of the alert
$alert-md-border-radius: 2px !default;
$alert-md-border-radius: 4px !default;
/// @prop - Background color of the alert
$alert-md-background-color: $overlay-md-background-color !default;
/// @prop - Box shadow color of the alert
$alert-md-box-shadow: 0 16px 20px rgba(0, 0, 0, .4) !default;
$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default;
/// @prop - Padding top of the alert head
$alert-md-head-padding-top: 20px !default;
@@ -50,19 +50,19 @@ $alert-md-sub-title-font-size: 16px !default;
$alert-md-sub-title-text-color: $text-color !default;
/// @prop - Padding top of the alert message
$alert-md-message-padding-top: 0 !default;
$alert-md-message-padding-top: 20px !default;
/// @prop - Padding end of the alert message
$alert-md-message-padding-end: 24px !default;
/// @prop - Padding bottom of the alert message
$alert-md-message-padding-bottom: 24px !default;
$alert-md-message-padding-bottom: $alert-md-message-padding-top !default;
/// @prop - Padding start of the alert message
$alert-md-message-padding-start: $alert-md-message-padding-end !default;
/// @prop - Font size of the alert message
$alert-md-message-font-size: 15px !default;
$alert-md-message-font-size: 16px !default;
/// @prop - Text color of the alert message
$alert-md-message-text-color: $text-color-step-450 !default;
@@ -121,18 +121,6 @@ $alert-md-input-placeholder-color: $placeholder-text-color !default;
/// @prop - Flex wrap of the alert button group
$alert-md-button-group-flex-wrap: wrap-reverse !default;
/// @prop - Padding top of the alert button group
$alert-md-button-group-padding-top: 5px !default;
/// @prop - Padding end of the alert button group
$alert-md-button-group-padding-end: 12px !default;
/// @prop - Padding bottom of the alert button group
$alert-md-button-group-padding-bottom: 7px !default;
/// @prop - Padding start of the alert button group
$alert-md-button-group-padding-start: 24px !default;
/// @prop - Justify content of the alert button group
$alert-md-button-group-justify-content: flex-end !default;

4
core/src/components/alert/animations/md.enter.ts
View File

@@ -14,12 +14,12 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
backdropAnimation.fromTo('opacity', 0.01, 0.5);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 0.9, 1);
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation));
}

4
core/src/components/alert/animations/md.leave.ts
View File

@@ -14,12 +14,12 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
backdropAnimation.fromTo('opacity', 0.5, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
wrapperAnimation.fromTo('opacity', 0.99, 0);
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation));
}