Merge pull request #49 from FromDoppler/styles-signup

Styles for SignUp
FromDoppler · Mar 11, 2019 · bd8f260 · bd8f260
2 parents f92e96e + fb9af0b
commit bd8f260
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 26 deletions.
diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss
@@ -1,5 +1,4 @@
 /*Elements form*/
-
 legend {
   display: none;
 }
@@ -12,8 +11,10 @@ label {
   color: $dp-color-grey;
   font-weight: $dp-font-weight-bold;
   font-size: $dp-font-size-small;
+  font-family: $dp-font-family-proximanova;
 }
 /* span with class .dropdown-arrow to draw arrow dropdown */
+
 .dropdown-arrow {
   border-style: solid;
   height: 0;
@@ -37,7 +38,6 @@ select {
   font-size: $dp-font-size-small;
   padding: 0 40px 0 10px;
   text-align: left;
-  height: 40px;
   line-height: 40px;
   cursor: pointer;
   -webkit-appearance: button;
@@ -64,4 +64,68 @@ textarea {
 
 textarea:focus {
   border: 1px solid $dp-color-yellow;
+}
+
+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;
+  }
 }
diff --git a/assets/scss/core/_typography.scss b/assets/scss/core/_typography.scss
@@ -33,6 +33,7 @@ $dp-font-button-medium: 13px;
 $dp-font-button-small: 11px;
 $dp-font-size-15: 15px;
 $dp-font-size-24: 24px;
+$dp-font-small-lineheight: 18px;
 
 body {
   color: $dp-color-grey;
@@ -99,7 +100,7 @@ p {
 small {
   font: $dp-font;
   font-size: $dp-font-size-small;
-  line-height: 18px;
+  line-height: $dp-font-small-lineheight;
 }
 
 .link-green {

diff --git a/assets/scss/modules/_buttons.scss b/assets/scss/modules/_buttons.scss
@@ -6,7 +6,6 @@
     text-transform: uppercase;
     border: none;
     outline: none;
-    margin: 0 5px;
     appearance: none;
     font-family: $dp-font-family-proximanova;
     border-radius: $dp-border-radius;

diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss
@@ -1,5 +1,4 @@
 /* form-request - user-menu */
-
 .form-request {
   font-family: $dp-font-family;
   padding: 20px 0 0;
@@ -15,4 +14,47 @@
     border-top: 1px solid $dp-color-sylver;
     text-align: right;
   }
+}
+
+.content-checkbox {
+  width: 100%;
+  position: relative;
+  display: inline-block;
+  text-align: left;
+  margin: 20px 0;
+
+  .checkbox {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+
+    label {
+      margin-left: -34px;
+      margin-bottom: 0;
+      font-weight: normal;
+    }
+  }
+
+  .checkmark {
+    margin-right: 10px;
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    border: 1px solid $dp-color-lightgrey;
+    border-radius: 3px;
+    background-color: $dp-color-white;
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      top: 1px;
+      left: 5px;
+      width: 5px;
+      height: 10px;
+      position: absolute;
+      border: solid $dp-color-white;
+      border-width: 0 3px 3px 0;
+      transform: rotate(45deg);
+    }
+  }
 }
diff --git a/assets/scss/templates/_signup.scss b/assets/scss/templates/_signup.scss
@@ -8,17 +8,17 @@
   .main-panel {
     flex: 1.5;
     height: 100vh;
+    padding: 40px 50px;
     background-color: $dp-color-white;
     overflow-y: auto;
-    padding: 40px 50px;
 
     .logo-doppler {
       height: 30px;
     }
 
     .content-signin {
-      display: inline-block;
       float: right;
+      display: inline-block;
       margin-top: 6px;
       font-family: $dp-font-family-proximanova;
       font-style: italic;
@@ -31,39 +31,44 @@
 
     h5 {
       margin: 60px 0 0;
-      color: $dp-color-brown;
       font-family: $dp-font-family-proximanova;
+      color: $dp-color-brown;
       font-weight: bold;
       text-transform: uppercase;
     }
 
-    p {
+    .content-subtitle {
+      margin: 10px 0 30px;
+      font-family: $dp-font-family-proximanova;
+    }
+
+    .content-promotion {
+      padding-top: 16px;
+      border-top: 1px $dp-color-grey dashed;
       font-family: $dp-font-family-proximanova;
+    }
+
+    .signup-form {
+      .holder-small {
+        display: inline-block;
+        width: 47.4%;
 
-      &.content-subtitle {
-        margin: 10px 0 30px;
+        &:nth-child(1) {
+          margin-right: 4%;
+        }
       }
 
-      &.content-promotion {
-        font-size: 15px;
-        border-top: 1px $dp-color-grey dashed;
-        padding-top: 16px;
+      ul > li:nth-child(n+3) {
+        margin-top: 20px;
       }
     }
 
-    .content-legal {
-      p {
-        font-size: 12px;
-      }
+    small {
+      font-family: $dp-font-family-proximanova;
     }
 
     footer {
       padding-top: 15px;
-
-      p {
-        font-family: $dp-font-family-proximanova;
-        font-size: 14px;
-      }
     }
   }
 
@@ -79,18 +84,18 @@
     max-width: 500px;
 
     h6 {
+      margin-bottom: 10px;
       font-family: $dp-font-family-proximanova;
       font-weight: bold;
       color: $dp-color-white;
       text-transform: uppercase;
-      margin-bottom: 10px;
     }
 
     h3 {
+      margin: 10px 0;
       font-family: $dp-font-family-proximanova;
       font-weight: bold;
       color: $dp-color-white;
-      margin: 10px 0;
     }
 
     p {
@@ -122,4 +127,25 @@
   .feature-panel {
     display: none;
   }
+}
+@include media-breakpoint('mobile') {
+  .panel-wrapper {
+    .main-panel {
+      .signup-form {
+        .holder-small {
+          width: 100%;
+          margin-right: 0;
+          display: block;
+
+          &:nth-child(1) {
+            margin-right: 0;
+          }
+        }
+
+        ul > li:nth-child(n+2) {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
 }