mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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)
This commit is contained in:
Johannes Schill
parent
84aa1e89c0
commit
f77d34f7c9
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
.icon-gf-grafana_wordmark {
|
||||
top: -5px;
|
||||
font-size: 2rem;
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user