@import "../../globals.ios"; @import "./alert"; // iOS Alerts // -------------------------------------------------- $alert-ios-max-width: 270px !default; $alert-ios-border-radius: 13px !default; $alert-ios-background: #f8f8f8 !default; $alert-ios-box-shadow: none !default; $alert-ios-head-padding: 12px 16px 7px !default; $alert-ios-head-text-align: center !default; $alert-ios-title-margin-top: 8px !default; $alert-ios-title-font-size: 17px !default; $alert-ios-title-font-weight: 600 !default; $alert-ios-sub-title-font-size: 14px !default; $alert-ios-sub-title-text-color: #666 !default; $alert-ios-message-padding: 0 16px 21px !default; $alert-ios-message-font-size: 13px !default; $alert-ios-message-text-align: center !default; $alert-ios-message-text-color: inherit !default; $alert-ios-message-padding-empty: 0 0 12px 0 !default; $alert-ios-content-max-height: 240px !default; $alert-ios-input-margin-top: 10px !default; $alert-ios-input-padding: 6px !default; $alert-ios-input-border-color: #ccc !default; $alert-ios-input-border: 1px solid $alert-ios-input-border-color !default; $alert-ios-input-border-radius: 4px !default; $alert-ios-input-background-color: #fff !default; $alert-ios-button-group-flex-wrap: wrap !default; $alert-ios-button-flex: 1 1 auto !default; $alert-ios-button-margin: 0 !default; $alert-ios-button-min-width: 50% !default; $alert-ios-button-min-height: 44px !default; $alert-ios-button-font-size: 17px !default; $alert-ios-button-text-color: color($colors-ios, primary) !default; $alert-ios-button-background-color: transparent !default; $alert-ios-button-background-color-activated: #e9e9e9 !default; $alert-ios-button-border-width: 1px !default; $alert-ios-button-border-style: solid !default; $alert-ios-button-border-color: #dbdbdf !default; $alert-ios-button-border-radius: 0 !default; $alert-ios-button-main-font-weight: bold !default; $alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; $alert-ios-radio-label-padding: 13px !default; $alert-ios-radio-min-width: 30px !default; $alert-ios-radio-icon-top: 13px !default; $alert-ios-radio-icon-left: 7px !default; $alert-ios-radio-icon-width: 6px !default; $alert-ios-radio-icon-height: 12px !default; $alert-ios-radio-icon-border-width: 2px !default; $alert-ios-radio-icon-border-style: solid !default; $alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; $alert-ios-radio-icon-transform: rotate(45deg) !default; $alert-ios-checkbox-label-padding: 13px !default; $alert-ios-checkbox-margin: 10px 6px 10px 16px !default; $alert-ios-checkbox-size: 21px !default; $alert-ios-checkbox-border-width: 1px !default; $alert-ios-checkbox-border-style: solid !default; $alert-ios-checkbox-border-radius: 50% !default; $alert-ios-checkbox-border-color-off: $list-ios-border-color !default; $alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default; $alert-ios-checkbox-background-color-off: $list-ios-background-color !default; $alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default; $alert-ios-checkbox-icon-top: 4px !default; $alert-ios-checkbox-icon-left: 7px !default; $alert-ios-checkbox-icon-width: 4px !default; $alert-ios-checkbox-icon-height: 9px !default; $alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; $alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; $alert-ios-checkbox-icon-border-color: $background-ios-color !default; $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-wrapper { overflow: hidden; max-width: $alert-ios-max-width; border-radius: $alert-ios-border-radius; background-color: $alert-ios-background; box-shadow: $alert-ios-box-shadow; } // iOS Alert Header // -------------------------------------------------- .alert-head { padding: $alert-ios-head-padding; text-align: $alert-ios-head-text-align; } .alert-title { margin-top: $alert-ios-title-margin-top; font-size: $alert-ios-title-font-size; font-weight: $alert-ios-title-font-weight; } .alert-sub-title { font-size: $alert-ios-sub-title-font-size; color: $alert-ios-sub-title-text-color; } // iOS Alert Message // -------------------------------------------------- .alert-message, .alert-input-group { padding: $alert-ios-message-padding; font-size: $alert-ios-message-font-size; text-align: $alert-ios-message-text-align; color: $alert-ios-message-text-color; } .alert-message { max-height: $alert-ios-content-max-height; &:empty { padding: $alert-ios-message-padding-empty; } } // iOS Alert Input // -------------------------------------------------- .alert-input { margin-top: $alert-ios-input-margin-top; padding: $alert-ios-input-padding; border: $alert-ios-input-border; border-radius: $alert-ios-input-border-radius; background-color: $alert-ios-input-background-color; -webkit-appearance: none; } // iOS Alert Radio/Checkbox Group // -------------------------------------------------- .alert-radio-group, .alert-checkbox-group { overflow: scroll; max-height: $alert-ios-content-max-height; border-top: $alert-ios-list-border-top; } .alert-tappable { display: flex; min-height: $alert-ios-button-min-height; } // iOS Alert Radio // -------------------------------------------------- .alert-radio-label { overflow: hidden; flex: 1; order: 0; padding: $alert-ios-radio-label-padding; text-overflow: ellipsis; white-space: nowrap; } // iOS Alert Radio Checkmark: Unchecked // ----------------------------------------- .alert-radio-icon { position: relative; order: 1; min-width: $alert-ios-radio-min-width; } .alert-radio[aria-checked=true] { color: $alert-ios-button-text-color; } // iOS Alert Radio Checkmark: Checked // ----------------------------------------- .alert-radio[aria-checked=true] .alert-radio-inner { position: absolute; top: $alert-ios-radio-icon-top; left: $alert-ios-radio-icon-left; width: $alert-ios-radio-icon-width; height: $alert-ios-radio-icon-height; border-width: $alert-ios-radio-icon-border-width; border-top-width: 0; border-left-width: 0; border-style: $alert-ios-radio-icon-border-style; border-color: $alert-ios-radio-icon-border-color; transform: $alert-ios-radio-icon-transform; } // iOS Alert Checkbox Label // -------------------------------------------------- .alert-checkbox-label { overflow: hidden; flex: 1; padding: $alert-ios-checkbox-label-padding; text-overflow: ellipsis; white-space: nowrap; } // iOS Alert Checkbox Outer Circle: Unchecked // ----------------------------------------- .alert-checkbox-icon { position: relative; margin: $alert-ios-checkbox-margin; width: $alert-ios-checkbox-size; height: $alert-ios-checkbox-size; border-width: $alert-ios-checkbox-border-width; border-style: $alert-ios-checkbox-border-style; border-radius: $alert-ios-checkbox-border-radius; border-color: $alert-ios-checkbox-border-color-off; background-color: $alert-ios-checkbox-background-color-off; } // iOS Alert Checkbox Outer Circle: Checked // ----------------------------------------- .alert-checkbox[aria-checked=true] .alert-checkbox-icon { border-color: $alert-ios-checkbox-border-color-on; background-color: $alert-ios-checkbox-background-color-on; } // iOS Alert Checkbox Inner Checkmark: Checked // ----------------------------------------- .alert-checkbox[aria-checked=true] .alert-checkbox-inner { position: absolute; top: $alert-ios-checkbox-icon-top; left: $alert-ios-checkbox-icon-left; width: $alert-ios-checkbox-icon-width; height: $alert-ios-checkbox-icon-height; border-width: $alert-ios-checkbox-icon-border-width; border-top-width: 0; border-left-width: 0; border-style: $alert-ios-checkbox-icon-border-style; border-color: $alert-ios-checkbox-icon-border-color; transform: $alert-ios-checkbox-icon-transform; } // iOS Alert Button // -------------------------------------------------- .alert-button-group { flex-wrap: $alert-ios-button-group-flex-wrap; margin-right: -$alert-ios-button-border-width; } .alert-button { overflow: hidden; flex: $alert-ios-button-flex; margin: $alert-ios-button-margin; min-width: $alert-ios-button-min-width; height: $alert-ios-button-min-height; border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; border-radius: $alert-ios-button-border-radius; font-size: $alert-ios-button-font-size; color: $alert-ios-button-text-color; background-color: $alert-ios-button-background-color; &:last-child { border-right: 0; font-weight: $alert-ios-button-main-font-weight; } &.activated { background-color: $alert-ios-button-background-color-activated; } } &.hairlines { .alert-radio-group, .alert-checkbox-group { border-width: $hairlines-width; } .alert-input { border-width: $hairlines-width; } .alert-button { border-top-width: $hairlines-width; border-right-width: $hairlines-width; } }