ux: wip - Push pixels for new login, remove inline styling, change so we use media queries using min-width instead of max-width and make sure it looks ok across all screen sizes (#9879)

public/app/partials/login.html

@@ -1,40 +1,30 @@
-<div class="login-container container">
-
-  <div class="login-box">
-
-    <div class="login-box-logo">
+<div class="login container">
+  <div class="login-content">
+    <div class="login-branding">
       <img class="logo-icon" src="public/img/grafana_icon.svg"></img>
-      <br>
       <i class="icon-gf icon-gf-grafana_wordmark"></i>
-
     </div>
-
     <div class="login-inner-box">
-
       <form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
         <div class="login-form">
           <input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
             autofocus>
         </div>
-
         <div class="login-form">
           <input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"
             placeholder="password">
         </div>
-
         <div class="login-button-group">
-          <button type="submit" class="btn btn-medium p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
-            Login
+          <button type="submit" class="btn btn-large p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
+            Log In
           </button>
-          <div class="small" style="display:flex; align-items:center">
-            <a href="user/password/send-reset-email">
-              Forgot your password?
-            </a>
+            <div class="small login-button-forgot-password">
+              <a href="user/password/send-reset-email">
+                Forgot your password?
+              </a>
           </div>
         </div>
-
       </form>
-
       <div class="text-center login-divider" ng-show="oauthEnabled">
         <div>
           <div class="login-divider-line">
@@ -42,7 +32,7 @@
         </div>
         <div>
           <span class="login-divider-text">
-            <span ng-hide="disableLoginForm">Or</span>
+            <span ng-hide="disableLoginForm">or</span>
           </span>
         </div>
         <div>
@@ -50,10 +40,8 @@
           </div>
         </div>
       </div>
-
       <div class="clearfix"></div>
-
-      <div class="login-oauth text-center" ng-show="oauthEnabled" style="width:100%">
+      <div class="login-oauth text-center" ng-show="oauthEnabled">
         <a class="btn btn-medium btn-google login-btn" href="login/google" target="_self" ng-if="oauth.google">
           Sign in with Google
         </a>
@@ -67,17 +55,15 @@
           Sign in with {{oauth.generic_oauth.name}}
         </a>
       </div>
-
       <div class="login-signup-box">
-        <div style="padding-right:1rem">
-          New user?
+        <div class="login-signup-title p-r-1">
+          New to Grafana?
         </div>
-        <a class="btn btn-medium" style="color:#fafafa; border: 1px solid #fafafa">
-          Sign up
+        <a class="btn btn-medium btn-signup btn-p-x-2">
+          Sign Up
         </a>
       </div>
     </div>
-
     <div class="clearfix"></div>
   </div>
 </div>

public/sass/_variables.scss

@@ -224,6 +224,8 @@ $btn-padding-y-xl:               11px !default;
 
 $btn-border-radius:              2px;
 
+$btn-semi-transparent: rgba(0,0,0,0.2) !default;
+
 // sidemenu
 $side-menu-width:  60px;
 

public/sass/components/_buttons.scss

@@ -92,6 +92,7 @@
 .btn-warning {
   @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
 }
+
 // Danger and error appear as red
 .btn-danger {
   @include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
@@ -142,4 +143,7 @@
   }
 }
 
-
+.btn-p-x-2 {
+  padding-left: 20px;
+  padding-right: 20px;
+}

public/sass/pages/_login.scss

