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

ux: updated modal header design

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-12-03 08:11:07 +01:00
parent a98b0024fc
commit a47bf7dfd9
5 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,6 +98,11 @@ $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191
$panel-header-hover-bg: $dark-4;
$panel-header-menu-hover-bg: $dark-5;
// page header
$page-header-bg: linear-gradient(90deg, #292a2d, black);
$page-header-shadow: inset 0px -4px 14px $dark-2;
$page-header-border-color: $dark-4;
$divider-border-color: #555;
// Graphite Target Editor
@ -276,7 +281,7 @@ $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a);
// popover
$popover-bg: $panel-bg;
$popover-bg: $page-bg;
$popover-color: $text-color;
$popover-border-color: $dark-4;
$popover-shadow: 0 0 20px black;

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

@ -70,6 +70,7 @@ $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%);
$page-header-bg: linear-gradient(90deg, #292a2d, black);
// Links
// -------------------------
@ -103,6 +104,11 @@ $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px,
$panel-header-hover-bg: $gray-6;
$panel-header-menu-hover-bg: $gray-4;
// Page header
$page-header-bg: linear-gradient(90deg, #292a2d, black);
$page-header-shadow: inset 0px -4px 14px $dark-2;
$page-header-border-color: $dark-4;
$divider-border-color: $gray-2;
// Graphite Target Editor
@ -290,7 +296,7 @@ $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
$alert-info-bg: $blue-dark;
// popover
$popover-bg: $panel-bg;
$popover-bg: $page-bg;
$popover-color: $text-color;
$popover-border-color: $gray-5;
$popover-shadow: 0 0 20px $white;

13
public/sass/components/_modals.scss
View File

@ -23,7 +23,7 @@
position: fixed;
z-index: $zindex-modal;
width: 100%;
background-color: $panel-bg;
background: $page-bg;
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
@include background-clip(padding-box);
outline: none;
@ -37,13 +37,10 @@
}
.modal-header {
background-color: $body-bg;
@include brand-bottom-border();
@include clearfix();
.gf-tabs-link.active {
background-color: $panel-bg;
}
background: $page-header-bg;
box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color;
@include clearfix();
}
.modal-header-title {

6
public/sass/components/_page_header.scss
View File

@ -1,8 +1,8 @@
.page-header-canvas {
background: linear-gradient(90deg, #292a2d, black);
box-shadow: inset 0px -4px 14px $dark-2;
border-bottom: 1px solid $dark-4;
background: $page-header-bg;
box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color;
}
.page-header {

1
public/sass/mixins/_drop_element.scss
View File

@ -11,7 +11,6 @@
background: $theme-bg;
color: $theme-color;
padding: 0.65rem;
font-size: $font-size-sm;
word-wrap: break-word;
max-width: 20rem;
border: 1px solid $border-color;