diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss index ec18d777..acd2a42d 100644 --- 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; + } } \ 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/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 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