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

Bring the cool edit mode styles out of edit mode 

However does need to be scoped to “editable” cells
pull/10616/head
Alex P 2017-03-27 17:23:01 -07:00
parent f2a7ecded4
commit f4a820697b
2 changed files with 101 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/style/mixins/mixins.scss
View File

@ -22,10 +22,10 @@
}
@mixin gradient-diag-down($startColor, $endColor) {
background: $startColor;
background: -moz-linear-gradient(135deg, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(135deg, $startColor 0%,$endColor 100%);
background: linear-gradient(135deg, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
background: -moz-linear-gradient(135deg, $startColor 0%, $endColor 100%) !important;
background: -webkit-linear-gradient(135deg, $startColor 0%,$endColor 100%) !important;
background: linear-gradient(135deg, $startColor 0%,$endColor 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 ) !important;
}
@mixin gradient-r($startColor, $endColor) {
background: $startColor;

35
ui/src/style/pages/dashboards.scss
View File

@ -156,7 +156,7 @@ $dash-graph-heading: 30px;
}
&:hover {
cursor: text;
cursor: $cc-text;
color: $g20-white;
&:after {
@ -245,7 +245,7 @@ $dash-graph-options-arrow: 8px;
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
background-color: $g6-smoke;
color: $g20-white;
}
@ -291,11 +291,14 @@ $dash-graph-options-arrow: 8px;
Dashboard Edit Mode
------------------------------------------------------
*/
.dashboard.dashboard-edit {
.dash-graph--heading:hover {
background-color: $g4-onyx;
color: $g18-cloud;
cursor: $cc-move;
.dash-graph--name {
border-color: $g4-onyx;
}
}
.react-grid-placeholder {
@include gradient-diag-down($c-pool,$c-comet);
@ -340,9 +343,6 @@ $dash-graph-options-arrow: 8px;
cursor: $cc-move;
}
}
&.cssTransforms {
transition-property: transform, border-color, background-color;
}
& > .react-resizable-handle {
background-image: none;
cursor: $cc-resize-nwse;
@ -373,7 +373,6 @@ $dash-graph-options-arrow: 8px;
}
}
}
}
/*
Cell Edit Mode
@ -381,7 +380,7 @@ $dash-graph-options-arrow: 8px;
*/
$overlay-controls-height: 50px;
$overlay-controls-bg: $g2-kevlar;
$overlay-bg: rgba($g0-obsidian, 0.7);
$overlay-bg: rgba($c-pool, 0.7);
.overlay-technology {
position: absolute;
@ -462,3 +461,23 @@ $overlay-bg: rgba($g0-obsidian, 0.7);
}
}
}
/* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
.overlay-technology .page-contents {
background-image: none !important;
}
.overlay-technology .resize-bottom {
background-color: $g0-obsidian !important;
}
.overlay-technology .graph {
width: 70%;
left: 15%;
}
.overlay-technology .dash-graph--heading {
top: 0;
height: $dash-graph-heading;
}
.overlay-technology .dash-graph--container {
height: calc(100% - #{$dash-graph-heading});
top: $dash-graph-heading;
}