1 files changed, 145 insertions, 31 deletions

diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index a5ca509163d..4c0c0839fe2 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,14 @@
     }
   }
 
-  .login-box {
-    background: #fafafa;
-    border-radius: 10px;
-    box-shadow: 0 0 2px #ccc;
+  p {
+    font-size: 13px;
+  }
+
+  .login-box, .omniauth-container {
+    box-shadow: 0 0 0 1px $border-color;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
     padding: 15px;
 
     .login-heading h3 {
@@ -58,42 +63,127 @@
 
     a.forgot {
       float: right;
-      padding-top: 6px
+      padding-top: 6px;
     }
 
     .nav .active a {
       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;
+
+
+      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 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal;
+          border: 0 none;
+        }
+      }
+
+      .gl-field-error-outline {
+        border: 1px solid $red-normal;
+
+        &: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;
+        }
+      }
+
+      .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;
+      }
+
     }
+  }
 
-    &.bottom {
-      border-radius: 0 0 5px 5px;
-      border-top: 0;
-      margin-bottom: 20px;
+  .omniauth-container {
+    p {
+      margin: 0;
     }
+  }
+
+  .new-session-tabs {
+    display: -webkit-flex;
+    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;
+
+      &:last-of-type {
+        border-left: 1px solid $border-color;
+      }
+
+      &:not(.active) {
+        background-color: $gray-light;
+      }
+
+      a {
+        width: 100%;
+        font-size: 18px;
 
-    &.middle {
-      border-top: 0;
-      margin-bottom: 0;
-      border-radius: 0;
+        &: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;
+  }
+
+  .submit-container {
+    margin-top: 16px;
+  }
+
+  input[type="submit"] {
+    @extend .btn-block;
+    margin-bottom: 0;
+  }
+
   .devise-errors {
     h2 {
       margin-top: 0;
@@ -101,14 +191,6 @@
       color: #a00;
     }
   }
-
-  .remember-me {
-    margin-top: -10px;
-
-    label {
-      font-weight: normal;
-    }
-  }
 }
 
 @media (max-width: $screen-xs-max) {
@@ -127,3 +209,35 @@
     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;
+  }
+
+  .navless-container {
+    padding: 65px; // height of footer + bottom padding of email confirmation link
+  }
+}