ionic-framework/ionic/components/alert/alert.ios.scss

@import "../../globals.ios";
@import "./alert";

// iOS Alerts
// --------------------------------------------------

$alert-ios-max-width:                           270px !default;
$alert-ios-background:                          rgba(0,0,0,0) !default;
$alert-ios-border-radius:                       13px !default;
$alert-ios-background-color:                    #f8f8f8 !default;

$alert-ios-head-padding:                        12px 16px 20px !default;
$alert-ios-head-text-align:                     center !default;

$alert-ios-title-margin-top:                    12px !default;
$alert-ios-title-font-weight:                   bold !default;
$alert-ios-title-font-size:                     17px !default;
$alert-ios-sub-title-font-size:                 14px !default;
$alert-ios-sub-title-text-color:                #666 !default;

$alert-ios-body-padding:                        0px 16px 24px !default;
$alert-ios-body-text-color:                     inherit !default;
$alert-ios-body-text-align:                     center !default;
$alert-ios-body-font-size:                      13px !default;

$alert-ios-input-padding:                       6px !default;
$alert-ios-input-margin-top:                    10px !default;
$alert-ios-input-background-color:              #fff !default;
$alert-ios-input-border:                        1px solid #ccc !default;
$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;


ion-alert {
  background: $alert-ios-background;
}

.alert-wrapper {
  border-radius: $alert-ios-border-radius;
  background-color: $alert-ios-background-color;
  max-width: $alert-ios-max-width;
  overflow: hidden;
}

.alert-head {
  padding: $alert-ios-head-padding;
  text-align: $alert-ios-head-text-align;
}

.alert-title {
  margin-top: $alert-ios-title-margin-top;
  font-weight: $alert-ios-title-font-weight;
  font-size: $alert-ios-title-font-size;
}

.alert-sub-title {
  font-size: $alert-ios-sub-title-font-size;
  color: $alert-ios-sub-title-text-color;
}

.alert-body {
  padding: $alert-ios-body-padding;
  color: $alert-ios-body-text-color;
  text-align: $alert-ios-body-text-align;
  font-size: $alert-ios-body-font-size;
}

.alert-input {
  padding: $alert-ios-input-padding;
  margin-top: $alert-ios-input-margin-top;

  background-color: $alert-ios-input-background-color;
  border: $alert-ios-input-border;
  border-radius: $alert-ios-input-border-radius;
  -webkit-appearance: none;
}

.alert-radio {
  display: flex;
  min-height: $alert-ios-button-min-height;
  border-top: 1px solid $alert-ios-button-border-color;
  cursor: pointer;

  &[aria-checked=true] {
    color: $alert-ios-button-text-color;

    .alert-radio-icon:after {
      position: absolute;
      border-width: 2px;
      border-style: solid;
      border-color: $alert-ios-button-text-color;
      top: 13px;
      left: 7px;
      width: 4px;
      height: 10px;
      border-left: none;
      border-top: none;
      content: '';
      transform: rotate(45deg);
    }
  }

}

.alert-radio-label {
  flex: 1;
  order: 0;
  text-align: auto;
  padding: 13px;
}

.alert-radio-icon {
  position: relative;
  order: 1;
  min-width: 30px;
}

.alert-button {
  margin: 0;
  flex: 1;
  font-size: $alert-ios-button-font-size;
  min-height: $alert-ios-button-min-height;
  border-radius: 0;
  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: $alert-ios-button-background-color;

  &:last-child {
    font-weight: bold;
    border-right: 0;
  }

  &.activated {
    opacity: 1;
    background-color: $alert-ios-button-activated-background-color;
  }

  &:hover:not(.disable-hover) {
    opacity: 1;
  }
}

&.hairlines {
  .alert-input {
    border-width: 0.55px;
  }

  .alert-button {
    border-top-width: 0.55px;
    border-right-width: 0.55px;
  }
}