alert

src/components/alert/alert.scss

@@ -0,0 +1,37 @@
+
+// Alert
+// --------------------------------------------------
+
+$alert-width:                    270px !default;
+$alert-min-height:               100px !default;
+$alert-padding:                  15px !default;
+$alert-background-color:         #fff !default;
+
+
+.pane > .pane-container.alert-container {
+  position: absolute;
+  z-index: $z-index-alert;
+  display: block;
+
+  top: 40%;
+  left: 50%;
+  width: $alert-width;
+  margin-left: -$alert-width / 2;
+
+  background: $alert-background-color;
+}
+
+.alert-content {
+  margin: 0;
+  padding: $alert-padding;
+  min-height: $alert-min-height;
+}
+
+.alert-action {
+  @include flex-display();
+
+  .button {
+    @include flex-display();
+    @include flex(1);
+  }
+}

src/components/alert/test/basic/main.html

@@ -1,21 +1,19 @@
 
-  <div class="pane alert">
+<div class="pane alert">
 
-    <div class="pane-backdrop"></div>
+  <div class="pane-backdrop"></div>
 
-    <div class="container">
+  <div class="pane-container alert-container">
 
-      <div class="content">
+    <div class="content alert-content">
-        <div class="scroll-content">
+      <div>Do you like cookies?</div>
-
+    </div>
-          <p>Do you like cookies?</p>
-
-          <button class="button">Cancel</button>
-          <button class="button">Ok</button>
-
-        </div>
-      </div>
 
+    <div class="alert-action">
+      <button class="button">Cancel</button>
+      <button class="button">Ok</button>
     </div>
 
   </div>
+
+</div>

src/components/alert/test/basic/main.js

@@ -0,0 +1,17 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+import {View} from 'ionic2/components/view/view';
+import {Content} from 'ionic2/components/content/content';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View, Content]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)

src/components/app/_z-index.scss

@@ -3,5 +3,6 @@
 // --------------------------------------------------
 
 
+$z-index-alert:             100;
 $z-index-content:           1;
 $z-index-list-border:       50;

src/components/app/ionic.scss

@@ -22,6 +22,7 @@
 
 // Default Components
 @import
+  "../alert/alert",
   "../aside/aside",
   "../button/button",
   "../checkbox/checkbox",