Refactor + Restyle login/register screens. See #134
This commit is contained in:
John O'Nolan
parent
7e1bd2922e
commit
1267f91935
@ -12,9 +12,10 @@
|
||||
|
||||
.ghost-login {
|
||||
color: $midgrey;
|
||||
background: $darkgrey;
|
||||
|
||||
@include breakpoint($mobile) {
|
||||
background: $lightbrown;
|
||||
background: $darkgrey;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -27,67 +28,52 @@
|
||||
max-width: 530px;
|
||||
margin: 240px auto; // TODO: Change this to proper vertical centering with JS
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
border-top: $darkgrey 15px solid;
|
||||
box-shadow: $shadow;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
max-width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 80px 0 70px 0;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
max-width: 235px;
|
||||
margin: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#login {
|
||||
@include box-sizing(border-box);
|
||||
max-width: 530px;
|
||||
padding: 15px;
|
||||
background: $darkgrey;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
max-width: 264px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
div {
|
||||
div { // Yes. Really. Every Div.
|
||||
position:relative;
|
||||
margin:0 0 5px 0;
|
||||
background: lighten($darkgrey, 15%);
|
||||
background: lighten($darkgrey, 10%);
|
||||
float: left;
|
||||
|
||||
@include breakpoint(630px) { margin-bottom: 1em; }
|
||||
}
|
||||
|
||||
input {
|
||||
display:inline-block;
|
||||
clear:both;
|
||||
margin:0;
|
||||
padding-left: 8px;
|
||||
width: 168px;
|
||||
padding: 8px 0 8px 8px;
|
||||
width: 188px;
|
||||
position: relative;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
font-weight: 200;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
@include transition(none);
|
||||
|
||||
&:focus {
|
||||
background: lighten($darkgrey, 22%);
|
||||
background: lighten($darkgrey, 15%);
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
@include breakpoint(630px) {
|
||||
width:201px;
|
||||
width:236px;
|
||||
@include transition(none);
|
||||
}
|
||||
|
||||
@ -95,8 +81,8 @@
|
||||
|
||||
.email-wrap {
|
||||
position:relative;
|
||||
@include icon($i-mail, 12px) {position:absolute;bottom:8px;left:8px;z-index:100;};
|
||||
margin-right: 2px;
|
||||
@include icon($i-mail, 12px) {position:absolute;bottom:11px;left:8px;z-index:100;};
|
||||
margin-right: 3px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
@ -111,7 +97,7 @@
|
||||
|
||||
.password-wrap {
|
||||
position:relative;
|
||||
@include icon($i-lock, 10px) {position:absolute;bottom:9px;left:11px;z-index:100;};
|
||||
@include icon($i-lock, 10px) {position:absolute;bottom:12px;left:11px;z-index:100;};
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
@ -125,10 +111,10 @@
|
||||
}
|
||||
|
||||
button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
margin:0 0 0 15px;
|
||||
padding: 9px;
|
||||
width: 85px;
|
||||
height: 36px;
|
||||
margin:0 0 0 10px;
|
||||
padding: 0.5em 1.37em;
|
||||
min-height: 30px;
|
||||
min-width: 80px;
|
||||
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
|
||||
@ -136,6 +122,21 @@
|
||||
@include breakpoint(630px) {
|
||||
margin:0;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($midgrey, 10%);
|
||||
font-size: 0.9em;
|
||||
|
||||
&:hover {
|
||||
color: $lightgrey;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{{!< default}}
|
||||
<section class="login-box">
|
||||
<img class="login-logo" src="/core/admin/assets/img/logo.png" alt="" />
|
||||
<form id="login" method="post">
|
||||
<div class="email-wrap">
|
||||
<input class="email" type="text" placeholder="Email Address" name="email">
|
||||
@ -9,6 +8,8 @@
|
||||
<input class="password" type="password" placeholder="Password" name="password">
|
||||
</div>
|
||||
<button class="button-save" type="submit">Log in</button>
|
||||
<a href="/ghost/register/">Register</a>
|
||||
<section class="meta">
|
||||
<a class="forgotten-password" href="#">Forgotten password?</a> • <a href="/ghost/register/">Register new user</a>
|
||||
</section>
|
||||
</form>
|
||||
</section>
|
||||
@ -1,12 +1,15 @@
|
||||
{{!< default}}
|
||||
<img class="login-logo" src="/core/admin/assets/img/logo.png" alt="" />
|
||||
<form id="register" method="post">
|
||||
<div class="email-wrap">
|
||||
<input class="email_address" type="text" placeholder="Email Address" name="email_address">
|
||||
</div>
|
||||
<div class="password-wrap">
|
||||
<input class="password" type="password" placeholder="Password" name="password">
|
||||
</div>
|
||||
<button class="button-save" type="submit">Register</button>
|
||||
<a href="/ghost/login/">Log in</a>
|
||||
</form>
|
||||
<section class="login-box">
|
||||
<form id="register" method="post">
|
||||
<div class="email-wrap">
|
||||
<input class="email_address" type="text" placeholder="Email Address" name="email_address">
|
||||
</div>
|
||||
<div class="password-wrap">
|
||||
<input class="password" type="password" placeholder="Password" name="password">
|
||||
</div>
|
||||
<button class="button-save" type="submit">Register</button>
|
||||
<section class="meta">
|
||||
<a href="/ghost/login/">Log in</a>
|
||||
</section>
|
||||
</form>
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user