diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss index bb6c868be5..63f4071546 100644 --- a/core/src/components/alert/alert.md.scss +++ b/core/src/components/alert/alert.md.scss @@ -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; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 14c55b616b..b3390bbdee 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -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; diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts index c4a3111ed1..a2582f371a 100644 --- a/core/src/components/alert/animations/md.enter.ts +++ b/core/src/components/alert/animations/md.enter.ts @@ -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)); } diff --git a/core/src/components/alert/animations/md.leave.ts b/core/src/components/alert/animations/md.leave.ts index a0945d4c47..3afdef8458 100644 --- a/core/src/components/alert/animations/md.leave.ts +++ b/core/src/components/alert/animations/md.leave.ts @@ -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)); }