Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
core/admin/assets/js/admin-ui-temp.js
View file

@ -24,7 +24,7 @@
var loginContainer = $(".js-login-container"), var loginContainer = $(".js-login-container"),
marginTop = Math.floor((loginContainer.parent().height() - loginContainer.height()) / 2) - 15; 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);
}); });

33
core/admin/assets/sass/layouts/login.scss
View file

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