Added styles for forgotten password screen

This commit is contained in:
John O'Nolan 2013-09-09 08:58:24 +02:00
parent d79e05aaca
commit ca0c41b8e5
2 changed files with 66 additions and 10 deletions

View File

@ -13,7 +13,8 @@
0. General
============================================================================= */
.ghost-login {
.ghost-login,
.ghost-forgotten {
color: $midgrey;
background: $darkgrey;
@ -252,14 +253,72 @@
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
}
a {
color: darken($midgrey, 10%);
font-size: 0.9em;
}
&:hover {
color: lighten($midgrey, 5%);
text-decoration: none;
/* =============================================================================
3. Forgotten
============================================================================= */
#forgotten {
@include box-sizing(border-box);
max-width: 280px;
color: lighten($midgrey, 15%);
display: table-cell;
vertical-align: middle;
@include breakpoint(630px) {
max-width: 264px;
}
div { // Yes. Really.
position:relative;
margin:0 0 1em 0;
background: lighten($darkgrey, 10%);
float: left;
}
input {
margin:0;
padding: 8px 10px;
position: relative;
border: none;
color: #fff;
font-size: 1.1em;
font-weight: 200;
background: transparent;
box-shadow: none;
@include transition(background ease 0.25s);
@include breakpoint(630px) {
@include transition(none);
max-width: 244px;
}
&:focus {
background: lighten($darkgrey, 15%);
}
}
.email-wrap {
position:relative;
border-radius: 2px;
.email {
border-radius: 2px;
}
}
button {
@include box-sizing(border-box);
width: 100%;
height: 36px;
margin: 0 0 1em 0;
padding: 0.5em 1.37em;
min-height: 30px;
min-width: 80px;
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
}
}

View File

@ -3,7 +3,4 @@
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
</div>
<button class="button-save" type="submit">Send new password</button>
<section class="meta">
<a href="/ghost/login/">Log in</a>
</section>
</form>