From af309eddd421b8f57319e498fa4994a2e3cb0a0e Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Fri, 3 Feb 2017 18:44:18 -0200 Subject: [#922] Adds text field and button to page with @tayanefernandes --- web-ui/app/account_recovery.html | 1 + web-ui/app/js/account_recovery/page.js | 15 ++++- web-ui/app/scss/account_recovery/page.scss | 90 +++++++++++++++++++++++++++--- web-ui/app/scss/base/_colors.scss | 1 + 4 files changed, 96 insertions(+), 11 deletions(-) (limited to 'web-ui/app') diff --git a/web-ui/app/account_recovery.html b/web-ui/app/account_recovery.html index 407f5907..d2021f65 100644 --- a/web-ui/app/account_recovery.html +++ b/web-ui/app/account_recovery.html @@ -1,6 +1,7 @@ + Pixelated Account Recovery diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js index a6be0c6e..447331bc 100644 --- a/web-ui/app/js/account_recovery/page.js +++ b/web-ui/app/js/account_recovery/page.js @@ -3,9 +3,18 @@ import React from 'react' import 'scss/account_recovery/page.scss' const Page = () => ( -
- -

E se você esquecer sua senha?

+
+
+ +

E se você esquecer sua senha?

+

Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.

+

Instruções serão enviadas para esse e-mail, guarde com carinho.

+
+ + +
+ +
); diff --git a/web-ui/app/scss/account_recovery/page.scss b/web-ui/app/scss/account_recovery/page.scss index b6a4c024..040539f4 100644 --- a/web-ui/app/scss/account_recovery/page.scss +++ b/web-ui/app/scss/account_recovery/page.scss @@ -1,7 +1,10 @@ @import "../vendor/reset"; @import "../base/colors"; @import "../base/fonts"; -@import "../base/scaffolding"; + +html { + min-height: 100%; +} body { font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; @@ -10,22 +13,93 @@ body { background: -o-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, $dark_blue, $middle_blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom right, $dark_blue, $middle_blue); /* Standard syntax */ + color: $dark_grey_text; + min-height: 100%; } h1 { - font-size: 4em; - color: $dark_slate_gray; + font-size: 1.3em; + font-weight: 600; + width: 100%; +} + +p { + -webkit-margin-before: 0.5em; + -webkit-margin-after: 0.5em; + margin-before: 0.5em; + margin-after: 0.5em; +} + +.field-group { + position:relative; + margin: 1em 0; + width: 96%; +} + +label { + font-size: 0.9em; + margin-bottom: 10px; + display: inline-block; +} + +input { + display: block; + border: none; + border-bottom: solid 1px #4da3b6; + width: 100%; + height: auto; + padding: 6px 0px; +} + +input:focus { + outline:none; +} + +input:focus ~ .animated-label, input:valid ~ .animated-label { + top:-12px; + left: 0; + font-size:0.7em; + color:#4da3b6; +} + +.animated-label { + color:#999; + position:absolute; + pointer-events:none; + left: 6px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} + +button { + background: $dark_blue; + padding: 0.8em; + color: $white; + text-align: center; + border: none; + border-radius: 2px; + font-weight: 300; + width: 96%; } .container { background: $white; - width: 90%; - margin: 2% auto; - padding: 3%; + width: 84%; + margin: 3% auto; + padding: 6% 5%; +} + +form { + -webkit-display: flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex-direction: column; + flex-direction: column; img { - display: block; width: 50%; - margin: 0 auto; } } diff --git a/web-ui/app/scss/base/_colors.scss b/web-ui/app/scss/base/_colors.scss index f3c245a9..e79781cf 100644 --- a/web-ui/app/scss/base/_colors.scss +++ b/web-ui/app/scss/base/_colors.scss @@ -38,6 +38,7 @@ $black: #000; $top_pane: $contrast; $total_count_bg: #C0B9B9; $background_dropdown_grey: #f0f0f0; +$dark_grey_text: #4a4a4a; $background_light_grey: #F5F5F5; $border_light_grey: #D9D9D9; -- cgit v1.2.3