[Frontend] Set plot export buttons to show/hide on hover

It's worth noting that I changed the .gl-plot position from relative to absolute
in an attempt to match the results to a similar requirement in MCT Table. Setting
to absolute caused no regressions as far as I could tell, but I have not attempted
browsers outside of Chrome.
This commit is contained in:
David Hudson 2016-09-02 19:36:39 +09:00
parent e7a7025961
commit 3736f84c12

View File

@ -20,14 +20,35 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.abs.holder-plot {
$btnExportH: $btnFrameH;
// Fend off the scrollbar when less than min-height;
right: $interiorMargin;
.s-button.t-export {
@include trans-prop-nice(opacity, $dur: 50ms);
opacity: 0;
}
.gl-plot {
@include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
top: 0;
}
&:hover {
.s-button.t-export {
@include trans-prop-nice(opacity, 150ms, 100ms);
opacity: 1;
}
.gl-plot {
@include trans-prop-nice(top, $dur: 150ms);
top: $btnExportH + $interiorMargin;
}
}
}
.gl-plot {
color: $colorPlotFg;
font-size: 0.7rem;
position: relative;
position: absolute;
width: 100%;
height: 100%;
min-height: $plotMinH;