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

Grafana5 light (#9559)

Browse Source 
* variable for theme name for icons

* changes to navbar, sidemenu, breadcrumb, form-labels, dashlistlinks, searchitems etc

* fixed some missed issues with breadcrumbs
This commit is contained in:
Patrick O'Carroll
2017-10-18 07:49:52 +02:00
committed by Torkel Ödegaard
parent bc8c2409c0
commit 148a4c6c2d
12 changed files with 51 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
// Global values
// --------------------------------------------------
$theme-name: dark;
// Grays
// -------------------------
@@ -172,7 +173,8 @@ $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.
$input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: $gray-1 !default;
$input-label-bg: $dark-3;
$input-label-bg: #292a2d;
$input-label-border-color: transparent;
$input-invalid-border-color: lighten($red, 5%);
// Search
@@ -216,6 +218,7 @@ $navbarHeight: 52px;
$navbarBackgroundHighlight: $dark-3;
$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $body-bg;
$navbarShadow: 0 0 20px black;
$navbarText: $gray-4;
$navbarLinkColor: $gray-4;
@@ -233,6 +236,8 @@ $navbarButtonBackgroundHighlight: $body-bg;
// -------------------------
$side-menu-bg: $black;
$side-menu-item-hover-bg: $dark-2;
$side-menu-shadow: 0 0 20px black;
$breadcrumb-hover-hl: #111;
// Menu dropdowns
// -------------------------

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

@@ -6,6 +6,7 @@
// Global values
// --------------------------------------------------
$theme-name: light;
// Grays
// -------------------------
@@ -68,8 +69,8 @@ $text-shadow-faint: none;
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
$dashboard-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
$page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
$dashboard-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
// Links
// -------------------------
@@ -106,8 +107,8 @@ $panel-header-menu-hover-bg: $gray-4;
$divider-border-color: $gray-2;
// Graphite Target Editor
$tight-form-border: $gray-4;
$tight-form-bg: $gray-6;
$tight-form-border: $gray-4;
$tight-form-bg: #eaebee;
$tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6;
@@ -117,7 +118,7 @@ $code-tag-bg: $gray-6;
$code-tag-border: darken($code-tag-bg, 3%);
// Lists
$grafanaListBackground: $gray-6;
$grafanaListBackground: #eaebee;
$grafanaListAccent: $gray-5;
$grafanaListBorderTop: $gray-3;
$grafanaListBorderBottom: $gray-3;
@@ -178,13 +179,15 @@ $input-box-shadow: none;
$input-border-focus: $blue !default;
$input-box-shadow-focus: $blue !default;
$input-color-placeholder: $gray-4 !default;
$input-label-bg: $gray-6;
$input-label-bg: #eaebee;
$input-label-border-color: #e3e4e7;
$input-invalid-border-color: lighten($red, 5%);
// Sidemenu
// -------------------------
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6;
$side-menu-shadow: 0 0 5px #c2c2c2;
// Menu dropdowns
// -------------------------
@@ -195,9 +198,10 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
// Breadcrumb
// -------------------------
$page-nav-bg: $white;
$page-nav-shadow: 5px 5px 20px -5px $gray-4;
$page-nav-bg: #eaebee;
$page-nav-shadow: 5px 5px 20px -5px $gray-4;
$page-nav-breadcrumb-color: $black;
$breadcrumb-hover-hl: #d9dadd;
// search
$search-shadow: 0 5px 30px 0 $gray-4;
@@ -247,13 +251,14 @@ $wellBackground: $gray-3;
$navbarHeight: 52px;
$navbarBackgroundHighlight: #f8f8f8;
$navbarBackground: #f8f8f8;
$navbarBackground: #f2f3f7;
$navbarBorder: 1px solid $tight-form-border;
$navbarShadow: 0 0 3px #c1c1c1;
$navbarText: #666;
$navbarLinkColor: #666;
$navbarLinkColorHover: #333;
$navbarLinkColorActive: #555;
$navbarText: #444;
$navbarLinkColor: #444;
$navbarLinkColorHover: #000;
$navbarLinkColorActive: #333;
$navbarLinkBackgroundHover: transparent;
$navbarLinkBackgroundActive: darken($navbarBackground, 6.5%);
$navbarDropdownShadow: inset 0px 4px 7px -4px darken($body-bg, 20%);
@@ -278,9 +283,9 @@ $error-text-color: lighten($red, 10%);
$success-text-color: lighten($green, 10%);
$info-text-color: $blue;
$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d);
$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d);
$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
$alert-info-bg: $blue-dark;
// popover

12
public/sass/base/_icons.scss
View File

