- Do you like cookies?
+
+
+
+
+
+ Seriously, who does not like cookies.
+
+
+
+
-
-
-
-
-
`
})
export class Alert {
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 706b49acf9..0e201198f2 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -2,13 +2,13 @@
// Alert
// --------------------------------------------------
-$alert-width: 40% !default;
-$alert-min-width: 280px !default;
-$alert-max-width: 460px !default;
-$alert-content-min-height: 80px !default;
+$alert-width: 40% !default;
+$alert-min-width: 270px !default;
+$alert-max-width: 460px !default;
+$alert-content-margin: 24px !default;
-.alert {
+.alert .overlay-container {
@include flex-display();
@include flex-justify-content(center);
@include flex-align-items(center);
@@ -26,9 +26,14 @@ $alert-content-min-height: 80px !default;
background: white;
}
+.alert-header {
+ margin: $alert-content-margin;
+ font-size: 2rem;
+ font-weight: 400;
+}
+
.alert-content {
- padding: 15px;
- min-height: $alert-content-min-height;
+ margin: $alert-content-margin;
}
.alert-actions {
diff --git a/src/components/alert/extensions/android.scss b/src/components/alert/extensions/android.scss
index 4b92598dd4..029d8233be 100644
--- a/src/components/alert/extensions/android.scss
+++ b/src/components/alert/extensions/android.scss
@@ -1,8 +1,8 @@
-// Alert
+// Android Alert
// --------------------------------------------------
-$alert-android-padding: 24px !default;
+$alert-android-content-margin: 24px !default;
$alert-android-background-color: #fff !default;
$alert-android-border-radius: 4px !default;
$alert-android-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
@@ -11,24 +11,27 @@ $alert-android-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !def
.alert-android {
.alert-container {
- background: transparent;
box-shadow: $alert-android-box-shadow;
+ border-radius: $alert-android-border-radius;
+ overflow: hidden;
+ }
+
+ .alert-header {
+ margin: $alert-android-content-margin;
+ font-size: 2rem;
+ font-weight: 400;
}
.alert-content {
position: relative;
- padding: $alert-android-padding;
- border-top-left-radius: $alert-android-border-radius;
- border-top-right-radius: $alert-android-border-radius;
+ margin: $alert-android-content-margin;
background: $alert-android-background-color;
}
.alert-actions {
min-height: 44px;
background: $alert-android-background-color;
- border-bottom-left-radius: $alert-android-border-radius;
- border-bottom-right-radius: $alert-android-border-radius;
- padding: 12px 18px;
+ margin: $alert-android-content-margin;
.button {
border: 0;
diff --git a/src/components/alert/extensions/ios.scss b/src/components/alert/extensions/ios.scss
index c0ea93e5b7..5c5b9100b9 100644
--- a/src/components/alert/extensions/ios.scss
+++ b/src/components/alert/extensions/ios.scss
@@ -2,9 +2,8 @@
// Alert
// --------------------------------------------------
-$alert-ios-width: 270px !default;
-$alert-ios-min-height: 100px !default;
-$alert-ios-padding: 15px !default;
+$alert-ios-min-height: 80px !default;
+$alert-ios-content-margin: 15px !default;
$alert-ios-background-color: #e8e8e8 !default;
$alert-ios-border-radius: 15px !default;
$alert-ios-button-color: #007aff !default;
@@ -14,17 +13,20 @@ $alert-ios-button-font-size: 2rem !default;
.alert-ios {
.alert-container {
- width: $alert-ios-width;
- background: transparent;
+ border-radius: $alert-ios-border-radius;
+ background: $alert-ios-background-color;
+ text-align: center;
+ }
+
+ .alert-header {
+ margin: $alert-ios-content-margin;
}
.alert-content {
position: relative;
- padding: $alert-ios-padding;
+ margin: $alert-ios-content-margin 0 0;
+ padding: 0 $alert-ios-content-margin $alert-ios-content-margin;
min-height: $alert-ios-min-height;
- border-top-left-radius: $alert-ios-border-radius;
- border-top-right-radius: $alert-ios-border-radius;
- background: $alert-ios-background-color;
&:after {
position: absolute;
@@ -47,9 +49,6 @@ $alert-ios-button-font-size: 2rem !default;
.alert-actions {
min-height: 44px;
- background: $alert-ios-background-color;
- border-bottom-left-radius: $alert-ios-border-radius;
- border-bottom-right-radius: $alert-ios-border-radius;
.button {
@include flex(1);
diff --git a/src/components/app/_overlay.scss b/src/components/app/_overlay.scss
new file mode 100644
index 0000000000..54b28ccd41
--- /dev/null
+++ b/src/components/app/_overlay.scss
@@ -0,0 +1,29 @@
+
+// Overlay
+// --------------------------------------------------
+
+$overlay-background: #000 !default;
+$overlay-opacity: 0.3 !default;
+
+
+.overlay-backdrop {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: $overlay-background;
+ opacity: $overlay-opacity;
+}
+
+.overlay-container {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/components/app/_util.scss b/src/components/app/_util.scss
index 7ebf80e1e9..b36965d8eb 100644
--- a/src/components/app/_util.scss
+++ b/src/components/app/_util.scss
@@ -8,20 +8,6 @@
}
-.pane-backdrop {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: black;
- opacity: 0.3;
-}
-
-
-
// Content Padding
// --------------------------------------------------
diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index 6efd224413..0531e9a8fe 100644
--- a/src/components/app/ionic.scss
+++ b/src/components/app/ionic.scss
@@ -18,7 +18,8 @@
"mixins/colors",
"util",
"scaffolding",
- "typography";
+ "typography",
+ "overlay";
// Core Components