[Frontend] Styling for TOI element

Fixes #933
Fixes #1193
WIP: Tabular styling for TOI;
TODO: make bottom border work

Author: charlesh88

platform/commonUI/general/res/sass/controls/_time-of-interest.scss

@@ -115,39 +115,39 @@ TC
 }
 
 // TOI in tables
-@mixin toiIcon() {
-    @extend .ui-symbol;
-    @include transform(translate(-50%, -50%));
-    content: $glyph-icon-clock;
-    display: block;
-    position: absolute;
-    text-shadow: 0 1px 15px black;
-    left: 50%;
-    top: 0;
-    z-index: 2;
-}
-
 .tabular,
 table {
     tbody, .tbody {
         tr, .tr {
-            &:hover {
+            &.l-toi.pinned {
                 td {
                     border-top: 1px dashed $toiColorBg;
                     &:first-child:before {
-                        @include toiIcon();
-                        color: $toiColorFg;
+                        @extend .ui-symbol;
+                        @include transform(translate(-50%, -50%));
+                        content: $glyph-icon-clock;
+                        display: block;
+                        position: absolute;
+                        text-shadow: 0 1px 15px black;
+                        left: 50%;
+                        top: 0;
+                        z-index: 2;
+                        color: $toiColorBg;
                     }
                 }
-            }
-            &.l-toi.pinned {
-                td {
-                    border-top: 1px solid $toiColorBg;
-                    &:first-child:before {
-                        @include toiIcon();
-                        color: $toiColorFg;
+
+                &.highlight-bottom-edge {
+                    td {
+                        border-bottom: 1px dashed $toiColorBg;
+                        //border-top: 1px solid transparent;
+                        &:first-child:before {
+                            @include transform(translate(-50%, 50%));
+                            top: auto;
+                            bottom: 0;
+                        }
                     }
                 }
+
                 &:hover {
                     td:first-child:before {
                         content: $glyph-icon-x-in-circle;

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -104,12 +104,8 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
-$toiColorBg: $colorBtnMajorBg;
-$toiColorBgHov: $colorBtnMajorBgHov;
+$toiColorBg: #6b93c6; //$colorBtnMajorBg;
 $toiColorFg: #000;
-$toiColorFgHov: #fff;
-$toiColorBgActive:  lighten($colorKey, 10%);
-$toiColorFgActive: $toiColorFgHov;
 $toiW: 12px;
 
 // Status colors, mainly used for messaging and item ancillary symbols

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -104,12 +104,8 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
-$toiColorBg: $colorKey;
-$toiColorBgHov: lighten($colorKey, 10%);
+$toiColorBg: #6b93c6;
 $toiColorFg: #fff;
-$toiColorFgHov: #fff;
-$toiColorBgActive:  lighten($colorKey, 20%);
-$toiColorFgActive: $toiColorFgHov;
 $toiW: 12px;
 
 // Status colors, mainly used for messaging and item ancillary symbols

platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

@@ -263,8 +263,6 @@
 
     // Time of Interest control
     .l-toi-holder {
-        $c: $colorTimeCondTOIBg;
-        $cHov: $toiColorBgHov;
         $linesVOffset: 2px;
         &:before,
         &:after {
@@ -291,20 +289,6 @@
         .l-toi {
             top: 50%;
             @include transform(translateY(-50%));
-            //$d: $timeCondTOIIconD;
-            //@include transform(translate(-50%, -50%));
-            //font-size: $d;
-            //line-height: $d;
-            //left: 50%;
-            //top: 50%;
-            //height: $d;
-            //width: $d;
-            //z-index: 1;
-        }
-
-        .l-toi-val {
-            //@include transform(translateY(-51%));
-            //top: 50%;
         }
     }
 
@@ -314,13 +298,11 @@
         .l-time-conductor-zoom-w {
             @include justify-content(flex-end);
             .time-conductor-zoom {
-                //display: none; // TEMP per request from Andrew 8/1/16
                 height: $r3H;
                 min-width: 100px;
                 width: 20%;
             }
             .time-conductor-zoom-current-range {
-                //display: none; // TEMP per request from Andrew 8/1/16
                 color: $colorTick;
             }
         }

platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss

@@ -36,5 +36,4 @@ $colorTimeCondKeyBg: #4e70dc;
 $colorTimeCondKeyFg: #fff;
 $colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%);
 $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
-$colorTimeCondTOIBg: lighten($toiColorBg, 20%);
 @import "time-conductor-base";