diff options
| author | Anike Arni <aarni@thoughtworks.com> | 2017-02-03 18:44:18 -0200 |
|---|---|---|
| committer | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-02-06 19:02:19 -0200 |
| commit | af309eddd421b8f57319e498fa4994a2e3cb0a0e (patch) | |
| tree | 9f2dd728295137a2b593ef462e16cfe284fb4008 /web-ui/app | |
| parent | 55e2f707fabc01735d0c185ded6682219ba0c555 (diff) | |
[#922] Adds text field and button to page
with @tayanefernandes
Diffstat (limited to 'web-ui/app')
| -rw-r--r-- | web-ui/app/account_recovery.html | 1 | ||||
| -rw-r--r-- | web-ui/app/js/account_recovery/page.js | 15 | ||||
| -rw-r--r-- | web-ui/app/scss/account_recovery/page.scss | 90 | ||||
| -rw-r--r-- | web-ui/app/scss/base/_colors.scss | 1 |
4 files changed, 96 insertions, 11 deletions
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 @@ <!DOCTYPE html> <html> <head> + <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <title>Pixelated Account Recovery</title> </head> <body> 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 = () => ( - <div className="container"> - <img src="assets/images/forgot-my-password.svg" /> - <h1>E se você esquecer sua senha?</h1> + <div className='container'> + <form> + <img src='assets/images/forgot-my-password.svg' /> + <h1>E se você esquecer sua senha?</h1> + <p>Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.</p> + <p>Instruções serão enviadas para esse e-mail, guarde com carinho.</p> + <div className="field-group"> + <input type="text" name="email" className="email" required/> + <label className="animated-label" htmlFor="email">Digite seu e-mail de recuperação</label> + </div> + <button>Adicionar e-mail</button> + </form> </div> ); 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; |