diff options
author | Anike Arni <anikarni@gmail.com> | 2017-03-29 15:48:33 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-29 15:48:33 -0300 |
commit | 3616a6b950b0fb9d3e4842f90878d0beb4d5bc3f (patch) | |
tree | 5064ad57cb88df4efefbb8c75a65c0b6dc822c83 /web-ui/src/account_recovery/forms/forms.scss | |
parent | 75eccfc3ea988a20919c95e892b314ccd816e7c2 (diff) | |
parent | 6daf4311d32ab64fa73292e131611ee6a38ff18a (diff) |
Merge pull request #1032 from pixelated/forgot-password-page
UI improvements for account recovery flow
Diffstat (limited to 'web-ui/src/account_recovery/forms/forms.scss')
-rw-r--r-- | web-ui/src/account_recovery/forms/forms.scss | 76 |
1 files changed, 74 insertions, 2 deletions
diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss index 1ef0e8d3..09d8f2ce 100644 --- a/web-ui/src/account_recovery/forms/forms.scss +++ b/web-ui/src/account_recovery/forms/forms.scss @@ -15,6 +15,78 @@ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. */ -.account-recovery-progress { - width: 100%; +.account-recovery-form { + display: flex; + flex-direction: column; + + img { + margin: 1em 0; + align-self: center; + } + + .user-code-form-content { + display: flex; + flex-direction: column; + align-items: center; + } + + .account-recovery-progress { + width: 100%; + } + + .admin-code-image { + height: 2.7em; + } + + .user-code-image { + height: 4em; + } + + .input-field-group { + margin-top: 0; + } +} + +.new-password { + .input-field-group:first-of-type { + margin-bottom: 0; + } +} + +@media only screen and (min-width : 500px) { + .account-recovery-form { + align-items: center; + + .account-recovery-progress, h1 { + width: 80%; + } + + .user-code-form-content { + flex-direction: row; + width: 80%; + + img { + margin: 1.6em; + } + } + } +} + +@media only screen and (min-width : 960px) { + .account-recovery-form { + .account-recovery-progress { + width: 80%; + margin-top: 0; + } + + h1 { + max-width: 80%; + width: auto; + } + + .input-field-group, .submit-button { + width: 60%; + align-self: center; + } + } } |