diff options
author | Bryce Johnson <bryce@gitlab.com> | 2016-09-09 15:21:00 +0300 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2016-10-15 09:27:21 +0300 |
commit | 1dd826d4aad2ce6c195bad24b458b1967b74db1d (patch) | |
tree | eca6776fe8b6221e5db79e6e99f2574cb18b52c9 /app/assets/stylesheets/pages/login.scss | |
parent | 602cac526d55d10ef05558c296ce7f27205801cc (diff) |
Make UX upgrades to SignIn/Register views.
- Tab between register and sign in forms
- Add individual input validation error messages
- Validate username
- Update many styles for all login-box forms
Diffstat (limited to 'app/assets/stylesheets/pages/login.scss')
-rw-r--r-- | app/assets/stylesheets/pages/login.scss | 138 |
1 files changed, 126 insertions, 12 deletions
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 47d112dbbe3..06b90fbefab 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -17,6 +17,7 @@ line-height: 1.5; p { + font-size: 18px; color: #888; } @@ -36,10 +37,13 @@ } } + p { + font-size: 13px; + } .login-box { - background: #fafafa; - border-radius: 10px; - box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 0 1px $border-color; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; padding: 15px; .login-heading h3 { @@ -74,7 +78,6 @@ .nav .active a { background: transparent; } - } .form-control { font-size: 14px; @@ -92,18 +95,109 @@ border-top: 0; margin-bottom: 20px; } + } + + // Styles the glowing border of focused input for username async validation + .login-body { + font-size: 13px; + + + input + p { + margin-top: 5px; + } + + .gl-field-success-outline { + border: 1px solid $green-normal; + + &:focus { + box-shadow: 0 0 0 1px $green-normal inset, 0 0 4px 0 $green-normal; + border: 0 none; + } + } + + .gl-field-error-outline { + border: 1px solid $red-normal; + + &:focus { + opacity: .6; + box-shadow: 0 0 0 1px $red-normal inset, 0 0 4px 0 $red-normal; + border: 0 none; + } + } + + .username .validation-success, + .gl-field-success-message { + color: $green-normal; + } + + .username .validation-error, + .gl-field-error-message { + color: $red-normal; + } + + .gl-field-hint { + color: $gl-text-color; + } + + } + + .new-session-tabs { // Are these being applied to other login-related screens? They need to be. + display: flex; + box-shadow: 0 0 0 1px $border-color; + border-top-right-radius: 2px; + border-top-left-radius: 2px; + + li { + flex: 1; + text-align: center; &.middle { border-top: 0; margin-bottom: 0; border-radius: 0; + &:last-of-type { + border-left: 1px solid $border-color; + } + + &:not(.active) { + background-color: $gray-light; + } + + a { + width: 100%; + font-size: 18px; + &:hover { + border: 1px solid transparent; + } + } + + &.active { + border-bottom: 1px solid $border-color; + + a { + border: none; + border-bottom: 2px solid $link-underline-blue; + color: $black; + + &:hover { + border-bottom: 2px solid $link-underline-blue; + } + } + } } + } + + .form-control { &:active, &:focus { background-color: #fff; } } + label { + font-weight: normal; + } + .devise-errors { h2 { margin-top: 0; @@ -111,14 +205,6 @@ color: #a00; } } - - .remember-me { - margin-top: -10px; - - label { - font-weight: normal; - } - } } @media (max-width: $screen-xs-max) { @@ -137,3 +223,31 @@ height: 32px; } } + +.devise-layout-html { + margin: 0; + padding: 0; + height: 100%; +} + +// Fixes footer container to bottom of viewport +.devise-layout-html body { + // offset height of fixed header + 1 to avoid scroll + height: calc(100% - 51px); + margin: 0; + padding: 0; + + .page-wrap { + min-height: 100%; + position: relative; + } + + .footer-container, hr.footer-fixed { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 40px; + background: $white-light; + } +} |