Minor tweaks to login form animations and styles - fixes #134

This commit is contained in:
John O'Nolan 2013-06-13 13:58:37 +02:00
parent ed8ccc2170
commit 5215387e07
2 changed files with 24 additions and 11 deletions

View File

@ -24,7 +24,7 @@
var loginContainer = $(".js-login-container"),
marginTop = Math.floor((loginContainer.parent().height() - loginContainer.height()) / 2) - 15;
loginContainer.css('margin-top', marginTop).fadeIn(400);
loginContainer.css('margin-top', marginTop).delay(250).fadeIn(750);
});

View File

@ -39,12 +39,13 @@
#login {
@include box-sizing(border-box);
max-width: 530px;
color: lighten($midgrey, 15%);
@include breakpoint(630px) {
max-width: 264px;
}
div { // Yes. Really. Every Div.
div { // Yes. Really.
position:relative;
margin:0 0 5px 0;
background: lighten($darkgrey, 10%);
@ -66,23 +67,27 @@
font-weight: 200;
background: transparent;
box-shadow: none;
@include transition(none);
&:focus {
background: lighten($darkgrey, 15%);
border-color: #000;
}
@include transition(background ease 0.25s);
@include breakpoint(630px) {
width:236px;
@include transition(none);
}
&:focus {
background: lighten($darkgrey, 15%);
}
}
.email-wrap {
position:relative;
@include icon($i-mail, 12px) {position:absolute;bottom:11px;left:8px;z-index:100;};
@include icon($i-mail, 12px) {
position:absolute;
bottom:11px;
left:8px;
z-index:100;
}
margin-right: 3px;
border-radius: 2px 0 0 2px;
@ -93,12 +98,18 @@
.email {
padding-left: 28px;
border-radius: 2px 0 0 2px;
}
}
.password-wrap {
position:relative;
@include icon($i-lock, 10px) {position:absolute;bottom:12px;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) {
@ -107,6 +118,7 @@
.password {
padding-left: 28px;
border-radius: 0 2px 2px 0;
}
}
@ -129,6 +141,7 @@
.meta {
clear:both;
color: $midgrey;
}
a {
@ -136,7 +149,7 @@
font-size: 0.9em;
&:hover {
color: $lightgrey;
color: lighten($midgrey, 5%);
text-decoration: none;
}
}