Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Refactor auth CSS

Browse source 
This means signing screen icons now depend on new markup
This commit is contained in:
Paul Adam Davis 2014-08-19 15:25:24 +01:00
parent dcbd77ca03
commit d4e564d7d9
4 changed files with 67 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
ghost/admin/assets/sass/layouts/auth.scss
View file

@ -70,8 +70,8 @@
max-width: 264px; max-width: 264px;
} }
div { // Yes. Really. .email-wrap,
// TODO: This ^ can be improved 1000% .password-wrap {
position: relative; position: relative;
margin: 0 0 5px 0; margin: 0 0 5px 0;
background: lighten($darkgrey, 10%); background: lighten($darkgrey, 10%);
@ -82,8 +82,8 @@
} }
} }
// TODO: make more specific .email,
input { .password {
display: inline-block; display: inline-block;
clear: both; clear: both;
padding: 8px 0 8px 8px; padding: 8px 0 8px 8px;
@ -100,62 +100,30 @@
background: lighten($darkgrey, 15%); background: lighten($darkgrey, 15%);
} }
} } // .email, .password
.email-wrap { .email-wrap {
position: relative;
@include icon($i-mail, 12px) {
position: absolute;
bottom: 11px;
left: 8px;
z-index: 100;
}
margin-right: 3px; margin-right: 3px;
@media (max-width: 630px) { @media (max-width: 630px) {
margin-right: 0; margin-right: 0;
} }
.email { } // .email-wrap
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;
}
.password {
padding-left: 28px;
border-radius: 0 2px 2px 0;
}
}
@media (min-width: 631px) {
.email-wrap,
.email-wrap .email {
border-radius: 2px 0 0 2px;
}
.password-wrap,
.password-wrap .password {
border-radius: 0 2px 2px 0;
}
}
@media (max-width: 630px) { @media (max-width: 630px) {
.email-wrap, .email,
.email-wrap .email, .password {
.password-wrap,
.password-wrap .password {
border-radius: 2px; border-radius: 2px;
} }
} }
@media (min-width: 631px) {
.email {
border-radius: 2px 0 0 2px;
}
.password {
border-radius: 0 2px 2px 0;
}
}
button { button {
width: 85px; width: 85px;
@ -171,7 +139,7 @@
width: 100%; width: 100%;
margin-bottom: 1em; margin-bottom: 1em;
} }
} } // button
.meta { .meta {
clear: both; clear: both;
@ -186,7 +154,7 @@
color: lighten($midgrey, 5%); color: lighten($midgrey, 5%);
text-decoration: none; text-decoration: none;
} }
} } // a
} // .login-form } // .login-form
@ -283,34 +251,25 @@
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
div { // Yes. Really. .email-wrap {
// TODO: Again, can make this better.
position: relative; position: relative;
margin: 0 0 1em 0; margin: 0 0 1em 0;
background: lighten($darkgrey, 10%); background: lighten($darkgrey, 10%);
float: left; float: left;
} border-radius: 2px;
width: 100%;
} // .email-wrap
input { .email {
padding: 8px 10px; padding: 8px 10px;
border-radius: 2px;
@include transition(background ease 0.25s); @include transition(background ease 0.25s);
&:focus { &:focus {
border: none; border: none;
background: lighten($darkgrey, 15%); background: lighten($darkgrey, 15%);
} }
} // .email
}
.email-wrap {
width: 100%;
position:relative;
border-radius: 2px;
.email {
border-radius: 2px;
}
}
button { button {
width: 100%; width: 100%;
@ -320,6 +279,6 @@
min-height: 30px; min-height: 30px;
min-width: 80px; min-width: 80px;
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset; box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
} } // button
} // .forgotten-form } // .forgotten-form

21
ghost/admin/assets/sass/layouts/setup.scss
View file

