Skip to content

Commit

Permalink
fix(alert): update md alert to closer match spec
Browse files Browse the repository at this point in the history 
this also makes it so you can update the alert radio width and the
inner icon dot will resize and position properly

https://ionic-snapshot-go.appspot.com/ionic-core/snapshots/ye9/ccb/chrom
e_400x800
  • Loading branch information
@brandyscarney
brandyscarney committed Mar 21, 2018
1 parent 98b8253 commit 7d53e49
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 52 deletions.
2 changes: 2 additions & 0 deletions core/src/components/alert/alert.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@

text-overflow: ellipsis;
white-space: nowrap;
font-size: $alert-md-radio-label-font-size;

color: $alert-md-radio-label-text-color;
}
Expand Down Expand Up @@ -183,6 +184,7 @@

text-overflow: ellipsis;
white-space: nowrap;
font-size: $alert-md-checkbox-label-font-size;

color: $alert-md-checkbox-label-text-color;
}
Expand Down
110 changes: 58 additions & 52 deletions core/src/components/alert/alert.md.vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,22 @@ $alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
$alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default;

/// @prop - Padding top of the alert head
$alert-md-head-padding-top: 24px !default;
$alert-md-head-padding-top: 20px !default;

/// @prop - Padding end of the alert head
$alert-md-head-padding-end: 24px !default;
$alert-md-head-padding-end: 23px !default;

/// @prop - Padding bottom of the alert head
$alert-md-head-padding-bottom: 20px !default;
$alert-md-head-padding-bottom: 15px !default;

/// @prop - Padding start of the alert head
$alert-md-head-padding-start: 24px !default;
$alert-md-head-padding-start: $alert-md-head-padding-end !default;

/// @prop - Text align of the alert head
$alert-md-head-text-align: start !default;

/// @prop - Font size of the alert title
$alert-md-title-font-size: 22px !default;
$alert-md-title-font-size: 20px !default;

/// @prop - Font weight of the alert title
$alert-md-title-font-weight: 500 !default;
Expand All @@ -60,7 +60,7 @@ $alert-md-message-padding-end: 24px !default;
$alert-md-message-padding-bottom: 24px !default;

/// @prop - Padding start of the alert message
$alert-md-message-padding-start: 24px !default;
$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;
Expand Down Expand Up @@ -123,13 +123,13 @@ $alert-md-input-placeholder-color: $placeholder-text-md-color !defaul
$alert-md-button-group-flex-wrap: wrap-reverse !default;

/// @prop - Padding top of the alert button group
$alert-md-button-group-padding-top: 8px !default;
$alert-md-button-group-padding-top: 5px !default;

/// @prop - Padding end of the alert button group
$alert-md-button-group-padding-end: 8px !default;
$alert-md-button-group-padding-end: 12px !default;

/// @prop - Padding bottom of the alert button group
$alert-md-button-group-padding-bottom: 8px !default;
$alert-md-button-group-padding-bottom: 7px !default;

/// @prop - Padding start of the alert button group
$alert-md-button-group-padding-start: 24px !default;
Expand Down Expand Up @@ -188,35 +188,17 @@ $alert-md-list-border-top: 1px solid $alert-md-input-border-c
/// @prop - Border bottom of the alert list
$alert-md-list-border-bottom: $alert-md-list-border-top !default;

/// @prop - Padding top on the label for the radio alert
$alert-md-radio-label-padding-top: 13px !default;

/// @prop - Padding end on the label for the radio alert
$alert-md-radio-label-padding-end: 26px !default;

/// @prop - Padding bottom on the label for the radio alert
$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default;

/// @prop - Padding start on the label for the radio alert
$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default;

/// @prop - Text color of the label for the radio alert
$alert-md-radio-label-text-color: $text-md-color !default;

/// @prop - Text color of the label for the checked radio alert
$alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default;

/// @prop - Top of the alert radio
$alert-md-radio-top: 0 !default;

/// @prop - Left of the alert radio
$alert-md-radio-left: 13px !default;
$alert-md-radio-left: 26px !default;

/// @prop - Width of the alert radio
$alert-md-radio-width: 16px !default;
$alert-md-radio-width: 20px !default;

/// @prop - Height of the alert radio
$alert-md-radio-height: 16px !default;
$alert-md-radio-height: $alert-md-radio-width !default;

