alert updates

src/components/alert/alert.js

@@ -9,17 +9,19 @@ export let AlertConfig = new ComponentConfig('alert')
 })
 @Template({
   inline: `
-    <div class="pane-backdrop"></div>
+    <div class="overlay-backdrop"></div>
-    <div class="alert-container">
+    <div class="overlay-container">
-
+      <div class="alert-container">
-      <div class="alert-content">
+        <div class="alert-header">
-        Do you like cookies?
+          Do you like cookies?
+        </div>
+        <div class="alert-content">
+          Seriously, who does not like cookies.
+        </div>
+        <div class="alert-actions">
+          <button class="button">OK</button>
+        </div>
       </div>
-
-      <div class="alert-actions">
-        <button class="button">OK</button>
-      </div>
-
     </div>`
 })
 export class Alert {

src/components/alert/alert.scss

@@ -2,13 +2,13 @@
 // Alert
 // --------------------------------------------------
 
-$alert-width:                  40% !default;
+$alert-width:                       40% !default;
-$alert-min-width:              280px !default;
+$alert-min-width:                   270px !default;
-$alert-max-width:              460px !default;
+$alert-max-width:                   460px !default;
-$alert-content-min-height:     80px !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;
+  margin: $alert-content-margin;
-  min-height: $alert-content-min-height;
 }
 
 .alert-actions {

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;
+    margin: $alert-android-content-margin;
-    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;
+    margin: $alert-android-content-margin;
-    border-bottom-right-radius: $alert-android-border-radius;
-    padding: 12px 18px;
 
     .button {
       border: 0;

src/components/alert/extensions/ios.scss

@@ -2,9 +2,8 @@
 // Alert
 // --------------------------------------------------
 
-$alert-ios-width:                    270px !default;
+$alert-ios-min-height:               80px !default;
-$alert-ios-min-height:               100px !default;
+$alert-ios-content-margin:           15px !default;
-$alert-ios-padding:                  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;
+    border-radius: $alert-ios-border-radius;
-    background: transparent;
+    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);

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%;
+}

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
 // --------------------------------------------------
 

src/components/app/ionic.scss

@@ -18,7 +18,8 @@
   "mixins/colors",
   "util",
   "scaffolding",
-  "typography";
+  "typography",
+  "overlay";
 
 
 // Core Components