IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): fixed login, signup, signup step2 and invite views

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-18 14:44:36 +01:00
parent 2f2326006d
commit cae975cb39
11 changed files with 163 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/sass/_variables.dark.scss
View File

@@ -141,7 +141,6 @@ $input-bg-disabled: #555;
$input-color: $gray-light;
$input-border-color: lighten($gray-dark,5%);
$input-btn-border-width: 1px;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;

3
public/sass/_variables.light.scss
View File

@@ -158,12 +158,11 @@ $input-bg-disabled: $gray-lighter;
$input-color: #020202;
$input-border-color: $gray-lighter;
$input-btn-border-width: 1px;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-label-bg: #f8f8f8;
$input-label-bg: #f8f8f8;
// Sidemenu
// -------------------------

1
public/sass/_variables.scss
View File

@@ -169,6 +169,7 @@ $input-padding-x: .75rem !default;
$input-padding-y: .6rem !default;
$input-line-height: 1.35rem !default;
$input-btn-border-width: 1px;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;

21
public/sass/components/_buttons.scss
View File

@@ -14,7 +14,7 @@
text-align: center;
vertical-align: middle;
cursor: pointer;
border: none;
border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@@ -92,6 +92,25 @@
border: 1px solid $tight-form-func-highlight-bg;
}
.btn-outline-primary {
@include button-outline-variant($btnPrimaryBackground);
}
.btn-outline-secondary {
@include button-outline-variant($btnInverseBackground);
}
.btn-outline-info {
@include button-outline-variant($btnInfoBackground);
}
.btn-outline-success {
@include button-outline-variant($btnSuccessBackground);
}
.btn-outline-warning {
@include button-outline-variant($btnWarningBackground);
}
.btn-outline-danger {
@include button-outline-variant($btnDangerBackground);
}
.btn-text {
color: $btnText;
margin: 0;

1
public/sass/components/_gf-form.scss
View File

@@ -6,6 +6,7 @@ $gf-form-margin: 0.4rem;
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
.checkbox-label {
display: inline;

47
public/sass/mixins/_buttons.scss
View File

@@ -22,3 +22,50 @@
font-size: $font-size;
@include border-radius($border-radius);
}
@mixin button-outline-variant($color) {
color: $color;
background-image: none;
background-color: transparent;
border-color: $color;
@include hover {
color: #fff;
background-color: $color;
border-color: $color;
}
&:focus,
&.focus {
color: #fff;
background-color: $color;
border-color: $color;
}
&:active,
&.active,
.open > &.dropdown-toggle {
color: #fff;
background-color: $color;
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
background-color: darken($color, 17%);
border-color: darken($color, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
}
@include hover {
border-color: lighten($color, 20%);
}
}
}

34
public/sass/pages/_login.scss
View File

@@ -1,38 +1,37 @@
.login-form {
width: 50%;
float: left;
margin-left: 25%;
margin-right: 25%;
padding-top: 25px;
display: inline-block;
max-width: 24rem;
}
.login-box {
width: 700px;
margin: 70px auto 0 auto;
max-width: 700px;
margin: $spacer * 2 auto 0 auto;
}
.login-box-logo {
text-align: center;
img {
width: 125px;
width: 6rem;
}
.icon-gf-grafana_wordmark {
color: $link-color;
position: relative;
top: -90px;
font-size: 3rem;
top: -4.5rem;
font-size: 2.5rem;
text-shadow: 3px 3px 5px black;
}
}
.login-inner-box {
background: $panel-bg;
text-align: center;
}
.login-tab-header {
background: $tight-form-bg;
text-align: center;
margin-bottom: 3rem;
}
.btn-login-tab {
@@ -145,7 +144,7 @@
text-align: center;
border: 1px solid $tight-form-func-bg;
background-color: $panel-bg;
width: 800px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
@@ -167,3 +166,16 @@
font-size: 16px;
}
}
@include media-breakpoint-up(md) {
.login-box-logo {
img {
width: 125px;
}
.icon-gf-grafana_wordmark {
top: -90px;
font-size: 3rem;
}
}
}