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

Merged with master, I think

Browse Source
This commit is contained in:
Matt
2016-02-20 10:13:18 -05:00
parent 9d893eec01 d42bfc2570
commit ab4957684f
39 changed files with 287 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/sass/_grafana.scss
View File

@@ -22,6 +22,7 @@
@import "utils/validation";
@import "utils/angular";
@import "utils/spacings";
@import "utils/widths";
// LAYOUTS
@import "layout/page";

6
public/sass/_old_responsive.scss
View File

@@ -17,7 +17,7 @@
body {
padding: 0;
}
.dashnav-dashboards-btn a {
.page-dashboard .navbar-page-btn {
max-width: 200px;
}
.gf-timepicker-nav-btn {
@@ -34,7 +34,7 @@
// form styles
@include media-breakpoint-up(md) {
.dashnav-dashboards-btn a {
.page-dashboard .navbar-page-btn {
max-width: 180px;
}
.gf-timepicker-nav-btn {
@@ -51,7 +51,7 @@
}
@include media-breakpoint-up(lg) {
.dashnav-dashboards-btn a {
.page-dashboard .navbar-page-btn {
max-width: 290px;
}
.gf-timepicker-nav-btn {

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

@@ -8,17 +8,17 @@ $black: #000;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #262626;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #6e7580;
$gray-2: #7B7B7B;
$gray-3: #b3b3b3;
$gray-4: #cfd4d9;
$gray-5: #e8edf0;
$gray-6: #f7f9fa;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$white: #fff;
@@ -50,7 +50,6 @@ $critical: #ed2e18;
// -------------------------
$body-bg: rgb(20,20,20);
$page-bg: $dark-2;
$pageImageUrl: '../img/angle_gradient_rev.png';
$body-color: $gray-4;
$text-color: $gray-4;
@@ -75,7 +74,6 @@ $hr-border-color: rgba(0,0,0,.1) !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$panel-bg: $dark-2;
@@ -94,8 +92,8 @@ $modal-background: $black;
$code-tag-bg: #444;
// Lists
$grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black;
$grafanaListHighlight: #333;
@@ -120,22 +118,19 @@ $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 8%);
$btn-secondary-bg-hl: lighten($blue-dark, 3%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg: lighten($green, 3%);
$btn-warning-bg: $brand-warning;
$btn-warning-bg-hl: lighten($brand-warning, 8%);
$btn-warning-bg-hl: lighten($brand-warning, 8%);
$btn-danger-bg: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%);
$btn-inverse-bg: $dark-3;
$btn-inverse-bg-hl: lighten($dark-3, 1%);
$btn-inverse-bg-hl: lighten($dark-3, 1%);
$btn-inverse-text-color: $link-color;
$btn-link-color: $gray-3;
@@ -231,7 +226,7 @@ $successText: #468847;
$successBackground: $btn-success-bg;
$infoText: $blue-dark;
$infoBackground: $btn-info-bg;
$infoBackground: $blue-dark;
// Tooltips and popovers
// -------------------------

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

@@ -13,9 +13,9 @@ $black: #000;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #262626;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
@@ -31,7 +31,7 @@ $white: #fff;
// Accent colors
// -------------------------
$blue: #2AB2E4;
$blue-dark: #75CAEB;
$blue-dark: #3CAAD6;
$green: #28B62C;
$red: #FF4136;
$yellow: #FF851B;
@@ -54,9 +54,8 @@ $critical: #EC2128;
// Scaffolding
// -------------------------
$body-bg: $white;
$page-bg: $white;
$pageImageUrl: '../img/angle_gradient_light_rev.png';
$body-bg: $white;
$page-bg: $white;
$body-color: $gray-1;
$text-color: $gray-1;
@@ -81,7 +80,6 @@ $hr-border-color: $dark-3 !default;
$component-active-color: $white !default;
$component-active-bg: $brand-primary !default;
// Panel
// -------------------------
@@ -128,10 +126,7 @@ $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 8%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btn-secondary-bg-hl: lighten($blue-dark, 4%);
$btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
@@ -255,8 +250,8 @@ $successText: lighten($green, 10%);
$successBackground: $green;
$successBorder: transparent;
$infoText: lighten($purple,10%);
$infoBackground: $purple;
$infoText: $blue;
$infoBackground: $blue-dark;
$infoBorder: transparent;
@@ -278,6 +273,4 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25);
// images
$checkboxImageUrl: '../img/checkbox_white.png';
$checkboxImageUrl: '../img/checkbox_white.png';

14
public/sass/_variables.scss
View File

@@ -77,17 +77,6 @@ $grid-gutter-width: 30px !default;
$enable-flex: false;
$form-sizes: (
xs: 5.7rem,
sm: 7rem,
md: 8.5rem,
lg: 10rem,
xl: 14rem,
xxl: 21rem,
xxxl: 28rem
) !default;
// Typography
// -------------------------
@@ -189,6 +178,7 @@ $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-pa
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$form-group-margin-bottom: $spacer-y !default;
$gf-form-margin: 0.2rem;
$cursor-disabled: not-allowed !default;
@@ -225,4 +215,4 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 3px;
// sidemenu
$side-menu-width: 15rem;
$side-menu-width: 14rem;

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

@@ -65,7 +65,7 @@
}
.btn-link {
color: $btn-link-color;
color: $btn-link-color;
}
// Set the backgrounds
@@ -89,8 +89,8 @@
@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
}
// Info appears as a neutral blue
.btn-info {
@include buttonBackground($btn-info-bg, $btn-info-bg-hl);
.btn-secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}
// Inverse appears as dark gray
.btn-inverse {
@@ -103,10 +103,10 @@
@include button-outline-variant($btn-primary-bg);
}
.btn-outline-secondary {
@include button-outline-variant($btn-inverse-bg);
@include button-outline-variant($btn-secondary-bg);
}
.btn-outline-info {
@include button-outline-variant($btn-info-bg);
.btn-outline-inverse {
@include button-outline-variant($btn-inverse-bg);
}
.btn-outline-success {
@include button-outline-variant($btn-success-bg);

2
public/sass/components/_dashboard.scss
View File

@@ -58,7 +58,7 @@
.row-open {
margin-top: 5px;
left: -28px;
left: -30px;
position: absolute;
z-index: 100;
transition: .10s left;

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

@@ -59,18 +59,6 @@ $gf-form-label-margin: 0.2rem;
flex-shrink: 0;
}
@each $size, $value in $form-sizes {
.gf-size-#{$size} { width: $value; }
.gf-size-max-#{$size} {
flex-grow: 1;
max-width: $value;
}
}
.gf-size-max { width: 100%; }
.gf-size-auto { width: auto; }
.gf-form-input {
display: block;
width: 100%;

97
public/sass/components/_navbar.scss
View File

@@ -56,52 +56,30 @@
background-color: $navbarLinkBackgroundActive;
}
.fa.top-nav-breadcrumb-icon {
margin: 18px 0 6px 5px;
float: left;
font-size: 120%;
color: $text-color;
}
.top-nav-btn {
.navbar-brand-btn {
display: block;
position: relative;
float: left;
margin: 0;
font-size: 1.4em;
border-right: 1px solid $tight-form-border;
background-color: $navbarButtonBackground;
padding: 0.6rem 1.0rem 0.5rem 1rem;
.fa-caret-down {
font-size: 55%;
position: absolute;
right: 8px;
top: 23px;
margin-right: 2px;
font-size: 70%;
}
a {
color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
display: inline-block;
&:hover {
background: $navbarButtonBackgroundHighlight;
color: $link-color;
// border-bottom: 1px solid $blue;
}
&:hover {
background: $navbarButtonBackgroundHighlight;
}
}
.top-nav-menu-btn {
a {
padding: 7px 20px 6px 13px;
}
img {
width: 30px;
position: relative;
top: -2px;
}
.top-nav-logo-background {
.navbar-brand-btn-background {
display: inline-block;
border: 1px solid $body-bg;
padding: 4px;
@@ -110,6 +88,7 @@
width: 40px;
height: 40px;
}
.icon-gf-grafana_wordmark {
font-size: 21px;
position: relative;
@@ -119,13 +98,28 @@
}
}
.dashnav-dashboards-btn {
a {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
padding: 11px 17px 12px 13px;
.navbar-page-btn {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
float: left;
display: block;
margin: 0;
font-size: 1.4em;
border-right: 1px solid $tight-form-border;
color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
font-size: $font-size-lg;
padding: 1rem 0.8rem;
&:hover {
background: $navbarButtonBackgroundHighlight;
color: $link-color;
}
.fa-caret-down {
font-size: 60%;
padding-left: 0.2rem;
}
.fa-th-large {
@@ -141,32 +135,3 @@
}
}
.dashboard-title {
padding: 0 0.4rem 0 0.5rem;
font-size: $font-size-lg;
}
.top-nav-icon {
margin: 5px 0px 0 11px;
line-height: 41px;
float: left;
}
.top-nav-section {
display: block;
float: left;
padding: 19px 9px 8px 0;
font-weight: bold;
i {
padding-left: 8px;
}
}
.top-nav-title {
display: block;
float: left;
font-size: 17px;
padding: 18px 10px 10px 13px;
color: $link-color;
}

16
public/sass/components/_sidemenu.scss
View File

@@ -30,16 +30,15 @@
min-height: calc(100% - 54px);
}
.dashboard-container {
padding-left: $side-menu-width;
padding-left: $side-menu-width + 0.2rem;
}
.page-container {
margin-left: $side-menu-width;
}
.top-nav-menu-btn {
a {
background-color: $page-bg;
width: $side-menu-width;
}
.navbar-brand-btn {
background-color: $page-bg;
width: $side-menu-width;
.icon-gf-grafana_wordmark {
display: inline-block;
}
@@ -47,9 +46,6 @@
display: none;
}
}
.sidemenu-org {
box-shadow: none;
}
.search-container {
left: auto;
}
@@ -195,7 +191,7 @@
.sidemenu .fa-caret-right {
position: absolute;
top: 38%;
right: 25px;
right: 6px;
font-size: 14px;
color: $link-color;
}

3
public/sass/layout/_page.scss
View File

@@ -18,9 +18,9 @@
}
}
$color-page-hero-bg: #2e2e2e;
.page-container {
background-color: $page-bg;
background-image: url($pageImageUrl); /* this is an experiment */
background-position: left;
background-size: 60%;
background-repeat: no-repeat;
@@ -30,6 +30,7 @@
margin-left: 0;
min-height: calc(100% - 54px);
padding-bottom: $spacer * 5;
background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%);
}
.page-header {

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

@@ -1,5 +1,4 @@
.login-container {
background-image: url($pageImageUrl); /* this is an experiment */
background-position: left;
background-size: 60%;
background-repeat: no-repeat;

1
public/sass/pages/_styleguide.scss
View File

@@ -16,6 +16,7 @@
.style-guide-button-list {
padding: $spacer;
button {
display: block;
margin: 0 $spacer $spacer 0;
}
}

1
public/sass/utils/_spacings.scss
View File

@@ -28,6 +28,7 @@
}
}
// Positioning
.pos-f-t {

19
public/sass/utils/_widths.scss Normal file
View File

@@ -0,0 +1,19 @@
.max-width { width: 100%; }
.width-auto { width: auto; }
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) - $gf-form-margin;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) - $gf-form-margin;
flex-grow: 1;
}
}