many changes to forms. starting to add labels

6 files changed, 109 insertions, 63 deletions

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 32c7df79..c8c03aec 100755
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -67,7 +67,7 @@
   content:'';
   width:calc(100% + 100px);
   height:1px;
-  background:#bbb;
+  background:#666;
   position:absolute;
   bottom:0;
   left:-50px;
@@ -128,6 +128,17 @@
   font-weight: bold;
 }
 
+label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 16px;
+  color: #000;
+  letter-spacing:1px;
+  text-transform:uppercase;
+  height: 48px;
+}
 input[type=text], input[type=password], input[type=number], input[type=date], input[type=email]  {
   font-family:pfd, sans-serif;
   font-size:14px;
@@ -135,13 +146,13 @@ input[type=text], input[type=password], input[type=number], input[type=date], in
   color:#000;
   letter-spacing:1px;
   text-transform:uppercase;
-  height:35px;
+  height: 48px;
   text-align:center;
   margin: 0px auto;
   display:block;
-  margin-top:4px;
+  margin-top: 0px;
   width: calc(100vw - 10px);
-  border:1px solid #a9a9a9;
+  border:1px solid #696969;
   padding: 0;
   border-radius: 0;
 }
@@ -164,12 +175,12 @@ input[type=text], input[type=password], input[type=number], input[type=email] {
   border:none;
   box-sizing: border-box;
   float: left;
-  border: 1px solid #a9a9a9;
+  border: 1px solid #696969;
   width: 50%;
 }
 
 .half-input > input:first-child {
-  border-right: 1px solid #a9a9a9;
+  border-right: 1px solid #696969;
 }
 
 #signup .toggle-container, #profile .toggle-container {
@@ -351,7 +362,7 @@ input.switch:checked + label:after {
 }
 
 .checkbox-container {
-  font-size:11px;
+  font-size:14px;
   width:calc(100vw - 10px);
   display:table;
   box-sizing:border-box;
@@ -463,13 +474,13 @@ input.switch:checked + label:after {
   color: #000;
   letter-spacing: 1px;
   text-transform: uppercase;
-  height: 35px;
+  height: 48px;
   text-align: center;
   margin: 0px auto;
   display: block;
   margin-top: 4px;
   width: calc(100vw - 10px);
-  border: 1px solid #a9a9a9;
+  border: 1px solid #696969;
 }
 .date-wrapper span {
   display: block;
@@ -480,7 +491,7 @@ input.switch:checked + label:after {
   margin-top: 0px;
   float: left;
   box-sizing: border-box;
-  border: 1px solid #a9a9a9;
+  border: 1px solid #696969;
   border-left: 0px;
 }
 
@@ -491,18 +502,17 @@ input.switch:checked + label:after {
 .select-wrapper [type=date] {
   opacity: 0;
   width: 100%;
-  height: 35px;
-  line-height: 35px;
+  height: 48px;
+  line-height: 48px;
   position: absolute;
   top: -5px;
   left: -1px;
-  width: 1px; height: 1px;
 }
 .select-wrapper select {
   opacity: 0;
   width: 100%;
-  height: 35px;
-  line-height: 35px;
+  height: 48px;
+  line-height: 48px;
   position: absolute;
   top: 0; left: 0;
   box-sizing: border-box;
@@ -512,8 +522,8 @@ input.switch:checked + label:after {
 }
 .select-wrapper span {
   position: relative;
-  top: 8px;
-  color: #888;
+  top: 15px;
+  color: #666;
 }
 .select-wrapper.picked span {
   color: #000;
@@ -521,33 +531,25 @@ input.switch:checked + label:after {
 
 .country-wrapper-static {
   text-align: center;
-  color: #a9a9a9;
+  color: #696969;
   border: 1px solid;
   padding-top: 9px;
   font-size: 14px;
-  height: 35px;
+  height: 48px;
   box-sizing: border-box;
 }
 
-.container-row input:first-child {
-margin-top:10px
-}
-
 .container-row .half-input input {
 margin-top:0px
 }
 
-#login .container-row input:first-child {
-margin-bottom:9px!important
-}
-
 .newuser {
   display:inline-block;
-  padding:14px;
+  padding:18px;
   text-decoration:underline
 }
 
 .forgotpassword {
-  padding:14px;
+  padding:18px;
   text-decoration:underline
 }
\ No newline at end of file
diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index bf5ab68f..241cbecb 100755
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -6,11 +6,18 @@
   margin: 15px 0 0;
   text-align: center;
   text-transform:uppercase;
+  display:flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
 #story .links li {
-  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  padding: 0 15px;
   list-style-type: none;
-  display: inline-block;
 }
 #story .links li:before {
   content: ' | ',
diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css
index 7619a82b..8c31cf74 100755
--- a/StoneIsland/www/css/cart.css
+++ b/StoneIsland/www/css/cart.css
@@ -6,20 +6,24 @@
 
 #cart .steps {
   width: 100%;
-  border-bottom: 1px solid #bbb;
+  border-bottom: 1px solid #666;
   font-size: 0;
+  display: flex;
+  flex-direction: row;
 }
 #cart .steps span {
-  display: inline-block;
+  display: flex;
   font-size: 13px;
   text-align: center;
-  padding: 11px 0 10px;
-  color: #bbb;
+  color: #666;
   width: 33%;
   position:relative;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
 }
 .summary_step, .shipping_step {
-  border-right: 1px solid #bbb
+  border-right: 1px solid #666;
 }
 
 #cart.summary .summary_step,
@@ -155,7 +159,7 @@ padding-left:5px;
 display:block;
 width:20px;
 height:20px;
-border:1px solid #d2d2d2;
+border:1px solid #b2b2b2;
 float:right;
 margin-bottom:10px;
 position:relative;
@@ -165,7 +169,7 @@ position:relative;
 content:'';
 width:1px;
 height:22px;
-background:#bbb;
+background:#333;
 position:absolute;
 top:50%;
 left:50%;
@@ -178,7 +182,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%)
   content:'';
   width:1px;
   height:22px;
-  background:#bbb;
+  background:#333;
   position:absolute;
   top:50%;
   left:50%;
@@ -241,7 +245,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%)
   width:calc(100vw - 30px);
   margin:0 auto;
   display:table;
