Mercurial > gemma
changeset 25:a728610b3812
Add Light visual hints
Using light hints to emphasize the from parts
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 21 Jun 2018 18:28:18 +0200 |
parents | 10ebbf197523 |
children | 96a429c5f227 |
files | client/src/assets/application.scss client/src/views/Login.vue |
diffstat | 2 files changed, 24 insertions(+), 11 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Thu Jun 21 17:30:26 2018 +0200 +++ b/client/src/assets/application.scss Thu Jun 21 18:28:18 2018 +0200 @@ -4,6 +4,7 @@ $iconLineHeight: 0.25em; $iconwidth: 20px; $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75); +$basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75); %fully-centered { position: absolute;
--- a/client/src/views/Login.vue Thu Jun 21 17:30:26 2018 +0200 +++ b/client/src/views/Login.vue Thu Jun 21 18:28:18 2018 +0200 @@ -1,23 +1,23 @@ <template> <div class="login rounded bg-white"> <div> - <div class="logo d-flex flex-row justify-content-center"> - <div><img src="../assets/logo.png"></div> + <div class="logogroup d-flex flex-row justify-content-center"> + <div class="logo"><img src="../assets/logo.png"></div> <div class="title"><h1>{{ appTitle }}</h1></div> </div> </div> <div class="login-wrapper d-flex flex-row justify-content-center"> <form class="loginform form-signin" @submit.prevent="login"> - <div v-if="loginFailed" class="alert alert-danger" role="alert"> - <span class="loginerror">{{ loginAttemptFailed }}</span> - </div> - <div class="input-group mb-3"> + <div v-if="loginFailed" class="loginerrormessage alert alert-danger" role="alert"> + <span class="loginerror">{{ loginAttemptFailed }}</span> + </div> + <div class="input-group mb-3 emailgroup"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span> </div> <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus> </div> - <div class="input-group mb-3"> + <div class="input-group mb-3 passwordgroup"> <div class="input-group-prepend"> <span class="input-group-text"><span class="password-icon">*</span></span> </div> @@ -26,7 +26,7 @@ <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span> </div> </div> - <button class="btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> + <button class="submitbutton btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div> <div class="secondary-logo"><img :src="secondaryLogo"></div> </form> @@ -37,10 +37,13 @@ <style lang="scss"> @import "../assets/application.scss"; +.emailgroup { + box-shadow: $basic-shadow-light !important; +} .forgottenlink { text-align: right; margin-top: $small-offset; - margin-bottom: $offset; + margin-bottom: $small-offset; } #inputPassword { border-right: none; @@ -49,7 +52,7 @@ background-color: white !important; } .login { - height: 480px; + height: 550px; width: 375px; @extend %fully-centered; padding-top: $offset; @@ -59,16 +62,22 @@ .loginerror { white-space: pre; } +.loginerrormessage { + box-shadow: $basic-shadow-light !important; +} .loginform { width: 300px; } -.logo { +.logogroup { margin-top: $offset; margin-bottom: $offset; } .mail-icon { width: $iconwidth; } +.passwordgroup { + box-shadow: $basic-shadow-light !important; +} .password-icon { position: relative; top: 10px; @@ -76,6 +85,9 @@ line-height: $iconLineHeight; width: $iconwidth; } +.submitbutton { + box-shadow: $basic-shadow-light !important; +} .title { margin-left: $offset; }