diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss index 8d626347db..30db203697 100644 --- a/ionic/components/alert/alert.ios.scss +++ b/ionic/components/alert/alert.ios.scss @@ -32,6 +32,7 @@ $alert-ios-input-border-radius: 4px !default; $alert-ios-button-min-height: 44px !default; $alert-ios-button-font-size: 17px !default; $alert-ios-button-text-color: map-get($colors-ios, primary) !default; +$alert-ios-button-background-color: transparent !default; $alert-ios-button-border-color: #c8c7cc !default; $alert-ios-button-activated-background-color: #e9e9e9 !default; @@ -89,7 +90,7 @@ ion-alert { border-top: 1px solid $alert-ios-button-border-color; border-right: 1px solid $alert-ios-button-border-color; color: $alert-ios-button-text-color; - background-color: transparent; + background-color: $alert-ios-button-background-color; &:last-child { font-weight: bold; diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss index 9a46bf1f05..f664896020 100644 --- a/ionic/components/alert/alert.md.scss +++ b/ionic/components/alert/alert.md.scss @@ -24,6 +24,8 @@ $alert-md-input-highlight-color: map-get($colors-md, primary) !default; $alert-md-input-margin-top: 5px !default; $alert-md-input-margin-bottom: 5px !default; +$alert-md-button-text-color: map-get($colors-md, primary) !default; +$alert-md-button-background-color: transparent !default; $alert-md-buttons-padding: 8px 8px 8px 24px !default; $alert-md-buttons-justify-content: flex-end !default; @@ -70,6 +72,14 @@ $alert-md-buttons-justify-content: flex-end !default; justify-content: $alert-md-buttons-justify-content; } -.alert-button.activated { - opacity: 1; +.alert-button { + position: relative; + overflow: hidden; + font-weight: 500; + color: $alert-md-button-text-color; + background-color: $alert-md-button-background-color; + + &.activated { + opacity: 1; + } }