-  color:#bbb;
+  color:#666;
   font-size:11px;
 }
 
@@ -274,7 +278,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%)
 
 #orders .order_section {
   padding-bottom: 16px;
-  border-bottom: 1px solid #bbb;
+  border-bottom: 1px solid #666;
 }
 
 
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 4d8e5514..9e665a4d 100755
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -60,3 +60,15 @@ body {
   color: red !important;
   border-color: red !important;
 }
+.error_hilite ~ span.err {
+  display: flex;
+}
+span.err {
+  display: none;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  height: 48px;
+  color: red !important;
+}
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 885ee500..9a4f63d8 100755
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -79,7 +79,7 @@
   display: block;
   font-size: 14px;
   letter-spacing:1.25px;
-  color: #bbb;
+  color: #666;
   padding: 4px 0 12px 20px
 }
 
@@ -94,7 +94,7 @@
   float: left;
   width: 61px;
   border-left: 1px solid #ddd;
-  color: #bbb;
+  color: #666;
   font-size: 18px;
   padding: 5px 0;
   text-align: center;
@@ -137,10 +137,13 @@ padding-bottom:0px;
 }
 #intro div {
   position: absolute;
-  top: 50%; left: 50%;
+  top: 50%;
+  left: 50%;
   width: 200px;
-  padding: 50px;
-  text-align: center;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 17px;
 }
 #intro #compass {
@@ -219,30 +222,30 @@ padding-bottom:0px;
 }
 
 #header .cart_rapper {
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
   position: relative;
   float: right;
-  width: 48px; height: 48px;
+  width: 44px; height: 48px;
 }
 #header .cart {
   position: relative;
-  float: right;
   width: 18px;
-  top: 5px;
+  margin-bottom: 10px;
   height: 18px;
-  margin-right: 0px;
   background: #fff;
   background-image:url(../img/cart-box.png);
   background-size:100%;
   background-repeat:no-repeat;
 }
 
-.cart .cart_count {
+#header .cart .cart_count {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
-  color: #bbb;
+  color: #666;
   font-size:12.35px;
 }
 
@@ -273,12 +276,16 @@ padding-bottom:0px;
 }
 #footer div {
   width: 50%;
+  height: 48px;
   text-align: center;
-  padding: 12px 0;
   color: #000;
   float: left;
   font-size:14px;
   font-weight:bold;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 #footer .ok {
   color: #000;
@@ -287,7 +294,7 @@ padding-bottom:0px;
   width: 100%;
 }
 #footer .ok.disabled {
-  color: #bbb;
+  color: #666;
 }
 
 
@@ -400,7 +407,7 @@ padding-bottom:0px;
 #selector:not(.selector-outer-wrap) .options div {
   background: white;
   text-align: center;
-  padding: 7px 12px;
+  padding: 12px 12px;
   box-sizing:border-box;
   font-size: 14px;
   border-left:1px solid black;
@@ -481,9 +488,12 @@ padding-bottom:0px;
 h1 {
   text-align: center;
   margin: 0;
-  padding: 16px 10px 12px 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-bottom: 1px solid #000;
-  font-size: 14px;
+  height: 48px;
+  font-size: 16px;
   color: #000;
   letter-spacing: 1px;
   font-weight: bold;
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 1a7d5ba2..002c086b 100755
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -143,7 +143,11 @@
 
 .product .share {
   float:right;
-  padding: 12px 12px;
+  padding: 0 12px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border:1px solid black;
 }
 
@@ -152,13 +156,20 @@
   font-size:14px;
 }
 
-.product span {
+.product .size-color {
+  display: flex;
+  flex-direction: row;
+}
+.product .size-color span {
   position:relative;
   box-sizing:border-box;
-  display: inline-block;
-  padding: 12px;
+  padding: 0 12px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.product span.size {
+.product .size-color span.size {
   border-right: 1px solid #444;
 }