diff options
author | Bryce Johnson <bryce@gitlab.com> | 2016-09-27 15:06:18 +0300 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2016-10-15 09:28:52 +0300 |
commit | 49688d399a3b3c7d3ec50ae0bb728ff0d25671b0 (patch) | |
tree | a0954dde9e618580cf233c5204e1ef6a248f547c /app/assets/stylesheets/pages/login.scss | |
parent | 2c7a1af66f45e475b5aa7b8b91e7f8c85134a762 (diff) |
Add third box shadow to validation focus, for depth.
Diffstat (limited to 'app/assets/stylesheets/pages/login.scss')
-rw-r--r-- | app/assets/stylesheets/pages/login.scss | 90 |
1 files changed, 37 insertions, 53 deletions
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index b235eb845b0..f1d15417705 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -40,7 +40,7 @@ p { font-size: 13px; } - .login-box { + .login-box, .omniauth-container { box-shadow: 0 0 0 1px $border-color; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; @@ -79,69 +79,57 @@ background: transparent; } - .form-control { - font-size: 14px; - padding: 10px 8px; - width: 100%; - height: auto; - - &.top { - border-radius: 5px 5px 0 0; - margin-bottom: 0; - } + // Styles the glowing border of focused input for username async validation + .login-body { + font-size: 13px; - &.bottom { - border-radius: 0 0 5px 5px; - 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; - input + p { - margin-top: 5px; - } + &:focus { + box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal; + border: 0 none; + } + } - .gl-field-success-outline { - border: 1px solid $green-normal; + .gl-field-error-outline { + border: 1px solid $red-normal; - &:focus { - box-shadow: 0 0 0 1px $green-normal inset, 0 0 4px 0 $green-normal; - border: 0 none; + &:focus { + box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6); + border: 0 none; + } } - } - .gl-field-error-outline { - border: 1px solid $red-normal; + .username .validation-success, + .gl-field-success-message { + color: $green-normal; + } - &:focus { - opacity: .6; - box-shadow: 0 0 0 1px $red-normal inset, 0 0 4px 0 $red-normal; - border: 0 none; + .username .validation-error, + .gl-field-error-message { + color: $red-normal; } - } - .username .validation-success, - .gl-field-success-message { - color: $green-normal; - } + .gl-field-hint { + color: $gl-text-color; + } - .username .validation-error, - .gl-field-error-message { - color: $red-normal; } + } - .gl-field-hint { - color: $gl-text-color; + .omniauth-container { + p { + margin: 0; } - } - - .new-session-tabs { // Are these being applied to other login-related screens? They need to be. + .new-session-tabs { + display: -webkit-flex; display: flex; box-shadow: 0 0 0 1px $border-color; border-top-right-radius: 2px; @@ -151,10 +139,6 @@ flex: 1; text-align: center; - &.middle { - border-top: 0; - margin-bottom: 0; - border-radius: 0; &:last-of-type { border-left: 1px solid $border-color; } @@ -204,7 +188,7 @@ input[type="submit"] { @extend .btn-block; - margin-bottom: 0px; + margin-bottom: 0; } .devise-errors { |