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

style changes for panel placeholder (move and resize) effect

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-11-30 05:14:23 -08:00
parent 222f26ea80
commit 1db3885283
4 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -383,3 +383,6 @@ $panel-editor-viz-item-bg: $black;
$panel-editor-tabs-line-color: #e3e3e3; $panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue, 47%); $panel-editor-viz-item-bg-hover: darken($blue, 47%);
$panel-editor-viz-item-bg-hover-active: darken($orange, 45%); $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
$panel-grid-placeholder-bg: darken($blue, 47%);
$panel-grid-placeholder-shadow: 0 0 4px $blue;

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

@ -393,3 +393,6 @@ $panel-editor-viz-item-bg: $white;
$panel-editor-tabs-line-color: $dark-5; $panel-editor-tabs-line-color: $dark-5;
$panel-editor-viz-item-bg-hover: lighten($blue, 62%); $panel-editor-viz-item-bg-hover: lighten($blue, 62%);
$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%); $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
$panel-grid-placeholder-bg: lighten($blue, 62%);
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;

7
public/sass/components/_dashboard_grid.scss
View File

@ -57,6 +57,13 @@
} }
} }
.react-grid-item.react-grid-placeholder {
box-shadow: $panel-grid-placeholder-shadow;
background: $panel-grid-placeholder-bg;
z-index: 0;
opacity: unset;
}
.theme-dark { .theme-dark {
.react-grid-item > .react-resizable-handle::after { .react-grid-item > .react-resizable-handle::after {
border-right: 2px solid $gray-1; border-right: 2px solid $gray-1;

3
public/sass/components/_panel_editor.scss
View File

@ -265,10 +265,9 @@
height: 44px; height: 44px;
&:hover { &:hover {
background: $card-background-hover;
box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover; background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover; border: $panel-editor-viz-item-border-hover;
box-shadow: $panel-editor-viz-item-shadow-hover;
} }
&--selected { &--selected {