diff --git a/assets/icons/hide.svg b/assets/icons/hide.svg new file mode 100644 index 00000000..a23d1e8b --- /dev/null +++ b/assets/icons/hide.svg @@ -0,0 +1,13 @@ + + + + Group 5 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/assets/icons/view.svg b/assets/icons/view.svg index 901ee9c2..054499e2 100644 --- a/assets/icons/view.svg +++ b/assets/icons/view.svg @@ -1,9 +1,11 @@ - - - - - - + + + + guidelines: general + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/assets/img/doppler-logo.svg b/assets/img/doppler-logo-new.svg similarity index 100% rename from assets/img/doppler-logo.svg rename to assets/img/doppler-logo-new.svg diff --git a/assets/img/logo-doppler.svg b/assets/img/doppler-logo-old.svg similarity index 100% rename from assets/img/logo-doppler.svg rename to assets/img/doppler-logo-old.svg diff --git a/assets/js/main.js b/assets/js/main.js index 17890deb..992422d4 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -52,3 +52,20 @@ $("#btn-modal-small").click(function() { $(".modal .close").click(function() { $(".modal").fadeOut(); }); + + +// script to show and hide password +$(".show-hide").click(function() { + $(this).toggleClass("ms-icon icon-hide"); + var input = $($(this).attr("toggle")); + + if (input.attr("type") == "password") { + input.attr("type", "text"); + $('span.content-eye').text('Ocultar'); + $(this).removeClass("ms-icon icon-view").addClass("ms-icon icon-hide"); + } else { + input.attr("type", "password"); + $('span.content-eye').text('Mostrar'); + $(this).removeClass("ms-icon icon-hide").addClass("ms-icon icon-view"); + } +}); diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss index 132f715b..62a96c0a 100644 --- a/assets/scss/core/_base.scss +++ b/assets/scss/core/_base.scss @@ -112,12 +112,17 @@ textarea { &__checkbox { cursor: pointer; + margin-bottom: $dp-spaces--lv3; label { font-weight: normal; vertical-align: middle; margin-left: $dp-spaces--lv4; } + + &:nth-last-child(1) { + margin-bottom: $dp-spaces--lv4; + } }/* Field checkbox */ &--50 { @@ -127,6 +132,26 @@ textarea { padding-right: $dp-spaces--lv3; } }/* Field to 50% percent */ + + + .show-hide { + float: right; + font-size: $dp-font-size-small; + font-weight: normal; + font-style: italic; + color: $dp-color-grey; + line-height: $dp-font-small-lineheight; + vertical-align: bottom; + + &:hover { + opacity: 0.7; + } + } + + .content-eye { + font-family: $dp-font-family-proximanova; + font-size: $dp-font-size-small; + } } } @@ -147,12 +172,24 @@ input[type='checkbox'] { } } } + + &:focus { + & ~ .checkmark { + 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; + } + } } input:not([type='checkbox']) { padding: 10px 12px; height: 40px; width: 100%; + color: $dp-color-grey; border: 1px solid $dp-color-lightgrey; border-radius: $dp-border-radius; background-color: $dp-color-white; @@ -200,7 +237,8 @@ input[type="tel"] { .error { input, select, - textarea { + textarea, + .checkmark { border: 1px solid $dp-color-red; } diff --git a/assets/scss/modules/_atomic-class.scss b/assets/scss/modules/_atomic-class.scss index 05d15f0f..8a31608f 100644 --- a/assets/scss/modules/_atomic-class.scss +++ b/assets/scss/modules/_atomic-class.scss @@ -42,3 +42,21 @@ .m-bottom--lv8 { margin-bottom: $dp-spaces--lv8; } + +.logo-doppler-new { + display: inline-block; + background-image: url('../img/doppler-logo-new.svg'); + background-repeat: no-repeat; + height: 40px; + width: 145px; + text-indent: -99em; +} + +.logo-doppler-old { + display: inline-block; + background-image: url('../img/doppler-logo-old.svg'); + background-repeat: no-repeat; + height: 30px; + width: 85px; + text-indent: -99em; +} diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss index a994ec93..5a22898b 100644 --- a/assets/scss/modules/_forms.scss +++ b/assets/scss/modules/_forms.scss @@ -46,7 +46,7 @@ content: ''; position: absolute; left: 4px; - bottom: 9px; + bottom: 10px; width: 4px; height: 7px; border: solid $check-color; diff --git a/assets/scss/templates/_signup.scss b/assets/scss/templates/_signup.scss index 5c62c35e..6b588e03 100644 --- a/assets/scss/templates/_signup.scss +++ b/assets/scss/templates/_signup.scss @@ -19,7 +19,7 @@ .content-signin { float: right; display: inline-block; - margin-top: $dp-spaces--lv1; + margin-top: $dp-spaces--lv3; font-family: $dp-font-family-proximanova; font-style: italic; @@ -54,7 +54,7 @@ } .content-legal { - margin-top: $dp-spaces--lv5; + margin-top: $dp-spaces--lv4; p { font-size: $dp-font-size-rpgd; diff --git a/assets/templates/signup.html b/assets/templates/signup.html index aa06f035..eda462ab 100644 --- a/assets/templates/signup.html +++ b/assets/templates/signup.html @@ -33,7 +33,7 @@
- Doppler +

Doppler

Regístrate
@@ -46,14 +46,14 @@
Regístrate