mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-02 16:41:24 +03:00
Refactor auth CSS
This means signing screen icons now depend on new markup
This commit is contained in:
Paul Adam Davis
parent
c63c88c37f
commit
8f225fe640
@ -70,8 +70,8 @@
|
||||
max-width: 264px;
|
||||
}
|
||||
|
||||
div { // Yes. Really.
|
||||
// TODO: This ^ can be improved 1000%
|
||||
.email-wrap,
|
||||
.password-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 5px 0;
|
||||
background: lighten($darkgrey, 10%);
|
||||
@ -82,8 +82,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: make more specific
|
||||
input {
|
||||
.email,
|
||||
.password {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
padding: 8px 0 8px 8px;
|
||||
@ -100,62 +100,30 @@
|
||||
background: lighten($darkgrey, 15%);
|
||||
}
|
||||
|
||||
}
|
||||
} // .email, .password
|
||||
|
||||
.email-wrap {
|
||||
position: relative;
|
||||
@include icon($i-mail, 12px) {
|
||||
position: absolute;
|
||||
bottom: 11px;
|
||||
left: 8px;
|
||||
z-index: 100;
|
||||
}
|
||||
margin-right: 3px;
|
||||
@media (max-width: 630px) {
|
||||
margin-right: 0;
|
||||
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
} // .email-wrap
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.email-wrap,
|
||||
.email-wrap .email,
|
||||
.password-wrap,
|
||||
.password-wrap .password {
|
||||
.email,
|
||||
.password {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 631px) {
|
||||
.email {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.password {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 85px;
|
||||
@ -171,7 +139,7 @@
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
} // button
|
||||
|
||||
.meta {
|
||||
clear: both;
|
||||
@ -186,7 +154,7 @@
|
||||
color: lighten($midgrey, 5%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
} // a
|
||||
|
||||
} // .login-form
|
||||
|
||||
@ -283,34 +251,25 @@
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
div { // Yes. Really.
|
||||
// TODO: Again, can make this better.
|
||||
.email-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 1em 0;
|
||||
background: lighten($darkgrey, 10%);
|
||||
float: left;
|
||||
}
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
} // .email-wrap
|
||||
|
||||
input {
|
||||
.email {
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
@include transition(background ease 0.25s);
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
background: lighten($darkgrey, 15%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.email-wrap {
|
||||
width: 100%;
|
||||
position:relative;
|
||||
border-radius: 2px;
|
||||
|
||||
.email {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
} // .email
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
@ -320,6 +279,6 @@
|
||||
min-height: 30px;
|
||||
min-width: 80px;
|
||||
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
|
||||
}
|
||||
} // button
|
||||
|
||||
} // .forgotten-form
|
||||
@ -3,7 +3,7 @@
|
||||
// --------------------------------------------------
|
||||
// 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
|
||||
|
||||
.ghost-setup {
|
||||
@ -56,25 +56,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
// .form-group {
|
||||
// padding-left: 110px;
|
||||
|
||||
// @media (max-width: 550px) {
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
input {
|
||||
.form-group input {
|
||||
// width: 300px;
|
||||
padding: 7px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: lighten($darkgrey, 10%);
|
||||
@include transition(background ease 0.25s);
|
||||
|
||||
// @media (max-width: 550px) {
|
||||
// width: 100%;
|
||||
// }
|
||||
@include transition(background 0.25s ease);
|
||||
|
||||
&:focus {
|
||||
border:none;
|
||||
@ -91,6 +79,7 @@
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
font-size: 26px;
|
||||
letter-spacing: 0;
|
||||
color: $lightgrey;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
@ -104,7 +93,9 @@
|
||||
border: none;
|
||||
font-weight: 200;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
color: $midgrey;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 14px;
|
||||
|
||||
108
core/client/docs/dist/css/ghost-ui.css
vendored
108
core/client/docs/dist/css/ghost-ui.css
vendored
@ -3344,15 +3344,15 @@ a.badge:hover, a.badge:focus {
|
||||
@media (max-width: 550px) {
|
||||
.setup-form label {
|
||||
width: 100%; } }
|
||||
.setup-form input {
|
||||
.setup-form .form-group input {
|
||||
padding: 7px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: #3c4043;
|
||||
-webkit-transition: background ease 0.25s;
|
||||
-moz-transition: background ease 0.25s;
|
||||
transition: background ease 0.25s; }
|
||||
.setup-form input:focus {
|
||||
-webkit-transition: background 0.25s ease;
|
||||
-moz-transition: background 0.25s ease;
|
||||
transition: background 0.25s ease; }
|
||||
.setup-form .form-group input:focus {
|
||||
border: none;
|
||||
background: #484c50; }
|
||||
.setup-form input:-webkit-autofill {
|
||||
@ -3361,6 +3361,7 @@ a.badge:hover, a.badge:focus {
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
font-size: 26px;
|
||||
letter-spacing: 0;
|
||||
color: #e2edf2; }
|
||||
@media (max-width: 550px) {
|
||||
.setup-form h1 {
|
||||
@ -3371,7 +3372,9 @@ a.badge:hover, a.badge:focus {
|
||||
border: none;
|
||||
font-weight: 200;
|
||||
font-size: 16px;
|
||||
color: #7d878a; }
|
||||
letter-spacing: 0;
|
||||
color: #7d878a;
|
||||
white-space: nowrap; }
|
||||
@media (max-width: 550px) {
|
||||
.setup-form h2 {
|
||||
font-size: 14px; } }
|
||||
@ -3447,15 +3450,18 @@ a.badge:hover, a.badge:focus {
|
||||
@media (max-width: 630px) {
|
||||
.login-form {
|
||||
max-width: 264px; } }
|
||||
.login-form div {
|
||||
.login-form .email-wrap,
|
||||
.login-form .password-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 5px 0;
|
||||
background: #3c4043;
|
||||
float: left; }
|
||||
@media (max-width: 630px) {
|
||||
.login-form div {
|
||||
.login-form .email-wrap,
|
||||
.login-form .password-wrap {
|
||||
margin-bottom: 1em; } }
|
||||
.login-form input {
|
||||
.login-form .email,
|
||||
.login-form .password {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
padding: 8px 0 8px 8px;
|
||||
@ -3464,75 +3470,30 @@ a.badge:hover, a.badge:focus {
|
||||
-moz-transition: background ease 0.25s;
|
||||
transition: background ease 0.25s; }
|
||||
@media (max-width: 630px) {
|
||||
.login-form input {
|
||||
.login-form .email,
|
||||
.login-form .password {
|
||||
width: 264px;
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none; } }
|
||||
.login-form input:focus {
|
||||
.login-form .email:focus,
|
||||
.login-form .password:focus {
|
||||
border: none;
|
||||
background: #484c50; }
|
||||
.login-form .email-wrap {
|
||||
position: relative;
|
||||
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) {
|
||||
.login-form .email-wrap {
|
||||
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) {
|
||||
.login-form .email-wrap,
|
||||
.login-form .email-wrap .email,
|
||||
.login-form .password-wrap,
|
||||
.login-form .password-wrap .password {
|
||||
.login-form .email,
|
||||
.login-form .password {
|
||||
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 {
|
||||
width: 85px;
|
||||
height: 36px;
|
||||
@ -3627,25 +3588,22 @@ a.badge:hover, a.badge:focus {
|
||||
color: #a5acae;
|
||||
display: table-cell;
|
||||
vertical-align: middle; }
|
||||
.forgotten-form div {
|
||||
.forgotten-form .email-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 1em 0;
|
||||
background: #3c4043;
|
||||
float: left; }
|
||||
.forgotten-form input {
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
width: 100%; }
|
||||
.forgotten-form .email {
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
-webkit-transition: background ease 0.25s;
|
||||
-moz-transition: background ease 0.25s;
|
||||
transition: background ease 0.25s; }
|
||||
.forgotten-form input:focus {
|
||||
.forgotten-form .email:focus {
|
||||
border: none;
|
||||
background: #484c50; }
|
||||
.forgotten-form .email-wrap {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 2px; }
|
||||
.forgotten-form .email-wrap .email {
|
||||
border-radius: 2px; }
|
||||
.forgotten-form button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
|
||||
4
core/client/docs/dist/css/ghost-ui.min.css
vendored
4
core/client/docs/dist/css/ghost-ui.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user