fix: reset correct styles in signup

FromDoppler · Mar 21, 2019 · 8855f0d · 8855f0d
1 parent c53ae81
commit 8855f0d
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 86 deletions.
diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss
@@ -85,8 +85,116 @@ textarea {
     position: relative;
     display: inline-block;
     text-align: left;
+    float: left;
     width: 100%;
-    margin-bottom: $dp-spaces--lv5;
+    /* Field to 50% percent */
+    &__checkbox {
+      cursor: pointer;
+      display: flex;
+      position: relative;
+
+      label {
+        margin-top: 12px;
+        margin-left: -30px;
+        font-weight: normal;
+      }
+
+      input[type='checkbox'] {
+        height: 40px;
+        opacity: 0;
+        z-index: 0;
+        cursor: pointer;
+        margin-left: -20px;
+        flex: 0 1 80px;
+
+        &:checked {
+          & ~ .checkmark {
+            border-color: $dp-color-green;
+            background-color: $dp-color-green;
+
+            &:after {
+              display: block;
+            }
+          }
+        }
+      }
+
+      .checkmark {
+        position: absolute;
+        left: 0;
+        height: 16px;
+        width: 16px;
+        border: 1px solid $dp-color-grey;
+        border-radius: $dp-border-radius;
+        background-color: $dp-color-white;
+        pointer-events: none;
+        bottom: 32%;
+
+        &:after {
+          content: '';
+          position: absolute;
+          left: 5px;
+          top: 1px;
+          width: 5px;
+          height: 10px;
+          border: solid $dp-color-white;
+          border-width: 0 3px 3px 0;
+          transform: rotate(45deg);
+        }
+      }
+    }
+
+    &--50 {
+      width: 50%;
+      /* Left Column */
+      &:nth-of-type(2n+1) {
+        padding-right: 20px;
+      }
+    }
+  }
+}
+
+input:not([type='checkbox']) {
+  padding: 10px 12px;
+  height: 40px;
+  width: 100%;
+  border: 1px solid $dp-color-lightgrey;
+  border-radius: $dp-border-radius;
+  background-color: $dp-color-white;
+  font-size: $dp-font-size-form;
+  font-family: $dp-font-family-proximanova;
+  line-height: 20px;
+
+  &::placeholder {
+    color: $dp-color-default;
+    font-style: italic;
+  }
+
+  &:required {
+    box-shadow: none;
+  }
+
+  &:focus {
+    color: $dp-color-default;
+    border: 1px solid $dp-color-yellow;
+    border-radius: $dp-border-radius;
+    -webkit-box-shadow: 0 0 0 2px $dp-color-brown-brightness;
+    box-shadow: 0 0 0 2px $dp-color-brown-brightness;
+    outline: none;
+
+    &::placeholder {
+      font-style: normal;
+    }
+  }
+}
+
+input[type="tel"] {
+  -moz-appearance: textfield;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
   }
 }
 
@@ -153,76 +261,4 @@ textarea {
     animation-duration: 0.75s;
     animation-name: bounceIn;
   }
-}
-
-input[type='checkbox'] {
-  flex: 0 1 80px;
-  margin-left: -20px;
-  height: 40px;
-  cursor: pointer;
-  z-index: 0;
-  opacity: 0;
-
-  &:checked {
-    & ~ .checkmark {
-      border-color: $dp-color-green;
-      background-color: $dp-color-green;
-
-      &:after {
-        display: block;
-      }
-    }
-  }
-}
-
-input:not(.button):not([type='checkbox']) {
-  padding: 10px 12px;
-  height: 40px;
-  width: 100%;
-  border: 1px solid $dp-color-lightgrey;
-  border-radius: $dp-border-radius;
-  background-color: $dp-color-white;
-  font-size: $dp-font-size-form;
-  font-family: $dp-font-family-proximanova;
-  line-height: 20px;
-
-  &::placeholder {
-    color: $dp-color-default;
-    font-style: italic;
-  }
-
-  &:required {
-    box-shadow: none;
-  }
-
-  &:focus {
-    color: $dp-color-default;
-    border: 1px solid $dp-color-yellow;
-    border-radius: $dp-border-radius;
-    -webkit-box-shadow: 0 0 0 2px $dp-color-brown-brightness;
-    box-shadow: 0 0 0 2px $dp-color-brown-brightness;
-    outline: none;
-
-    &::placeholder {
-      font-style: normal;
-    }
-  }
-}
-
-input[type="tel"] {
-  -moz-appearance: textfield;
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-.field-item--50 {
-  width: 50%;
-  /* Left Column */
-  &:nth-of-type(2n+1) {
-    padding-right: 20px;
-  }
-}/* Field to 50% percent */
+}
diff --git a/assets/scss/core/_variables.scss b/assets/scss/core/_variables.scss
@@ -37,6 +37,7 @@ $dp-font-button-small: 11px;
 $dp-font-size-15: 15px;
 $dp-font-size-24: 24px;
 $dp-font-small-lineheight: 18px; //
