From: Ben Schwarz <ben@germanforblack.com>
Date: Sun, 23 Dec 2012 22:53:34 +0000 (+1100)
Subject: Added styles for modal
X-Git-Url: http://git.roojs.org/?p=ratchet;a=commitdiff_plain;h=e855cc5f759a9b1a793b34255d49c1a94e0579fe

Added styles for modal

Ported over from my demo app, tried to match coding style
---

diff --git a/lib/css/modals.css b/lib/css/modals.css
new file mode 100644
index 0000000..f188c7e
--- /dev/null
+++ b/lib/css/modals.css
@@ -0,0 +1,37 @@
+/* Modals
+-------------------------------------------------- */
+.modal {
+  position: fixed; top: 0;
+  background-color: #fff;
+  width: 100%;
+
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+
+  -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
+          transition:         transform .25s ease-in-out, opacity 1ms .25s;
+
+  opacity: 0;
+  overflow: hidden;
+
+  /*  
+      Normally, we'd use '1', … ratchet uses '10'
+      for the title bar, so deal with that.
+  */
+  z-index: 11; 
+
+  min-height: 100%;
+}
+
+/* Modal - When active
+-------------------------------------------------- */
+.modal.active {
+  -webkit-transition: -webkit-transform .25s ease-in-out;
+      transition:     transform: .25 ease-in-out;
+
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+
+  opacity: 1;
+  height: 100%;
+}
\ No newline at end of file