Files
Brandy Carney 78224f35ea fix(popup): Fixed iOS styling
References #183
2015-10-02 14:40:18 -04:00

118 lines
2.4 KiB
SCSS

// iOS Popups
// --------------------------------------------------
$popup-ios-max-width: 270px !default;
$popup-ios-background: rgba(0,0,0,0) !default;
$popup-ios-border-radius: 13px !default;
$popup-ios-background-color: #f8f8f8 !default;
$popup-ios-head-text-align: center !default;
$popup-ios-title-font-size: 17px !default;
$popup-ios-sub-title-font-size: 14px !default;
$popup-ios-sub-title-text-color: #666 !default;
$popup-ios-body-text-color: inherit !default;
$popup-ios-body-text-align: center !default;
$popup-ios-body-font-size: 13px !default;
$popup-ios-button-text-color: color(primary) !default;
$popup-ios-button-min-height: 44px !default;
$popup-ios-button-font-size: 17px !default;
ion-popup {
background: $popup-ios-background;
popup-wrapper {
border-radius: $popup-ios-border-radius;
background-color: $popup-ios-background-color;
max-width: $popup-ios-max-width;
overflow: hidden;
}
}
.popup-head {
padding: 12px 16px 20px;
text-align: $popup-ios-head-text-align;
}
.popup-title {
margin-top: 12px;
font-weight: bold;
font-size: $popup-ios-title-font-size;
}
.popup-sub-title {
font-size: $popup-ios-sub-title-font-size;
color: $popup-ios-sub-title-text-color;
}
.popup-body {
padding: 0px 16px 24px;
color: $popup-ios-body-text-color;
text-align: $popup-ios-body-text-align;
font-size: $popup-ios-body-font-size;
}
.prompt-input {
background-color: #fff;
padding: 6px;
margin-top: 24px;
border-radius: 4px;
border: 1px solid #ccc;
-webkit-appearance: none;
}
.popup-buttons {
button {
@extend button[clear];
margin: 0;
flex: 1;
border-radius: 0;
font-size: $popup-ios-button-font-size;
min-height: $popup-ios-button-min-height;
border-right: 1px solid #c8c7cc;
&.activated {
opacity: 1;
background-color: #DEDEDE;
}
&:hover:not(.disable-hover) {
opacity: 1;
}
&:before {
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px solid #c8c7cc;
content: '';
pointer-events: none;
}
&:last-child {
font-weight: bold;
border-right: 0;
}
}
}
&.hairlines {
.prompt-input {
border-width: 0.55px;
}
.popup-buttons {
button {
border-right-width: 0.55px;
&:before {
border-top-width: 0.55px;
}
}
}
}