apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/9897/head
Patrick O'Carroll 8 years ago committed by Torkel Ödegaard
parent bc8c2409c0
commit 148a4c6c2d
12 changed files with 51 additions and 75 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      public/sass/_variables.dark.scss
  2. 35
      public/sass/_variables.light.scss
  3. 12
      public/sass/base/_icons.scss
  4. 4
      public/sass/components/_gf-form.scss
  5. 4
      public/sass/components/_navbar.scss
  6. 1
      public/sass/components/_panel_dashlist.scss
  7. 2
      public/sass/components/_scrollbar.scss
  8. 1
      public/sass/components/_search.scss
  9. 4
      public/sass/components/_sidemenu.scss
  10. 1
      public/sass/components/_tabbed_view.scss
  11. 54
      public/sass/layout/_page.scss
  12. 1
      public/sass/pages/_dashboard.scss

7
public/sass/_variables.dark.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

54
public/sass/layout/_page.scss
Unescape 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
Unescape View File

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

Write Preview
Loading…
Cancel
Save