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

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
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-hover-bg: $dark-4;
$panel-header-menu-hover-bg: $dark-5; $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; $divider-border-color: #555;
// Graphite Target Editor // Graphite Target Editor
@@ -276,7 +281,7 @@ $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a);
// popover // popover
$popover-bg: $panel-bg; $popover-bg: $page-bg;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $dark-4; $popover-border-color: $dark-4;
$popover-shadow: 0 0 20px black; $popover-shadow: 0 0 20px black;

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

@@ -70,6 +70,7 @@ $text-shadow-faint: none;
// gradients // 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%); $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-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
$page-header-bg: linear-gradient(90deg, #292a2d, black);
// Links // 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-hover-bg: $gray-6;
$panel-header-menu-hover-bg: $gray-4; $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; $divider-border-color: $gray-2;
// Graphite Target Editor // Graphite Target Editor
@@ -290,7 +296,7 @@ $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
$alert-info-bg: $blue-dark; $alert-info-bg: $blue-dark;
// popover // popover
$popover-bg: $panel-bg; $popover-bg: $page-bg;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $gray-5; $popover-border-color: $gray-5;
$popover-shadow: 0 0 20px $white; $popover-shadow: 0 0 20px $white;

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

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

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

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

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

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