From b5dae74f90d243777813c574bb5483cbbeba467b Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 4 Apr 2015 23:09:23 -0500
Subject: [PATCH] alert

---
 src/components/alert/alert.js                |  2 +-
 src/components/alert/alert.scss              | 35 ++++++++++++------
 src/components/alert/extensions/android.scss | 38 ++++++++++++++++++++
 src/components/alert/extensions/ios.scss     |  5 +--
 src/components/app/_util.scss                |  4 +++
 src/components/app/ionic.scss                |  1 +
 6 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 src/components/alert/extensions/android.scss

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index daa1cc1c72..a8c8103ca2 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -16,7 +16,7 @@ export let AlertConfig = new ComponentConfig('alert')
         Do you like cookies?
       </div>
 
-      <div class="alert-buttons">
+      <div class="alert-actions">
         <button class="button">OK</button>
       </div>
 
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 772f1b180b..706b49acf9 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -2,23 +2,36 @@
 // Alert
 // --------------------------------------------------
 
+$alert-width:                  40% !default;
+$alert-min-width:              280px !default;
+$alert-max-width:              460px !default;
+$alert-content-min-height:     80px !default;
+
+
+.alert {
+  @include flex-display();
+  @include flex-justify-content(center);
+  @include flex-align-items(center);
+}
 
 .alert-container {
-  position: absolute;
   z-index: $z-index-alert;
   display: block;
 
-  top: 35%;
-  left: 50%;
+  width: $alert-width;
+  min-width: $alert-min-width;
+  max-width: $alert-max-width;
+  margin-bottom: 60px;
+
+  background: white;
 }
 
-.alert-buttons {
+.alert-content {
+  padding: 15px;
+  min-height: $alert-content-min-height;
+}
+
+.alert-actions {
   @include flex-display();
-  @include flex-justify-content(center);
-  overflow: hidden;
-
-  .button {
-    @include flex-display();
-    @include flex(1);
-  }
+  @include flex-justify-content(flex-end);
 }
diff --git a/src/components/alert/extensions/android.scss b/src/components/alert/extensions/android.scss
new file mode 100644
index 0000000000..4b92598dd4
--- /dev/null
+++ b/src/components/alert/extensions/android.scss
@@ -0,0 +1,38 @@
+
+// Alert
+// --------------------------------------------------
+
+$alert-android-padding:                  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;
+
+
+.alert-android {
+
+  .alert-container {
+    background: transparent;
+    box-shadow: $alert-android-box-shadow;
+  }
+
+  .alert-content {
+    position: relative;
+    padding: $alert-android-padding;
+    border-top-left-radius: $alert-android-border-radius;
+    border-top-right-radius: $alert-android-border-radius;
+    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;
+
+    .button {
+      border: 0;
+    }
+  }
+
+}
diff --git a/src/components/alert/extensions/ios.scss b/src/components/alert/extensions/ios.scss
index 0a1aa1290a..c0ea93e5b7 100644
--- a/src/components/alert/extensions/ios.scss
+++ b/src/components/alert/extensions/ios.scss
@@ -15,7 +15,7 @@ $alert-ios-button-font-size:         2rem !default;
 
   .alert-container {
     width: $alert-ios-width;
-    margin-left: -$alert-ios-width / 2;
+    background: transparent;
   }
 
   .alert-content {
@@ -45,13 +45,14 @@ $alert-ios-button-font-size:         2rem !default;
     }
   }
 
-  .alert-buttons {
+  .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);
       border: 0;
       background: transparent;
       font-size: $alert-ios-button-font-size;
diff --git a/src/components/app/_util.scss b/src/components/app/_util.scss
index d5e67a82a3..7ebf80e1e9 100644
--- a/src/components/app/_util.scss
+++ b/src/components/app/_util.scss
@@ -10,6 +10,10 @@
 
 .pane-backdrop {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   background: black;
diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index 0a7ae75a6c..6efd224413 100644
--- a/src/components/app/ionic.scss
+++ b/src/components/app/ionic.scss
@@ -60,6 +60,7 @@
 
 // Material Design Components
 @import
+  "../alert/extensions/android",
   "../button/extensions/android",
   "../list/extensions/android",
   "../item/extensions/android",