Commit 49688d39 authored by Bryce Johnson's avatar Bryce Johnson

Add third box shadow to validation focus, for depth.

parent 2c7a1af6
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
p { p {
font-size: 13px; font-size: 13px;
} }
.login-box { .login-box, .omniauth-container {
box-shadow: 0 0 0 1px $border-color; box-shadow: 0 0 0 1px $border-color;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
...@@ -79,69 +79,57 @@ ...@@ -79,69 +79,57 @@
background: transparent; background: transparent;
} }
.form-control { // Styles the glowing border of focused input for username async validation
font-size: 14px; .login-body {
padding: 10px 8px; font-size: 13px;
width: 100%;
height: auto;
&.top {
border-radius: 5px 5px 0 0;
margin-bottom: 0;
}
&.bottom {
border-radius: 0 0 5px 5px;
border-top: 0;
margin-bottom: 20px;
}
}
// Styles the glowing border of focused input for username async validation input + p {
.login-body { margin-top: 5px;
font-size: 13px; }
.gl-field-success-outline {
border: 1px solid $green-normal;
input + p { &:focus {
margin-top: 5px; 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 { .gl-field-error-outline {
border: 1px solid $green-normal; border: 1px solid $red-normal;
&:focus { &:focus {
box-shadow: 0 0 0 1px $green-normal inset, 0 0 4px 0 $green-normal; 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; border: 0 none;
}
} }
}
.gl-field-error-outline { .username .validation-success,
border: 1px solid $red-normal; .gl-field-success-message {
color: $green-normal;
}
&:focus { .username .validation-error,
opacity: .6; .gl-field-error-message {
box-shadow: 0 0 0 1px $red-normal inset, 0 0 4px 0 $red-normal; color: $red-normal;
border: 0 none;
} }
}
.username .validation-success, .gl-field-hint {
.gl-field-success-message { color: $gl-text-color;
color: $green-normal; }
}
.username .validation-error,
.gl-field-error-message {
color: $red-normal;
} }
}
.gl-field-hint { .omniauth-container {
color: $gl-text-color; p {
margin: 0;
} }
} }
.new-session-tabs {
.new-session-tabs { // Are these being applied to other login-related screens? They need to be. display: -webkit-flex;
display: flex; display: flex;
box-shadow: 0 0 0 1px $border-color; box-shadow: 0 0 0 1px $border-color;
border-top-right-radius: 2px; border-top-right-radius: 2px;
...@@ -151,10 +139,6 @@ ...@@ -151,10 +139,6 @@
flex: 1; flex: 1;
text-align: center; text-align: center;
&.middle {
border-top: 0;
margin-bottom: 0;
border-radius: 0;
&:last-of-type { &:last-of-type {
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
} }
...@@ -204,7 +188,7 @@ ...@@ -204,7 +188,7 @@
input[type="submit"] { input[type="submit"] {
@extend .btn-block; @extend .btn-block;
margin-bottom: 0px; margin-bottom: 0;
} }
.devise-errors { .devise-errors {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment