apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(dashboard): fixed white theme for new dashboard row look / dash edit mode, #6442

Browse Source
pull/6695/head
Torkel Ödegaard 9 years ago
parent f3090d8cd4
commit 8eee4d8e6b
4 changed files with 32 additions and 28 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. 5
      public/sass/_variables.dark.scss
  2. 13
      public/sass/_variables.light.scss
  3. 32
      public/sass/components/_row.scss
  4. 10
      public/sass/pages/_dashboard.scss

5
public/sass/_variables.dark.scss
Unescape View File

@ -90,6 +90,8 @@ $component-active-bg: $brand-primary !default;
// -------------------------
$panel-bg: $dark-2;
$panel-border: solid 1px $dark-3;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
$panel-menu-border: solid 1px black;
$divider-border-color: #555;
@ -280,3 +282,6 @@ $dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0,
// footer
$footer-link-color: $gray-1;
$footer-link-hover: $gray-4;
// Dashboard row
$dash-row-border-color: $dark-4

13
public/sass/_variables.light.scss
Unescape View File

@ -95,8 +95,10 @@ $component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$panel-bg: $gray-7;
$panel-border: solid 1px $gray-6;
$panel-bg: $gray-7;
$panel-border: solid 1px $gray-6;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
$panel-menu-border: solid 1px white;
$divider-border-color: $gray-2;
@ -297,10 +299,9 @@ $card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// dash row
$dash-row-background: linear-gradient(135deg, $gray-5, $gray-6);
$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// footer
$footer-link-color: $gray-3;
$footer-link-hover: $dark-5;
// Dashboard row
$dash-row-border-color: $gray-4

32
public/sass/components/_row.scss
Unescape View File

@ -58,7 +58,7 @@
a.active {
color: $link-color;
background: $panel-bg;
border: $panel-border;
border: 1px solid $dash-row-border-color;
border-bottom: none;
position: relative;
top: 1px;
@ -93,13 +93,13 @@ a.dash-row-header-actions--tight {
.dash-edit-mode {
.dash-row-header {
display: flex;
border-bottom: 1px solid $dark-4;
border-right: 1px solid $dark-4;
border-bottom: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
margin-right: 0;
}
.dash-row-header::after {
content: ' ';
border-top: 1px solid $dark-4;
border-top: 1px solid $dash-row-border-color;
width: 15px;
position: relative;
}
@ -107,23 +107,23 @@ a.dash-row-header-actions--tight {
margin-bottom: $spacer;
}
.dash-row-header-title {
border-left: 1px solid $dark-4;
border-left: 1px solid $dash-row-border-color;
}
.dash-row-header-title::before {
content: ' ';
border-top: 1px solid $dark-4;
border-top: 1px solid $dash-row-border-color;
width: 15px;
position: absolute;
margin: -9px 0 0 -9px;
}
.panels-wrapper {
padding: $panel-margin*2 $panel-margin 0 $panel-margin;
border-left: 1px solid $dark-4;
border-right: 1px solid $dark-4;
border-left: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
}
.panels-wrapper::after {
content: ' ';
border-bottom: 1px solid $dark-4;
border-bottom: 1px solid $dash-row-border-color;
width: 15px;
position: absolute;
margin: 0 0 0 -6px;
@ -152,22 +152,20 @@ a.dash-row-header-actions--tight {
.dash-row-options {
background: $panel-bg;
border-left: $panel-border;
border-bottom: $panel-border;
border-right: $panel-border;
border-left: 1px solid $dash-row-border-color;
border-bottom: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2;
box-shadow: 0px 3px 7px -3px $black;
}
.dash-row-add-panel {
background: $panel-bg;
border-left: $panel-border;
border-bottom: $panel-border;
border-right: $panel-border;
border-left: 1px solid $dash-row-border-color;
border-bottom: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2;
box-shadow: 0px 3px 7px -3px $black;
display: flex;
}

10
public/sass/pages/_dashboard.scss
Unescape View File

@ -124,11 +124,11 @@ div.flot-text {
z-index: 500;
position: absolute;
background: $tight-form-func-bg;
border: 1px solid black;
border: $panel-menu-border;
.panel-menu-row {
white-space: nowrap;
border-bottom: 1px solid black;
border-bottom: $panel-menu-border;
&:last-child {
border-bottom: none;
}
@ -140,7 +140,7 @@ div.flot-text {
.panel-menu-link {
display: inline-block;
border-right: 1px solid black;
border-right: $panel-menu-border;
&:last-child {
border: none;
}
@ -164,14 +164,14 @@ div.flot-text {
.panel-drop-zone {
display: none;
.panel-container {
border: 1px solid $dark-3;
border: $panel-border;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
color: $text-color-faint;
font-weight: bold;
background: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
background: $panel-drop-zone-bg;
}
}

Write Preview
Loading…
Cancel
Save