From 171e205785295f8b232354cb403744b371801031 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Wed, 30 Jul 2014 10:56:43 +0300 Subject: [PATCH] Auth --- ghost/admin/assets/sass/layouts/auth.scss | 325 ++++++++++++++++++++++ ghost/admin/assets/sass/screen.scss | 1 + 2 files changed, 326 insertions(+) create mode 100644 ghost/admin/assets/sass/layouts/auth.scss diff --git a/ghost/admin/assets/sass/layouts/auth.scss b/ghost/admin/assets/sass/layouts/auth.scss new file mode 100644 index 0000000000..eb7542c193 --- /dev/null +++ b/ghost/admin/assets/sass/layouts/auth.scss @@ -0,0 +1,325 @@ +// +// Auth +// -------------------------------------------------- +// Slug: /ghost/signin/ +// -------------------------------------------------- +// Covers styles for all auth screens, login, signup +// forgot password, and so on. + +.ghost-login, +.ghost-signup, +.ghost-forgotten, +.ghost-reset { + color: $midgrey; + background: $darkgrey; + + @media (max-width: 400px) { + background: $darkgrey; + } + + main { + top: 15px; + } + + input { + line-height: 1.4em; + font-size: 1.1em; + font-weight: 200; + border: none; + color: #fff; + background: transparent; + box-shadow: none; + margin: 0; + position: relative; + } + + input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important; + } + +} + +.login-box, +.signup-box, +.forgotten-box, +.reset-box { + max-width: 530px; + height: 90%; + margin: 0 auto; + padding: 0; + display: table; + + @media (max-width: 630px) { + max-width: 264px; + text-align: center; + } +} + + +// +// Sign In +// -------------------------------------------------- + +.login-form { + max-width: 530px; + color: lighten($midgrey, 15%); + display: table-cell; + vertical-align: middle; + + @media (max-width: 630px) { + max-width: 264px; + } + + div { // Yes. Really. + // TODO: This ^ can be improved 1000% + position: relative; + margin: 0 0 5px 0; + background: lighten($darkgrey, 10%); + float: left; + + @media (max-width: 630px) { + margin-bottom: 1em; + } + } + + // TODO: make more specific + input { + display: inline-block; + clear: both; + padding: 8px 0 8px 8px; + width: 216px; + @include transition(background ease 0.25s); + + @media (max-width: 630px) { + width: 264px; + @include transition(none); + } + + &:focus { + border: none; + background: lighten($darkgrey, 15%); + } + + } + + .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; + } + } + + @media (max-width: 630px) { + .email-wrap, + .email-wrap .email, + .password-wrap, + .password-wrap .password { + border-radius: 2px; + } + } + + + + button { + 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; + + @media (max-width: 630px) { + margin: 0; + width: 100%; + margin-bottom: 1em; + } + } + + .meta { + clear: both; + color: $midgrey; + } + + a { + color: darken($midgrey, 10%); + font-size: 0.9em; + + &:hover { + color: lighten($midgrey, 5%); + text-decoration: none; + } + } + +} // .login-form + + +// +// Signup / Reset +// -------------------------------------------------- + +.signup-form, +.reset-form { + max-width: 280px; + color: lighten($midgrey, 15%); + display: table-cell; + vertical-align: middle; + + @media (max-width: 630px) { + width: 264px; + } + + div { // Yes. Really. + // TODO: Same here as above + position: relative; + margin: 0 0 1em 0; + background: lighten($darkgrey, 10%); + float: left; + display: table; + } + + input { + width: 280px; + padding: 8px 10px; + @media (min-width: 631px) { + @include transition(background ease 0.25s); + } + + @media (max-width: 630px) { + width: 264px; + } + + &:focus { + border: none; + background: lighten($darkgrey, 15%); + } + + } + + .name-wrap { + position: relative; + border-radius: 2px; + + .name { + border-radius: 2px; + } + } + + .email-wrap { + position: relative; + border-radius: 2px; + + .email { + border-radius: 2px; + } + } + + .password-wrap { + position: relative; + border-radius: 2px; + + .password { + border-radius: 2px; + } + } + + button { + width: 100%; + height: 36px; + margin: 0 0 1em 0; + padding: 0.5em 1.37em; + min-height: 30px; + min-width: 80px; + box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset; + } + +} // .signup-form, .reset-form + + +// +// Forgot Password +// -------------------------------------------------- + +.forgotten-form { + max-width: 280px; + color: lighten($midgrey, 15%); + display: table-cell; + vertical-align: middle; + + div { // Yes. Really. + // TODO: Again, can make this better. + position: relative; + margin: 0 0 1em 0; + background: lighten($darkgrey, 10%); + float: left; + } + + input { + padding: 8px 10px; + @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; + } + } + + button { + width: 100%; + height: 36px; + margin: 0 0 1em 0; + padding: 0.5em 1.37em; + min-height: 30px; + min-width: 80px; + box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset; + } + +} // .forgotten-form \ No newline at end of file diff --git a/ghost/admin/assets/sass/screen.scss b/ghost/admin/assets/sass/screen.scss index f8a8655ba4..5854420a60 100644 --- a/ghost/admin/assets/sass/screen.scss +++ b/ghost/admin/assets/sass/screen.scss @@ -45,5 +45,6 @@ @import "layouts/default"; @import "layouts/setup"; +@import "layouts/auth"; @import "layouts/users"; @import "layouts/about";