@ -3,7 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Slug: /ghost/setup/ // Slug: /ghost/setup/
// -------------------------------------------------- // --------------------------------------------------
// These styles cover /ghost/setup/ which is the first // These styles cover /ghost/setup/ which is the first
// screen that appears on a new Ghost install // screen that appears on a new Ghost install
.ghost-setup { .ghost-setup {
@ -56,25 +56,13 @@
} }
} }
// .form-group { .form-group input {
// padding-left: 110px;
// @media (max-width: 550px) {
// padding-left: 0;
// }
// }
input {
// width: 300px; // width: 300px;
padding: 7px; padding: 7px;
border: none; border: none;
color: #fff; color: #fff;
background: lighten($darkgrey, 10%); background: lighten($darkgrey, 10%);
@include transition(background ease 0.25s); @include transition(background 0.25s ease);
// @media (max-width: 550px) {
// width: 100%;
// }
&:focus { &:focus {
border:none; border:none;
@ -91,6 +79,7 @@
margin: 0; margin: 0;
font-weight: 200; font-weight: 200;
font-size: 26px; font-size: 26px;
letter-spacing: 0;
color: $lightgrey; color: $lightgrey;
@media (max-width: 550px) { @media (max-width: 550px) {
@ -104,7 +93,9 @@
border: none; border: none;
font-weight: 200; font-weight: 200;
font-size: 16px; font-size: 16px;
letter-spacing: 0;
color: $midgrey; color: $midgrey;
white-space: nowrap;
@media (max-width: 550px) { @media (max-width: 550px) {
font-size: 14px; font-size: 14px;

108
ghost/admin/docs/dist/css/ghost-ui.css vendored
View file

@ -3344,15 +3344,15 @@ a.badge:hover, a.badge:focus {
@media (max-width: 550px) { @media (max-width: 550px) {
.setup-form label { .setup-form label {
width: 100%; } } width: 100%; } }
.setup-form input { .setup-form .form-group input {
padding: 7px; padding: 7px;
border: none; border: none;
color: #fff; color: #fff;
background: #3c4043; background: #3c4043;
-webkit-transition: background ease 0.25s; -webkit-transition: background 0.25s ease;
-moz-transition: background ease 0.25s; -moz-transition: background 0.25s ease;
transition: background ease 0.25s; } transition: background 0.25s ease; }
.setup-form input:focus { .setup-form .form-group input:focus {
border: none; border: none;
background: #484c50; } background: #484c50; }
.setup-form input:-webkit-autofill { .setup-form input:-webkit-autofill {
@ -3361,6 +3361,7 @@ a.badge:hover, a.badge:focus {
margin: 0; margin: 0;
font-weight: 200; font-weight: 200;
font-size: 26px; font-size: 26px;
letter-spacing: 0;
color: #e2edf2; } color: #e2edf2; }
@media (max-width: 550px) { @media (max-width: 550px) {
.setup-form h1 { .setup-form h1 {
@ -3371,7 +3372,9 @@ a.badge:hover, a.badge:focus {
border: none; border: none;
font-weight: 200; font-weight: 200;
font-size: 16px; font-size: 16px;
color: #7d878a; } letter-spacing: 0;
color: #7d878a;
white-space: nowrap; }
@media (max-width: 550px) { @media (max-width: 550px) {
.setup-form h2 { .setup-form h2 {
font-size: 14px; } } font-size: 14px; } }
@ -3447,15 +3450,18 @@ a.badge:hover, a.badge:focus {
@media (max-width: 630px) { @media (max-width: 630px) {
.login-form { .login-form {
max-width: 264px; } } max-width: 264px; } }
.login-form div { .login-form .email-wrap,
.login-form .password-wrap {
position: relative; position: relative;
margin: 0 0 5px 0; margin: 0 0 5px 0;
background: #3c4043; background: #3c4043;
float: left; } float: left; }
@media (max-width: 630px) { @media (max-width: 630px) {
.login-form div { .login-form .email-wrap,
.login-form .password-wrap {
margin-bottom: 1em; } } margin-bottom: 1em; } }
.login-form input { .login-form .email,
.login-form .password {
display: inline-block; display: inline-block;
clear: both; clear: both;
padding: 8px 0 8px 8px; padding: 8px 0 8px 8px;
@ -3464,75 +3470,30 @@ a.badge:hover, a.badge:focus {
-moz-transition: background ease 0.25s; -moz-transition: background ease 0.25s;
transition: background ease 0.25s; } transition: background ease 0.25s; }
@media (max-width: 630px) { @media (max-width: 630px) {
.login-form input { .login-form .email,
.login-form .password {
width: 264px; width: 264px;
-webkit-transition: none; -webkit-transition: none;
-moz-transition: none; -moz-transition: none;
transition: none; } } transition: none; } }
.login-form input:focus { .login-form .email:focus,
.login-form .password:focus {
border: none; border: none;
background: #484c50; } background: #484c50; }
.login-form .email-wrap { .login-form .email-wrap {
position: relative;
margin-right: 3px; } margin-right: 3px; }
.login-form .email-wrap:before {
font-family: "GhostIcons";
font-weight: normal;
font-style: normal;
vertical-align: -7%;
text-transform: none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\e012";
font-size: 12px;
position: absolute;
bottom: 11px;
left: 8px;
z-index: 100; }
.login-form .email-wrap:hover {
text-decoration: none; }
@media (max-width: 630px) { @media (max-width: 630px) {
.login-form .email-wrap { .login-form .email-wrap {
margin-right: 0; } } margin-right: 0; } }
.login-form .email-wrap .email {
padding-left: 28px;
border-radius: 2px 0 0 2px; }
.login-form .password-wrap {
position: relative; }
.login-form .password-wrap:before {
font-family: "GhostIcons";
font-weight: normal;
font-style: normal;
vertical-align: -7%;
text-transform: none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\e02c";
font-size: 10px;
position: absolute;
bottom: 12px;
left: 11px;
z-index: 100; }
.login-form .password-wrap:hover {
text-decoration: none; }
.login-form .password-wrap .password {
padding-left: 28px;
border-radius: 0 2px 2px 0; }
@media (min-width: 631px) {
.login-form .email-wrap,
.login-form .email-wrap .email {
border-radius: 2px 0 0 2px; }
.login-form .password-wrap,
.login-form .password-wrap .password {
border-radius: 0 2px 2px 0; } }
@media (max-width: 630px) { @media (max-width: 630px) {
.login-form .email-wrap, .login-form .email,
.login-form .email-wrap .email, .login-form .password {
.login-form .password-wrap,
.login-form .password-wrap .password {
border-radius: 2px; } } border-radius: 2px; } }
@media (min-width: 631px) {
.login-form .email {
border-radius: 2px 0 0 2px; }
.login-form .password {
border-radius: 0 2px 2px 0; } }
.login-form button { .login-form button {
width: 85px; width: 85px;
height: 36px; height: 36px;
@ -3627,25 +3588,22 @@ a.badge:hover, a.badge:focus {
color: #a5acae; color: #a5acae;
display: table-cell; display: table-cell;
vertical-align: middle; } vertical-align: middle; }
.forgotten-form div { .forgotten-form .email-wrap {
position: relative; position: relative;
margin: 0 0 1em 0; margin: 0 0 1em 0;
background: #3c4043; background: #3c4043;
float: left; } float: left;
.forgotten-form input { border-radius: 2px;
width: 100%; }
.forgotten-form .email {
padding: 8px 10px; padding: 8px 10px;
border-radius: 2px;
-webkit-transition: background ease 0.25s; -webkit-transition: background ease 0.25s;
-moz-transition: background ease 0.25s; -moz-transition: background ease 0.25s;
transition: background ease 0.25s; } transition: background ease 0.25s; }
.forgotten-form input:focus { .forgotten-form .email:focus {
border: none; border: none;
background: #484c50; } background: #484c50; }
.forgotten-form .email-wrap {
width: 100%;
position: relative;
border-radius: 2px; }
.forgotten-form .email-wrap .email {
border-radius: 2px; }
.forgotten-form button { .forgotten-form button {
width: 100%; width: 100%;
height: 36px; height: 36px;

4
ghost/admin/docs/dist/css/ghost-ui.min.css vendored
View file

File diff suppressed because one or more lines are too long