+
 // variables margin bottom
 //
 $dp-spaces--lv0: 0;
@@ -85,6 +86,9 @@ $dp-color-brown-brightness: rgba(48,33,0,.2); //
 $dp-border-radius: 3px;
 $dp-header-height: 4em;
 $dp-text-aling: center;
+//
+$dp-font-size-rpgd: 12px;
+$dp-line-height-rpgd: 16px;
 
 .micro {
   font-size: 11px;

diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss
@@ -15,5 +15,3 @@
     text-align: right;
   }
 }
-}
-}
diff --git a/assets/scss/templates/_signup.scss b/assets/scss/templates/_signup.scss
@@ -123,7 +123,7 @@
     .main-panel {
       width: 100%;
 
-      .field-group--50 {
+      .field-item--50 {
         width: 100%;
         // Left Column
         &:nth-of-type(2n+1) {
@@ -136,4 +136,4 @@
       display: none;
     }
   }
-}
+}
diff --git a/assets/templates/signup.html b/assets/templates/signup.html
@@ -44,16 +44,17 @@ <h5>Regístrate</h5>
           <ul class="field-group">
             <li class="field-item">
               <ul class="field-group">
-                <li class="field-item field-item--50 m-bottom--lv5"><!-- margin-bottom: 30px m-bottom--lv5 -->
+                <li class="field-item field-item--50 m-bottom--lv5">
                   <label for="name">Nombre:</label>
                   <input type="name" name="name" id="name" placeholder="Nombre">
-                <li class="field-group field-item--50 m-bottom--lv5"><!-- margin-bottom: 30px m-bottom--lv5 -->
+                </li>
+                <li class="field-item field-item--50 m-bottom--lv5">
                   <label for="lastname">Apellido:</label>
                   <input type="lastname" name="name" id="lastname" placeholder="Apellido">
                 </li>
               </ul>
             </li>
-            <li class="field-item m-bottom--lv5"><!-- margin-bottom: 30px m-bottom--lv5 -->
+            <li class="field-item m-bottom--lv5">
               <label for="phone">Teléfono:</label>
               <input type="tel" name="phone" id="phone" placeholder="9 11 2345-6789">
             </li>
@@ -62,11 +63,11 @@ <h5>Regístrate</h5>
         <fieldset>
           <ul class="field-group">
             <legend>Usuario y contraseña</legend>
-            <li class="field-item m-bottom--lv5"><!-- margin-bottom: 30px m-bottom--lv5 -->
+            <li class="field-item m-bottom--lv5">
               <label for="email">Email:</label>
               <input type="email" name="email" id="email" placeholder="Tu Email será tu nombre de usuario">
             </li>
-            <li class="field-item m-bottom--lv5"><!-- margin-bottom: 30px m-bottom--lv5 -->
+            <li class="field-item m-bottom--lv5">
               <label for="password">Contraseña:</label>
               <input type="password" name="password" id="password" placeholder="Escribe tu clave secreta">
             </li>
@@ -75,12 +76,12 @@ <h5>Regístrate</h5>
         <fieldset>
           <legend>Politica de privacidad y promociones</legend>
           <ul class="field-group">
-            <li class="field-item field-item__checkbox m-bottom--lv5"><!-- margin-bottom: 30px m-bottom--lv5 -->
+            <li class="field-item field-item__checkbox">
               <input type="checkbox" name="acepto_politicas">
               <span class="checkmark"></span>
               <label for="acepto_politicas">Acepto la <a class="link-green" href="#">Política de Privacidad</a> de Doppler.</label>
             </li>
-            <li class="field-item field-item__checkbox m-bottom--lv5"><!-- margin-bottom: 30px m-bottom--lv5 -->
+            <li class="field-item field-item__checkbox m-bottom--lv5">
               <input type="checkbox" name="acepto_promociones">
               <span class="checkmark"></span>
               <label for="acepto_promociones">Acepto recibir las promociones de Doppler y sus aliados.</label>
@@ -110,6 +111,7 @@ <h3>Crea Emails en minutos y accede a nuestra Galería de Plantillas</h3>
       </article><!-- article -->
     </section><!-- feature panel-->
   </main>
+  <script src="js/app.js"></script>
 </body>
 
-</html>
+</html>