- {this.renderHeaderTitle(this.props.model.main)}
- {this.props.model.main.children &&
+
-
+
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 48c94640fc5..29988eb8f05 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -1,85 +1,73 @@
-
-
-
diff --git a/public/app/partials/reset_password.html b/public/app/partials/reset_password.html
index f6caeef2a66..b6517a6670b 100644
--- a/public/app/partials/reset_password.html
+++ b/public/app/partials/reset_password.html
@@ -1,71 +1,31 @@
-
-
-
- 
- -
-
+- -
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Or Login With
-
-
- 
-
-
-
-
-
+
+
+
+
+
+
+
+
+ or
+
+
+
+
+
+
+
+
+
+ Sign in with Google
+
+
+
+ Sign in with GitHub
+
+
+
+ Sign in with Grafana.com
+
+
+
+ Sign in with {{oauth.generic_oauth.name}}
+
+
+
+
+
+ New to Grafana?
+
+
+ Sign Up
+
+
+
-
-
-
- -
-
- - -
-
-
-
-
diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html
index 1a9b195c764..0cebd794381 100644
--- a/public/app/partials/signup_invited.html
+++ b/public/app/partials/signup_invited.html
@@ -3,10 +3,10 @@
+
-
-
+
+
+
diff --git a/public/app/partials/signup_step2.html b/public/app/partials/signup_step2.html
index b0e6c6ad88a..865c37c4c26 100644
--- a/public/app/partials/signup_step2.html
+++ b/public/app/partials/signup_step2.html
@@ -1,73 +1,49 @@
-
+
\ No newline at end of file
diff --git a/public/img/heatmap_bg_test.svg b/public/img/heatmap_bg_test.svg
new file mode 100644
index 00000000000..bda9b387082
--- /dev/null
+++ b/public/img/heatmap_bg_test.svg
@@ -0,0 +1,4620 @@
+
+
+
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index d031a0485f6..2b713c793d4 100644
--- a/public/sass/_variables.scss
+++ b/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;
@@ -235,3 +237,25 @@ $panel-padding: 0px 10px 5px 10px;
// tabs
$tabs-padding: 10px 15px 9px;
+$external-services: (
+ github: (
+ bgColor: #464646,
+ borderColor: #393939,
+ icon: ''
+ ),
+ google: (
+ bgColor: #e84d3c,
+ borderColor: #b83e31,
+ icon: ''
+ ),
+ grafanacom: (
+ bgColor: inherit,
+ borderColor: #393939,
+ icon: ''
+ ),
+ oauth: (
+ bgColor: inherit,
+ borderColor: #393939,
+ icon: ''
+ )
+) !default;
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index 5ede8cff740..7ef691bca16 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -63,6 +63,10 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
}
+.gicon-branding {
+ background-image: url('../img/grafana_icon.svg');
+}
+
.sidemenu {
.gicon-dashboard {
background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
@@ -70,6 +74,4 @@
.gicon-alert {
background-image: url('../img/icons_dark_theme/icon_alert.svg');
}
-}
-
-
+}
\ No newline at end of file
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index a53d35fc1da..2fec0adea51 100644
--- a/public/sass/components/_buttons.scss
+++ b/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,57 @@
}
}
+// Extra padding
+.btn-p-x-2 {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+// External services
+// Usage:
+//
-
+
+
+
+
+ You're almost there.
+
+ We just need a couple of more bits of
information to finish creating your account. +
+ information to finish creating your account. +
+ Your name
+
+
+
+ Email
+
+
+
+ Password
+
+
+
+
+
+
+ Button text
+
+$btn-service-icon-width: 35px;
+.btn-service {
+ position: relative;
+}
+
+@each $service, $data in $external-services {
+ $serviceBgColor: map-get($data, bgColor);
+ $serviceBorderColor: map-get($data, borderColor);
+
+ .btn-service--#{$service} {
+ background-color: $serviceBgColor;
+ border: 1px solid $serviceBorderColor;
+
+ .btn-service-icon {
+ font-size: 24px; // Override
+ border-right: 1px solid $serviceBorderColor;
+ }
+ }
+}
+
+.btn-service-icon {
+ position: absolute;
+ left: 0;
+ height: 100%;
+ top: 0;
+ padding-left: .5rem;
+ padding-right: .5rem;
+ width: $btn-service-icon-width;
+ text-align: center;
+
+ &::before {
+ position: relative;
+ top: 4px;
+ }
+}
+
+.btn-service--grafanacom {
+ .btn-service-icon {
+ background-image: url(/public/img/grafana_mask_icon_white.svg);
+ background-repeat: no-repeat;
+ background-position: 50%;
+ background-size: 60%;
+ }
+}
\ No newline at end of file
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 2b3426b45b5..6c27cd864f4 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,42 +1,111 @@
-.login-container {
- background-position: left;
- background-size: 60%;
+$login-border: #8daac5;
+
+.login {
+ background-position: center;
+ min-height: 85vh;
background-repeat: no-repeat;
min-width: 100%;
margin-left: 0;
- margin-top: -26px; /* BAD HACK - experiement to see how it looks */
- padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
+ background-color: $black;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-image: url(../img/heatmap_bg_test.svg);
+ background-size: cover;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+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: $gray-7 !important;
+}
+
+.login-form-group {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ align-items: center;
+ margin-bottom: 1rem;
}
.login-form {
- display: inline-block;
- max-width: 24rem;
+ margin-bottom: 1rem;
+ width: 100%;
}
-.login-box {
- max-width: 700px;
- margin: 0 auto; /* was $spacer * 2 auto 0 auto; */
-}
+.login-form-input {
+ border: 1px solid $login-border;
+ border-radius: 4px;
+ opacity: .6;
-.login-box-logo {
- text-align: center;
- margin-bottom: $spacer * 2;
- img {
- width: 6rem;
+ &:focus {
+ border: 1px solid $login-border;
}
+}
+
+.login-button-group {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content:space-between;
+ width: 100%;
+ margin-top: .5rem
+}
+
+.login-button-forgot-password {
+ padding-top: 1rem;
+}
+
+.login-text {
+ font-size: $font-size-sm;
+}
+
+.login-content {
+ max-width: 700px;
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+}
+
+.login-branding {
+ width: 100%;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 0;
+
+ .logo-icon {
+ width: 70px;
+ margin-bottom: 15px;
+ }
+
.icon-gf-grafana_wordmark {
color: $link-color;
position: relative;
- top: -4.5rem;
- font-size: 2.5rem;
- text-shadow: 3px 3px 5px black;
+ font-size: 2rem;
+ text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
}
.login-inner-box {
- background: $panel-bg;
text-align: center;
- padding-bottom: 3rem;
+ padding: 2rem 4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1;
+ max-width: 415px;
}
.login-tab-header {
@@ -45,6 +114,12 @@
margin-bottom: 3rem;
}
+.btn-signup {
+ color: $white;
+ border: 1px solid $login-border;
+ background-color: $btn-semi-transparent;
+}
+
.btn-login-tab {
background: transparent;
border: none;
@@ -98,30 +173,7 @@
}
.login-oauth {
-
- .btn {
- margin: 5px;
- }
-
- .btn-google {
- background: #dd4b39;
- color: white;
- }
-
- .btn-github {
- background: #555;
- color: white;
- }
-
- .btn-grafana-com {
- @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
- box-shadow: $card-shadow;
-
- img {
- width: 19px;
- vertical-align: sub;
- }
- }
+ width: 100%;
}
.password-recovery {
@@ -134,13 +186,15 @@
.login-divider {
float: left;
- width: 50%;
- margin: 5px 25% 25px 25%;
+ width: 100%;
+ margin: 0 25% 1rem 25%;
+ display: flex;
+ justify-content: space-between;
.login-divider-line {
- width: 100%;
+ width: 110px;
height: 10px;
- border-bottom: 1px solid $gray-1;
+ border-bottom: 1px solid $login-border;
.login-divider-text {
background-color: $panel-bg;
@@ -150,6 +204,25 @@
}
}
+.login-signup-box {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ width: 100%;
+ margin-top: 1rem
+}
+
+.login-signup-title {
+ justify-self: flex-start;
+ flex: 1;
+ text-align: left;
+}
+
+.login-btn {
+ width: 100%;
+ margin: 0 0 1rem;
+}
+
.signup-page-background {
position: fixed;
top: 0;
@@ -190,14 +263,171 @@
}
}
-@include media-breakpoint-up(md) {
- .login-box-logo {
- img {
- width: 125px;
- }
- .icon-gf-grafana_wordmark {
- top: -5px;
- font-size: 3rem;
+@include media-breakpoint-up(sm) {
+ .login-content {
+ flex-direction: row;
+ }
+
+ .login-branding {
+ width: 35%;
+ padding: 4rem 2rem;
+ border-right: 1px solid $login-border;
+ justify-content: flex-start;
+ }
+
+ .login-inner-box {
+ width: 65%;
+ padding: 1rem 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;
+ }
+}
+
+
+login-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ perspective: 1000px;
+
+ .login-bg {
+ width: 4%;
+ height: 10px;
+ // background: hotpink;
+ // border:1px solid #0F1926;
+ float: left;
+ transition: 1s ease-in-out;
+ z-index: 1;
+ transform-style: preserve-3d;
+
+ &.login-bg-flip {
+ transform: rotateY(180deg);
+ }
+
+
+ &:before, &:after {
+ backface-visibility: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ content: '';
+ display: block;
+ }
+
+ &:before {
+ z-index: 2;
+ transform: rotateY(0deg);
+ background-color: #215392;
+ }
+
+ &:after {
+ transform: rotateY(180deg);
+ background-color: rgb(25, 50, 80);
+ }
+
+ &:nth-child(3n+0) {
+ &:before {
+ background-color: #0f253c;
+ }
+ &:after {
+ background-color: blue;
+ }
+ }
+
+
+ &:nth-child(3n+1) {
+ &:before {
+ background-color: #102438;
+ }
+ &:after {
+ background-color: blue;
+ }
+ }
+
+ &:nth-child(3n+2) {
+ &:before {
+ background-color: #19314e;
+ }
+ &:after {
+ background-color: blue;
+ }
+ }
+
+ &:nth-child(3n+3) {
+ &:before {
+ background-color: #215392;
+ }
+ &:after {
+ background-color: blue;
+ }
+ }
+
+ // &:nth-child(3n+5) {
+ // &:before {
+ // background-color: hotpink;
+ // }
+ // &:after {
+ // background-color: blue;
+ // }
+ // }
+
+
+
+ }
+}
+
+login-bg-fx {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ background-image: -webkit-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(18, 22, 29, 1) 100%);
+ z-index:2;
+}
diff --git a/public/sass/pages/_signup.scss b/public/sass/pages/_signup.scss
index 7b2b0b0e84a..e037b9a4960 100644
--- a/public/sass/pages/_signup.scss
+++ b/public/sass/pages/_signup.scss
@@ -15,3 +15,8 @@
}
}
+.signup__password-strength {
+ position: absolute;
+ margin-left: 9rem;
+ width: 194px;
+}
\ No newline at end of file