skeleton for cart

3 files changed, 109 insertions, 21 deletions

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 765f575a..1f0f2598 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -54,9 +54,7 @@
   display: none;
 }
 
-form {
-  margin-top:20px;
-}
+
 
 form h2 {
   text-align: center;
diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css
index 78637f5f..54c66553 100644
--- a/StoneIsland/www/css/cart.css
+++ b/StoneIsland/www/css/cart.css
@@ -17,9 +17,9 @@
 }
 #cart .steps span {
   display: inline-block;
-  font-size: 14px;
+  font-size: 13px;
   text-align: center;
-  padding: 15px 0 14px;
+  padding: 11px 0 10px;
   color: #bbb;
   width: 33%;
   position:relative;
@@ -85,25 +85,113 @@ border-right: 1px solid #bbb
 }
 
 .billing-container {
-  height:calc(100vh - 210px);
+  min-height:calc(100vh - 210px);
   top:16px;
 }
 
 .cart_item_row {
 display:table;
 position:relative;
-width:calc(100vw - 10px);
+width:calc(100vw - 30px);
 margin:0 auto;
+border:1px solid red;
+box-sizing:border-box;
+padding-top:20px;
 }
 
-.cart_item_image, .cart_item_info, .cart_item_price {
-display:table-cell
+.cart_item_info, .cart_item_price {
+display:table-cell;
+vertical-align:bottom;
+border:1px solid blue;
+box-sizing:border-box
+}
+
+.cart_item_image {
+display:table-cell;
+vertical-align:middle;
+border:1px solid blue;
+box-sizing:border-box
 }
 
 .cart_item_image img {
-max-width:100px
+max-width:calc(33vw - 25px);
 }
 
 .cart_item_info {
-padding-left:50px
+padding-left:30px;
+padding-bottom:5px;
+position:relative;
+width:100%
+}
+
+.cart_item_price {
+text-align:right;
+position:relative;
+padding-bottom:5px;
+padding-left:5px;
+}
+
+.cart_item_price .price {
+font-size:11px;
+font-weight:bold;
+display:block
+}
+
+.cart_item_info .sku {
+font-size:10px;
+font-weight:bold;
+display:block
+}
+
+.cart_item_info .title {
+font-size:10px;
+font-weight:bold;
+display:block;
+line-height:12px;
+text-transform:uppercase;
+}
+
+.cart_item_info .type {
+font-size:10px;
+font-weight:bold;
+display:block;
+text-transform:capitalize;
+}
+
+.cart_item_info .meta {
+padding-top:5px;
+letter-spacing:.75px;
+font-size:8px;
+}
+
+.cart-summary {
+border:1px solid green;
+width:calc(100vw - 30px);
+margin:0 auto;
+display:table;
+color:#bbb;
+font-size:11px;
+}
+
+.cart-summary-row {
+display:table-row;
+}
+
+.cart-summary span {
+display:table-cell;
+padding-top:20px;
+border:1px solid purple;
+vertical-align:bottom;
+}
+
+.cart-summary-row span:not(.label) {
+text-align:right
+}
+
+.cart-summary-row .label {
+font-weight:bold
+}
+
+.cart-summary-row:last-child {
+color:#000;
 }
\ No newline at end of file
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 3db92d33..77f293f4 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -555,14 +555,14 @@
                 <img src="{{image}}">
                 </div>
                 <div class="cart_item_info">
-                <b>{{sku}}</b><br>
+                <span class="sku">{{sku}}</span>
                 <span class="title">{{title}}</span>
                 <span class="type">{{type}}</span>
-                <span class="meta">
-                  <b>SIZE:</b> {{size}}<br>
-                  <b>COLOR:</b> {{color}}<br>
-                  <b>QUANTITY:</b> {{quantity}}<br>
-                </span>
+                <div class="meta">
+                  <div class="meta-size"><b>SIZE:</b> {{size}}</div>
+                  <div class="meta-color"><b>COLOR:</b> {{color}}</div>
+                  <div class="meta-quantity"><b>QUANTITY:</b> {{quantity}}</div>
+                </div>
                 </div>
                 <div class="cart_item_price">
                 <span class="remove">x Remove from cart</span>
@@ -570,24 +570,26 @@
                 </div>
             </script>
           </div>
-          <div>
+          <div class="cart-summary">
+          <div class="cart-summary-row">
             <span class="label">SUB TOTAL</span>
             <span class="subtotal"></span>
           </div>
-          <div>
+          <div class="cart-summary-row">
             <span class="label">ESTIMATED SHIPPING<br>& HANDLING</span>
             <span class="shipping"></span>
           </div>
-          <div>
+          <div class="cart-summary-row">
             <span class="label">TAX</span>
             <span class="tax"></span>
           </div>
-          <div>
+          <div class="cart-summary-row">
             <span class="label">TOTAL</span>
             <span class="total"></span>
           </div>
         </div>
         </div>
+        </div>
         <div class="container-fill">
           <div class="container-message cart_empty">
             You have nothing in your cart.