From 42459db03a70a30fd4708b39cc33b4ed6d317eca Mon Sep 17 00:00:00 2001 From: IgnacioRodrigues Date: Mon, 11 Mar 2019 11:47:07 -0300 Subject: [PATCH 1/4] feat(signup): add styles for the signup --- assets/scss/core/_base.scss | 109 ++++++++++++++++++++++++++++- assets/scss/core/_typography.scss | 3 +- assets/scss/modules/_buttons.scss | 1 - assets/scss/templates/_signup.scss | 68 ++++++++++++------ 4 files changed, 157 insertions(+), 24 deletions(-) diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss index ec18d777..d871d12a 100644 --- a/assets/scss/core/_base.scss +++ b/assets/scss/core/_base.scss @@ -12,6 +12,7 @@ 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 { @@ -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,111 @@ textarea { textarea:focus { border: 1px solid $dp-color-yellow; +} + +.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; + } +} + +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; + } + } + } +} + +.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); + } +} + +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; + } } \ No newline at end of file diff --git a/assets/scss/core/_typography.scss b/assets/scss/core/_typography.scss index 992a02f2..adf001e5 100644 --- 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 index 37826e4e..f7fe603d 100644 --- 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/templates/_signup.scss b/assets/scss/templates/_signup.scss index 9acac349..d8e823d2 100644 --- 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; + } + } + } + } } \ No newline at end of file From 91c0bbbbceeb9e93dc73e83c84ee909b86c60384 Mon Sep 17 00:00:00 2001 From: IgnacioRodrigues Date: Mon, 11 Mar 2019 14:47:49 -0300 Subject: [PATCH 2/4] feat(styles): separate this component in form --- assets/scss/core/_base.scss | 43 --------------------------------- assets/scss/modules/_forms.scss | 43 +++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss index d871d12a..5f1dbcd7 100644 --- a/assets/scss/core/_base.scss +++ b/assets/scss/core/_base.scss @@ -66,26 +66,6 @@ textarea:focus { border: 1px solid $dp-color-yellow; } -.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; - } -} - input[type='checkbox'] { flex: 0 1 80px; margin-left: -20px; @@ -106,29 +86,6 @@ input[type='checkbox'] { } } -.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); - } -} - input:not(.button):not([type='checkbox']) { padding: 10px 12px; height: 40px; diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss index bd0154c4..3ceaf18a 100644 --- a/assets/scss/modules/_forms.scss +++ b/assets/scss/modules/_forms.scss @@ -15,4 +15,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); + } + } } \ No newline at end of file From a577abebd58c936646ad0fea10512b21202cbe90 Mon Sep 17 00:00:00 2001 From: IgnacioRodrigues Date: Mon, 11 Mar 2019 14:55:18 -0300 Subject: [PATCH 3/4] Revert "feat(styles): separate this component in form" This reverts commit 91c0bbbbceeb9e93dc73e83c84ee909b86c60384. --- assets/scss/core/_base.scss | 43 +++++++++++++++++++++++++++++++++ assets/scss/modules/_forms.scss | 43 --------------------------------- 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss index 5f1dbcd7..d871d12a 100644 --- a/assets/scss/core/_base.scss +++ b/assets/scss/core/_base.scss @@ -66,6 +66,26 @@ textarea:focus { border: 1px solid $dp-color-yellow; } +.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; + } +} + input[type='checkbox'] { flex: 0 1 80px; margin-left: -20px; @@ -86,6 +106,29 @@ input[type='checkbox'] { } } +.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); + } +} + input:not(.button):not([type='checkbox']) { padding: 10px 12px; height: 40px; diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss index 3ceaf18a..bd0154c4 100644 --- a/assets/scss/modules/_forms.scss +++ b/assets/scss/modules/_forms.scss @@ -15,47 +15,4 @@ 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); - } - } } \ No newline at end of file From fb9af0bf292e97494d03f921c721c7bec84fc11b Mon Sep 17 00:00:00 2001 From: IgnacioRodrigues Date: Mon, 11 Mar 2019 14:57:12 -0300 Subject: [PATCH 4/4] feat(styles): separate this component in form --- assets/scss/core/_base.scss | 45 +-------------------------------- assets/scss/modules/_forms.scss | 44 +++++++++++++++++++++++++++++++- 2 files changed, 44 insertions(+), 45 deletions(-) diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss index d871d12a..acd2a42d 100644 --- a/assets/scss/core/_base.scss +++ b/assets/scss/core/_base.scss @@ -1,5 +1,4 @@ /*Elements form*/ - legend { display: none; } @@ -15,6 +14,7 @@ label { font-family: $dp-font-family-proximanova; } /* span with class .dropdown-arrow to draw arrow dropdown */ + .dropdown-arrow { border-style: solid; height: 0; @@ -66,26 +66,6 @@ textarea:focus { border: 1px solid $dp-color-yellow; } -.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; - } -} - input[type='checkbox'] { flex: 0 1 80px; margin-left: -20px; @@ -106,29 +86,6 @@ input[type='checkbox'] { } } -.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); - } -} - input:not(.button):not([type='checkbox']) { padding: 10px 12px; height: 40px; diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss index bd0154c4..8b5538e3 100644 --- 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); + } + } } \ No newline at end of file