@@ -1,10 +1,12 @@
-.login-container {
-  background-position: left;
-  min-height: 100%;
+$login-border: #8daac5;
+
+.login {
+  background-position: center;
+  min-height: 85vh;
   background-repeat: no-repeat;
   min-width: 100%;
   margin-left: 0;
-  background-color: #000;
+  background-color: $black;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -22,8 +24,8 @@ textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0px 1000px black inset;
-  -webkit-text-fill-color: #fafafa !important;
+  -webkit-box-shadow: 0 0 0px 1000px $black inset;
+  -webkit-text-fill-color: $gray-7 !important;
 }
 
 .login-form-group {
@@ -34,50 +36,62 @@ select:-webkit-autofill:focus {
 }
 
 .login-form {
-  margin-bottom: .5rem;
+  margin-bottom: 1rem;
   width: 100%;
 }
 
 .login-form-input {
-  border: 1px solid #fafafa !important;
-  border-radius: 4px !important;
+  border: 1px solid $login-border;
+  border-radius: 4px;
   opacity: .6;
+
+  &:focus {
+    border: 1px solid $login-border;
+  }
 }
 
 .login-button-group {
-  display:flex;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content:space-between;
   width: 100%;
-  margin-top: 1rem
+  margin-top: .5rem
+}
+
+.login-button-forgot-password {
+  padding-top: 1rem;
 }
 
 .login-text {
   font-size: $font-size-sm;
 }
 
-.login-box {
+.login-content {
   max-width: 700px;
   display: flex;
   align-items: stretch;
-  flex-direction: row;
+  flex-direction: column;
 }
 
-.login-box-logo {
-  width: 45%;
-  padding: 4rem;
+.login-branding {
+  width: 100%;
   display: flex;
+  flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border-right: 1px solid #fafafa;
-  img {
-    width: 10rem;
+  flex-grow: 0;
+
+  .logo-icon {
+    width: 70px;
+    margin-bottom: 15px;
   }
+
   .icon-gf-grafana_wordmark {
     color: $link-color;
     position: relative;
-    font-size: 4rem;
+    font-size: 2rem;
     text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
   }
 }
@@ -87,9 +101,9 @@ select:-webkit-autofill:focus {
   padding: 2rem 4rem;
   display: flex;
   flex-direction: column;
-  width: 55%;
   align-items: center;
   justify-content: center;
+  flex-grow: 1;
 }
 
 .login-tab-header {
@@ -98,6 +112,12 @@ select:-webkit-autofill:focus {
   margin-bottom: 3rem;
 }
 
+.btn-signup {
+  color: $white;
+  border: 1px solid $login-border;
+  background-color: $btn-semi-transparent;
+}
+
 .btn-login-tab {
   background: transparent;
   border: none;
@@ -151,9 +171,10 @@ select:-webkit-autofill:focus {
 }
 
 .login-oauth {
+  width: 100%;
 
   .btn {
-    margin: 5px;
+    margin: 10px 0 0;
   }
 
   .btn-google {
@@ -195,7 +216,7 @@ select:-webkit-autofill:focus {
   .login-divider-line {
     width: 110px;
     height: 10px;
-    border-bottom: 1px solid #fafafa;
+    border-bottom: 1px solid $gray-7;
 
     .login-divider-text {
       background-color: $panel-bg;
@@ -213,6 +234,12 @@ select:-webkit-autofill:focus {
   margin-top: 2rem
 }
 
+.login-signup-title {
+  justify-self: flex-start;
+  flex: 1;
+  text-align: left;
+}
+
 .login-btn {
   width: 100%; margin: 0 0 1rem;
 }
@@ -257,38 +284,65 @@ select:-webkit-autofill:focus {
   }
 }
 
-@include media-breakpoint-down(md) {
-  .login-box-logo {
-    img {
-      width: 125px;
-    }
-    .icon-gf-grafana_wordmark {
-      top: -5px;
-      font-size: 2rem;
-    }
+@include media-breakpoint-up(sm) {
+  .login-content {
+    flex-direction: row;
   }
-}
-
-@include media-breakpoint-down(xs) {
-  .login-box {
-    flex-direction: column;
 
+  .login-branding {
+    width: 35%;
+    padding: 4rem 2rem;
+    border-right: 1px solid $login-border;
+    justify-content: flex-start;
   }
-  .login-box-logo {
-    border: none;
-    width: 100%;
-    padding: 0;
-  }
+
   .login-inner-box {
-    width: 100%;
+    width: 65%;
+    padding: 1rem 2rem;
   }
-  .login-box-logo {
-    img {
-      width: 5rem;
+
+  .login-branding {
+    .logo-icon {
+      width: 80px;
     }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .login-branding {
+    width: 45%;
+    padding: 2rem 4rem;
+
+    .logo-icon {
+      width: 100px;
+    }
+
     .icon-gf-grafana_wordmark {
-      top: -5px;
-      font-size: 2rem;
+      font-size: 3.2rem;
     }
   }
+
+  .login-inner-box {
+    width: 55%;
+    padding: 1rem 4rem;
+  }
+
+  .login-button-group {
+    flex-direction: row;
+  }
+
+  .login-button-forgot-password {
+    padding-top: 0;
+    padding-left: 10px;
+  }
 }
+
+@include media-breakpoint-up(lg) {
+  .login {
+    min-height: 100vh;
+  }
+
+  .login-form-input {
+    min-width: 300px;
+  }
+}