From cb6533fd60ff26b9789ed7aa6419bb6aecfbabf1 Mon Sep 17 00:00:00 2001
From: Rene Ae <aehtyb@gmail.com>
Date: Thu, 19 Nov 2015 05:03:12 -0600
Subject: updated form css

---
 StoneIsland/www/css/account.css | 119 +++++++++++++++++++++++++++++++++++-----
 StoneIsland/www/css/index.css   |   1 +
 StoneIsland/www/css/nav.css     |   4 +-
 StoneIsland/www/index.html      |  49 +++++++++++++----
 4 files changed, 145 insertions(+), 28 deletions(-)

(limited to 'StoneIsland')

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 8d26ce1e..95e37c52 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -55,14 +55,14 @@ form {
 form h2 {
   text-align: center;
   margin: 0;
-  padding: 24px 10px 8px 10px;
+  padding: 20px 10px 8px 10px;
   font-size: 14px;
   color: #000;
   letter-spacing: 1px;
   font-weight: bold;
 }
 
-input {
+input[type=text], input[type=password], input[type=number], input[type=email]  {
   font-family:pfd, sans-serif;
   font-size:14px;
   outline:none!important;
@@ -122,9 +122,11 @@ input {
 }
 
 .toggle-container .toggle {
-  display:table-cell;
-  vertical-align:middle;
-  text-align:right
+    display: table-cell;
+    vertical-align: middle;
+    text-align: right;
+    position: relative;
+    right: 12px;
 }
 
 .toggle-container h3 {
@@ -138,13 +140,16 @@ input.switch {
 }
 
 input.switch + label {
-  display: inline-block;
-  position: relative;
-  box-shadow: inset 0 0 0px 1px rgba(0,0,0,.7);
-  text-indent: -5000px;
-  height: 30px;
-  width: 50px;
-  border-radius: 15px;
+    display: inline-block;
+    box-shadow: inset 0 0 0px 1px rgba(0,0,0,.7);
+    text-indent: -5000px;
+    height: 30px;
+    width: 50px;
+    border-radius: 15px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 input.switch + label:before {
@@ -190,14 +195,14 @@ input.switch:checked + label:after {
 
 .container {
   position:absolute; 
-  height:calc(100% - 88px);
+  height:calc(100% - 104px);
   width:100vw;
   box-sizing:border-box;
   display: flex;  
   flex-direction: column;
   margin:0;
   left:0;right:0;
-  top:48px;
+  top:64px;
 }
 
 .container-row {
@@ -224,6 +229,92 @@ flex: 1;
   transform: translateX(-50%) translateY(-50%);
 }
 
+.premessage {
+  top:calc(50% - 20px)!important;
+}
+
+.submessage {
+  top:75%!important;
+}
+
 .alert-notice {
   color:red!important
 }
+
+.checkbox-container {
+  font-size:11px;
+  width:calc(100vw - 10px);
+  display:table;
+  box-sizing:border-box;
+  margin:5px auto 0;
+}
+
+.checkbox-toggle {
+  display:table-cell;
+  box-sizing:border-box;
+  padding-right:15px;
+  position:relative;
+}
+
+.checkbox-toggle input {
+  width:25px; height:35px;
+  opacity:0;
+}
+
+.checkbox-caption {
+  vertical-align:middle;
+  display:table-cell;
+  box-sizing:border-box;
+}
+
+.checkbox-row {
+  margin:12px 0;
+  box-sizing:border-box;
+}
+
+
+.checkbox-toggle label {
+  position:absolute;
+  top:50%;
+  transform:translateY(-50%);
+	cursor: pointer;
+	width: 36px;
+	height: 36px;
+  left: 0;
+	background: #fff;
+	border:1px solid #000;
+  box-sizing:border-box;
+}
+
+.checkbox-toggle label:after {
+	opacity: 0;
+	content: "";
+  top:50%;
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%) translateY(-50%) rotate(45deg);
+  width:2px;
+  height:36px;
+  background:black;
+  transition: opacity .2s;
+}
+
+.checkbox-toggle label:before {
+	opacity: 0;
+	content: "";
+  top:50%;
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%) translateY(-50%) rotate(-45deg);
+  width:2px;
+  height:36px;
+  background:black;
+  transition: opacity .2s;
+}
+
+.checkbox-toggle input[type=checkbox]:checked + label:after, .checkbox-toggle input[type=checkbox]:checked + label:before {
+	opacity: 1;
+}
+
+
+
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 9de286c1..d9d988bf 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -28,6 +28,7 @@ body {
   margin-left: -40px;
   display: none;
 }
+
 .loader:before {
   content: '';
   border-radius: 50%;
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 4c184d42..d12ecdc8 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -19,8 +19,8 @@
 }
 .ios #nav,
 .ios #content {
-  top: 8px;
-  height: -webkit-calc(100% - 10px);
+  top: 20px;
+  height: -webkit-calc(100% - 20px);
 }
 .nav #nav {
   -webkit-transform: translateZ(0) translateX(0);
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index ec40ff95..acc2d62b 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -199,12 +199,20 @@
   <div id="login">
     <h1>LOGIN</h1>
     <form>
-      <input type="email" name="Email" placeholder="EMAIL ADDRESS" required>
-      <input type="password" name="Password" placeholder="PASSWORD" required>
-      
-      <span class="newuser">New User?</span>
-      
-      <span class="msg"></span>
+      <div class="container">
+        <div class="container-row">
+          <input style="margin-bottom:10px" type="email" name="Email" placeholder="EMAIL ADDRESS" required>
+          <input type="password" name="Password" placeholder="PASSWORD" required>
+        </div>
+        <div class="container-fill">
+          <div class="container-message premessage">               
+            <span class="newuser">New User?</span>
+          </div>
+          <div class="container-message submessage">
+            <span class="msg"></span>
+          </div>
+        </div>
+      </div>
     </form>
   </div>
 
@@ -214,15 +222,32 @@
       <input type="text" name="Name" placeholder="FIRST NAME" required>
       <input type="text" name="Surname" placeholder="LAST NAME" required>
       <input type="email" name="Email" placeholder="EMAIL ADDRESS" required>
-      <select name="Gender">
-        <option value="M">Male</option>
-        <option value="F">Female</option>
-      </select>
+      <input type="email" name="ConfirmEmail" placeholder="CONFIRM EMAIL ADDRESS" required>
+      <input type="email" name="Birthday" placeholder="BIRTHDAY (MM/DD/YYYY)" required>
       <h2>PASSWORD</h2>
       <input type="password" name="Password" placeholder="PASSWORD (7 CHARACTERS OR MORE)" required>
       <input type="password" name="Password2" placeholder="CONFIRM PASSWORD" required>
-      <input type="checkbox" name="DataProfiling" value="true" required> I agree to share my personal information with Stone Island.
-      <span class="msg"></span>
+      
+      <div class="checkbox-container">
+        <div class="checkbox-row">
+          <div class="checkbox-toggle">
+             <input id="checkbox-data-profiling" type="checkbox" name="DataProfiling" value="true" required>
+             <label for="checkbox-data-profiling"></label>
+          </div>
+          <div class="checkbox-caption">
+            I agree that YOOX and SPORTSWEAR COMPANY may collect my personal information for marketing purposes (newsletters, news and promotions).
+          </div>
+        </div>
+        <div class="checkbox-row">
+          <div class="checkbox-toggle">
+             <input type="checkbox" id="checkbox-shopping-data-profiling" name="ShoppingDataProfiling" value="true" required>
+             <label for="checkbox-shopping-data-profiling"></label>
+          </div>
+          <div class="checkbox-caption">
+            I agree that YOOX NET-A-PORTER GROUP and SPORTSWEAR COMPANY may collect my personal information for creating a profile of my shopping habits.
+          </div>
+        </div>
+      </div>
     </form>
   </div>
     
-- 
cgit v1.2.3-70-g09d2