Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Introduce stylesheet for logs viewer page

pull/3520/head
Alex P 2018-05-23 14:34:45 -07:00
parent 913f2e5c17
commit 6a193cf5be
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/style/chronograf.scss
View File

@ -83,6 +83,7 @@
@import 'pages/tickscript-editor';
@import 'pages/time-machine';
@import 'pages/manage-providers';
@import 'pages/logs-viewer';
// TODO
@import 'unsorted';

33
ui/src/style/pages/logs-viewer.scss Normal file
View File

@ -0,0 +1,33 @@
/*
Styles for Logs Viewer Page
----------------------------------------------------------------------------
*/
$logs-viewer-graph-height: 240px;
$logs-viewer-search-height: 108px;
$logs-viewer-gutter: 60px;
.logs-viewer {
display: flex;
flex-direction: column;
align-items: stretch;
flex-wrap: none;
}
.logs-viewer--graph-container {
padding: 30px $logs-viewer-gutter 18px $logs-viewer-gutter;
height: $logs-viewer-graph-height;
@include gradient-v($g2-kevlar, $g0-obsidian);
}
.logs-viewer--search-container {
padding: 20px $logs-viewer-gutter;
height: $logs-viewer-search-height;
background-color: $g3-castle;
}
.logs-viewer--table-container {
padding: 12px $logs-viewer-gutter 30px $logs-viewer-gutter;
height: calc(100% - #{$logs-viewer-graph-height + $logs-viewer-search-height});
background-color: $g3-castle;
}