@@ -12,27 +12,27 @@
}
.gicon-alert {
background-image: url('../img/icons_dark_theme/icon_alert.svg');
background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg');
}
.gicon-dashboard {
background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg');
}
.gicon-dashboard-starred {
background-image: url('../img/icons_dark_theme/icon_dashboard_fav.svg');
background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg');
}
.gicon-dashboard-new {
background-image: url('../img/icons_dark_theme/icon_new_dashboard.svg');
background-image: url('../img/icons_#{$theme-name}_theme/icon_new_dashboard.svg');
}
.gicon-folder-new {
background-image: url('../img/icons_dark_theme/icon_add_folder.svg');
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_folder.svg');
}
.gicon-dashboard-import {
background-image: url('../img/icons_dark_theme/icon_import_dashboard.svg');
background-image: url('../img/icons_#{$theme-name}_theme/icon_import_dashboard.svg');
}

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

@@ -59,11 +59,11 @@ $gf-form-margin: 3px;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
background-color: #292a2d; //$input-label-bg;
background-color: $input-label-bg;
display: block;
font-size: $font-size-sm;
border: $input-btn-border-width solid transparent;
border: $input-btn-border-width solid $input-label-border-color;
@include border-radius($label-border-radius-sm);

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

@@ -4,14 +4,14 @@
overflow: visible;
position: relative;
padding-left: $side-menu-width;
box-shadow: 0 0 20px black;
box-shadow: $navbarShadow;
z-index: 1;
background-color: $navbarBackground;
}
.navbar-inner {
min-height: $navbarHeight;
padding-right: $spacer;
background-color: $navbarBackground;
display: flex;
@include clearfix();
}

1
public/sass/components/_panel_dashlist.scss
View File

@@ -12,6 +12,7 @@
margin: 5px;
padding: 7px;
background-color: $tight-form-bg;
border: $input-btn-border-width solid $input-label-border-color;
.fa {
float: right;
padding-top: 3px;

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

@@ -77,7 +77,7 @@
.gm-scrollbar .thumb:hover,
.gm-scrollbar .thumb:active {
background-color: $blue;
background-color: $blue-dark;
}
.gm-scrollbar.-vertical .thumb {

1
public/sass/components/_search.scss
View File

@@ -111,6 +111,7 @@
padding: 3px 10px;
white-space: nowrap;
background-color: $tight-form-bg;
border: $input-btn-border-width solid $input-label-border-color;;
margin-bottom: 4px;
@include left-brand-border();

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

@@ -17,9 +17,9 @@
background: $side-menu-bg;
position: initial;
height: auto;
box-shadow: 0 0 20px black;
box-shadow: $side-menu-shadow;
position: relative;
z-index: 1;
z-index: 2;
}
.sidemenu__top,
.sidemenu__bottom {

1
public/sass/components/_tabbed_view.scss
View File

@@ -52,7 +52,6 @@
}
.tabbed-view-body {
background-color: $panel-bg;
padding: $spacer*2 $spacer;
&--small {

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

@@ -121,69 +121,35 @@
margin-bottom: $spacer*2;
}
$breadcrumb-hover-hl: #111;
$page-breadcrumb__angle-1: 39px;
$page-breadcrumb__angle-ul: 31px;
$page-breadcrumb__angle-a: 30px;
.page-breadcrumb {
display: flex;
padding: 0 $spacer;
line-height: 0.5;
margin-left: 2em;
}
.page-breadcrumb__item {
background: $page-nav-bg;
box-shadow: $page-nav-shadow;
margin-right: .2rem;
transform: skewX(-35deg);
> a {
color: $page-nav-breadcrumb-color;
font-size: $font-size-sm;
display: block;
padding: 0.6rem 1rem 0.6rem 3rem;;
padding: 0.6rem 1rem 0.6rem 1rem;;
position: relative;
&::after {
content: '';
position: absolute;
top: -53px;
left: 100%;
content: '';
height: 0;
width: 0;
border: $page-breadcrumb__angle-1 solid transparent;
border-right-width: 0;
border-left-width: $page-breadcrumb__angle-a;
z-index: 2;
border-left-color: $page-nav-bg;
}
transform: skewX(35deg);
}
&:first-child {
a {
padding-left: 1rem;
}
&:last-child {
background: $breadcrumb-hover-hl;;
}
&::after {
content: '';
position: absolute;
top: -53px;
left: 100%;
content: '';
height: 0;
width: 0;
border: $page-breadcrumb__angle-1 solid transparent;
border-right-width: 0;
border-left-width: $page-breadcrumb__angle-ul;
z-index: 1;
transform: translateX(4px);
border-left-color: #282020;
margin: 0;
}
&:hover {
background: $breadcrumb-hover-hl;

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

@@ -1,6 +1,5 @@
.dashboard-container {
padding: $dashboard-padding;
background: $dashboard-gradient;
width: 100%;
min-height: 100%;
}