initial styles and layout for create budget modal

miniatureape · Jan 19, 2015 · 9491f38 · 9491f38
1 parent 77a53fc
commit 9491f38
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 
         <script id="app-layout" type="text/html">
             <div data-module-region class="module-region"></div>
-            <div data-modal-region class="modal-region">Here I am</div>
+            <div data-modal-region class="modal-region padding-2">Here I am</div>
         </script>
 
         <script id="expenses-table" type="text/html">
@@ -138,10 +138,26 @@ <h1 class="padding-2 center">
         </script>
 
         <script id="create-budget" type="text/html">
-            <input data-budget-name></input>
-            <input data-allowance-name></input>
-            <div data-cancel>Cancel</div>
-            <div data-accept>Accept</div>
+            <h1>Create a budget</h1>
+            <input 
+                data-budget-name
+                placeholder="Spending Money"
+                class="margin-v-1 input-wide input-bordered rounded"
+                ></input>
+            <input 
+                data-budget-allowance
+                type="number"
+                placeholder="1"
+                class="margin-v-1 input-wide input-bordered rounded"
+                ></input>
+            <button 
+                data-cancel
+                class="padding-2 rounded cancel"
+                >Cancel</button>
+            <button 
+                class="padding-2 rounded primary"
+                data-accept
+                >Accept</button>
         </script>
 
         <script src="main.TIMESTAMP.js"></script>

diff --git a/main.css b/main.css
@@ -6,6 +6,8 @@
 
 body, html {
     font-family: 'Helvetica', sans-serif;
+    width: 100%;
+    height: 100%;
 }
 
 .padding-1 {
@@ -65,6 +67,13 @@ button:focus {
 .primary {
     background: #2980b9;
     color: #ffffff;
+    border: none;
+}
+
+.cancel {
+    background: #95a5a6;
+    color: #ffffff;
+    border: none;
 }
 
 .primary-outline {
@@ -94,6 +103,8 @@ button:focus {
 .wrapper {
     margin: 0 auto;
     max-width: 600px;
+    height: 100%;
+    background: #2c3e50;
 }
 
 .table {
@@ -123,6 +134,7 @@ button:focus {
 input {
     outline: none;
     border: none;
+    padding: 10px;
 }
 
 .input-bordered {
@@ -201,12 +213,16 @@ input[type="number"] {
     top: 0;
     left: 100%;
     width: 100%;
+    height: 100%;
     -webkit-transform: translate3d(0, 0, 0);
-    -webkit-transition: left .2s;
+    -webkit-transition: left .3s;
+    background: #eee;
 }
 
 .module-region {
     -webkit-transition: transform .2s;
+    height: 100%;
+    background: #fff;
 }
 
 .modal-active .module-region {