Merge pull request #12412 from grafana/12393_login

login: fix layout issues

public/sass/components/_footer.scss

@@ -25,7 +25,7 @@
     display: inline-block;
     display: inline-block;
     padding-right: 2px;
     padding-right: 2px;
     &::after {
     &::after {
-      content: " | ";
+      content: ' | ';
       padding-left: 2px;
       padding-left: 2px;
     }
     }
   }
   }
@@ -33,14 +33,21 @@
   li:last-child {
   li:last-child {
     &::after {
     &::after {
       padding-left: 0;
       padding-left: 0;
-      content: "";
+      content: '';
     }
     }
   }
   }
 }
 }
 
 
 .login-page {
 .login-page {
   .footer {
   .footer {
-    position: absolute;
+    padding: 1rem 0 1rem 0;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .footer {
     bottom: $spacer;
     bottom: $spacer;
+    position: absolute;
+    padding: 5rem 0 1rem 0;
   }
   }
 }
 }

public/sass/pages/_login.scss

 $login-border: #8daac5;
 $login-border: #8daac5;
 
 
 .login {
 .login {
-  background-position: center;
   min-height: 85vh;
   min-height: 85vh;
-  height: 80vh;
+  background-position: center;
   background-repeat: no-repeat;
   background-repeat: no-repeat;
   min-width: 100%;
   min-width: 100%;
   margin-left: 0;
   margin-left: 0;
@@ -95,7 +94,7 @@ select:-webkit-autofill:focus {
   position: relative;
   position: relative;
   justify-content: center;
   justify-content: center;
   z-index: 1;
   z-index: 1;
-  height: 320px;
+  min-height: 320px;
 }
 }
 
 
 .login-branding {
 .login-branding {
@@ -106,6 +105,7 @@ select:-webkit-autofill:focus {
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
   flex-grow: 0;
   flex-grow: 0;
+  padding-top: 2rem;
 
 
   .logo-icon {
   .logo-icon {
     width: 70px;
     width: 70px;
@@ -127,7 +127,7 @@ select:-webkit-autofill:focus {
 
 
 .login-inner-box {
 .login-inner-box {
   text-align: center;
   text-align: center;
-  padding: 2rem 4rem;
+  padding: 2rem;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
@@ -243,7 +243,7 @@ select:-webkit-autofill:focus {
   justify-content: space-between;
   justify-content: space-between;
 
 
   .login-divider-line {
   .login-divider-line {
-    width: 110px;
+    width: 100px;
     height: 10px;
     height: 10px;
     border-bottom: 1px solid $login-border;
     border-bottom: 1px solid $login-border;
 
 
@@ -323,7 +323,10 @@ select:-webkit-autofill:focus {
     width: 35%;
     width: 35%;
     padding: 4rem 2rem;
     padding: 4rem 2rem;
     border-right: 1px solid $login-border;
     border-right: 1px solid $login-border;
-    justify-content: flex-start;
+
+    .logo-icon {
+      width: 80px;
+    }
   }
   }
 
 
   .login-inner-box {
   .login-inner-box {
@@ -331,14 +334,18 @@ select:-webkit-autofill:focus {
     padding: 1rem 2rem;
     padding: 1rem 2rem;
   }
   }
 
 
-  .login-branding {
-    .logo-icon {
-      width: 80px;
+  .login-divider {
+    .login-divider-line {
+      width: 110px;
     }
     }
   }
   }
 }
 }
 
 
 @include media-breakpoint-up(md) {
 @include media-breakpoint-up(md) {
+  .login {
+    min-height: 100vh;
+  }
+
   .login-content {
   .login-content {
     flex: 1 0 100%;
     flex: 1 0 100%;
   }
   }
@@ -373,10 +380,6 @@ select:-webkit-autofill:focus {
 }
 }
 
 
 @include media-breakpoint-up(lg) {
 @include media-breakpoint-up(lg) {
-  .login {
-    min-height: 100vh;
-  }
-
   .login-form-input {
   .login-form-input {
     min-width: 300px;
     min-width: 300px;
   }
   }