[Frontend] Styling Export button

fixes #973
- Done;
- Styling for Export button and tabular view
area in layout frame context;
- Export button in frame context now
hidden until user hovers over tabular
view area in frame, includes animated
transition;
- Normalized line-height on button and
menu elements in frame context;
- Layout/markup/SASS for historical and
RT tabular view modified;
- Converted imagery.html layout
to use flexbox;

platform/commonUI/general/res/sass/_mixins.scss

@@ -348,7 +348,6 @@
 	display: inline-block;
 	font-family: 'symbolsfont';
 	margin-left: $interiorMarginSm;
-	vertical-align: top;
 }
 
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -1,13 +1,10 @@
 .l-image-main-wrapper,
-.l-image-main,
-.l-image-main-controlbar,
 .l-image-thumbs-wrapper {
 	@include absPosDefault(0, false);
 }
 
 /*************************************** MAIN LAYOUT */
 .l-image-main-wrapper {
-	//@include test();
 	@if $enableImageryThumbs == true {
 		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
 	}
@@ -15,16 +12,14 @@
 	min-width: 150px;
 	.l-image-main {
 		background-color: $colorPlotBg;
-		bottom: $imageMainControlBarH + $interiorMargin;
+        margin-bottom: $interiorMargin;
 	}
 	.l-image-main-controlbar {
-		top: auto;
-		height: $imageMainControlBarH;
+        &.l-flex-row { @include align-items(center); }
 	}
 }
 
 .l-image-thumbs-wrapper {
-	//@include test(red);
 	top: auto;
 	height: $imageThumbsWrapperH;
 }
@@ -44,24 +39,17 @@
 	background-repeat: no-repeat;
 }
 
-.l-image-main {
-	//cursor: crosshair;
-}
-
 .l-image-main-controlbar {
-	//@include test();
 	font-size: 0.8em;
-	line-height: $imageMainControlBarH;
+	line-height: inherit;
 	.left, .right {
 		direction: rtl;
 		overflow: hidden;
 	}
 	.left {
-		//@include test(red);
 		text-align: left;
 	}
 	.right {
-		//@include test(green);
 		z-index: 2;
 	}
 	.l-date,
@@ -71,7 +59,6 @@
 	.l-mag {
 		direction: ltr;
 		display: inline-block;
-		//white-space: nowrap;
 		&:before {
 			content: "\000049";
 		}

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -24,6 +24,10 @@
 	height: 100%;
 }
 
+.tabular-holder {
+    @include absPosDefault();
+}
+
 .tabular,
 table {
 	box-sizing: border-box;
@@ -165,11 +169,38 @@ table {
 }
 
 /********************************************************** SPECIFIC TABULAR VIEWS */
-.t-tabular {
-    &.t-historical {
+.tabular-holder {
+    &.t-exportable {
         $btnExportH: 25px;
         .l-view-section {
             top: $btnExportH + $interiorMargin;
         }
     }
+}
+
+.child-frame {
+    .tabular-holder {
+        &.t-exportable {
+            $btnExportH: $btnFrameH;
+            .s-btn.t-export {
+                @include trans-prop-nice(opacity, $dur: 50ms);
+                opacity: 0;
+            }
+            .l-view-section {
+                @include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
+                top: 0;
+            }
+            &:hover {
+                .s-btn.t-export {
+                    @include trans-prop-nice(opacity, 150ms, 100ms);
+                    opacity: 1;
+                }
+                .l-view-section {
+                    @include trans-prop-nice(top, $dur: 150ms);
+                    top: $btnExportH + $interiorMargin;
+                }
+            }
+        }
+    }
+
 }

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -54,7 +54,8 @@
 			height: $ohH;
 			line-height: $ohH;
 			padding: 0 $interiorMargin;
-			> span {
+			> span,
+            &:before {
 				font-size: 0.65rem;
 			}
 		}