IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-23 23:13:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-11-01 16:06:49 +01:00
parent f3090d8cd4
commit 8eee4d8e6b
4 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/sass/_variables.dark.scss
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
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
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
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;
}
}