/// @prop - Border width of the alert radio
$alert-md-radio-border-width: 2px !default;
Expand All @@ -228,22 +210,22 @@ $alert-md-radio-border-style: solid !default;
$alert-md-radio-border-radius: 50% !default;

/// @prop - Border color of the alert radio when off
$alert-md-radio-border-color-off: $text-md-color-step-600 !default;
$alert-md-radio-border-color-off: $text-md-color-step-450 !default;

/// @prop - Border color of the alert radio when on
$alert-md-radio-border-color-on: $alert-md-button-text-color !default;

/// @prop - Top of the icon in the alert radio
$alert-md-radio-icon-top: 2px !default;

/// @prop - Start of the icon in the radio alert
$alert-md-radio-icon-start: 2px !default;

/// @prop - Width of the icon in the alert radio
$alert-md-radio-icon-width: 8px !default;
$alert-md-radio-icon-width: $alert-md-radio-width / 2 !default;

/// @prop - Height of the icon in the alert radio
$alert-md-radio-icon-height: 8px !default;
$alert-md-radio-icon-height: $alert-md-radio-icon-width !default;

/// @prop - Top of the icon in the alert radio
$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) / 2 !default;

/// @prop - Start of the icon in the radio alert
$alert-md-radio-icon-start: $alert-md-radio-icon-top !default;

/// @prop - Border radius of the icon in the alert radio
$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default;
Expand All @@ -257,26 +239,32 @@ $alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default;
/// @prop - Transition of the icon in the alert radio
$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default;

/// @prop - Padding top of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-top: 13px !default;
/// @prop - Padding top on the label for the radio alert
$alert-md-radio-label-padding-top: 13px !default;

/// @prop - Padding end of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-end: 26px !default;
/// @prop - Padding end on the label for the radio alert
$alert-md-radio-label-padding-end: 26px !default;

/// @prop - Padding bottom of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default;
/// @prop - Padding bottom on the label for the radio alert
$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default;

/// @prop - Padding start of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default;
/// @prop - Padding start on the label for the radio alert
$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default;

/// @prop - Text color of the label for the checkbox in the alert
$alert-md-checkbox-label-text-color: $text-md-color !default;
/// @prop - Font size of the label for the radio alert
$alert-md-radio-label-font-size: 16px !default;

/// @prop - Text color of the label for the radio alert
$alert-md-radio-label-text-color: $text-md-color-step-150 !default;

/// @prop - Text color of the label for the checked radio alert
$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default;

/// @prop - Top of the checkbox in the alert
$alert-md-checkbox-top: 0 !default;

/// @prop - Left of the checkbox in the alert
$alert-md-checkbox-left: 13px !default;
$alert-md-checkbox-left: 26px !default;

/// @prop - Width of the checkbox in the alert
$alert-md-checkbox-width: 16px !default;
Expand All @@ -294,7 +282,7 @@ $alert-md-checkbox-border-style: solid !default;
$alert-md-checkbox-border-radius: 2px !default;

/// @prop - Border color of the checkbox in the alert when off
$alert-md-checkbox-border-color-off: $border-md-color !default;
$alert-md-checkbox-border-color-off: $text-md-color-step-450 !default;

/// @prop - Border color of the checkbox in the alert when on
$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default;
Expand Down Expand Up @@ -323,5 +311,23 @@ $alert-md-checkbox-icon-border-color: ion-color($colors-md, $alert-md-ch
/// @prop - Transform of the icon in the checkbox alert
$alert-md-checkbox-icon-transform: rotate(45deg) !default;

/// @prop - Padding top of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-top: 13px !default;

/// @prop - Padding end of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left !default;

/// @prop - Padding bottom of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default;

/// @prop - Padding start of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default;

/// @prop - Text color of the label for the checkbox in the alert
$alert-md-checkbox-label-text-color: $text-md-color-step-150 !default;

/// @prop - Font size of the label for the checkbox in the alert
$alert-md-checkbox-label-font-size: 16px !default;

/// @prop - Height of the tappable inputs in the checkbox alert
$alert-md-tappable-height: $item-min-height !default;
$alert-md-tappable-height: $item-min-height !default;

0 comments on commit 7d53e49

Please sign in to comment.