[Frontend] TOI in tables

Fixes #933
Fixes #1193
WIP

Author: charlesh88

platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss

@@ -72,7 +72,7 @@
         z-index: 1;
 
         .l-toi-buttons {
-            @include trans-prop-nice($props: width, $dur: 250ms);
+            @include trans-prop-nice($props: (width, padding), $dur: 250ms);
             border-radius: $controlCr;
             box-sizing: content-box;
             font-size: $toiH;
@@ -141,6 +141,8 @@
     }
 }
 
+
+// TOI is showing value as well
 .show-val .l-toi-holder {
     .l-toi {
         .l-toi-buttons {
@@ -196,18 +198,23 @@ table {
                 z-index: 1;
                 td, .td {
                     .l-toi-holder {
-                        //@include test();
-                        //width: 100%;
-                        //z-index: 5;
                         &:before,
                         &:after {
                             display: none;
                         }
                         .l-toi {
-                            background: $toiColorBlocker;
+                            background: rgba($toiColorBlocker, 0.9);
+                            border-radius: 20%;
+                            height: auto;
                             padding: $toiPad;
                             @include transform(translate(-50%, -50%));
                             left: 50%; right: auto; top: 0;
+                            .l-toi-buttons {
+                                padding: 1px;
+                                &:hover {
+                                    padding: $toiPad;
+                                }
+                            }
                         }
                     }
                 }
@@ -216,57 +223,6 @@ table {
     }
 }
 
-// Old approach
-/*.tabular,
-table {
-    tbody, .tbody {
-        tr, .tr {
-            &.l-toi.pinned {
-                border-top: 1px dashed $toiColorBg;
-                td, .td {
-                    &:first-child {
-                        &:before,
-                        &:after {
-                            @include transform(translate(-50%, -50%));
-                            display: block;
-                            position: absolute;
-                            left: 50%;
-                            bottom: auto;
-                            top: 0;
-
-                        }
-
-                        &:before {
-                            @extend .icon-clock;
-                            color: $toiColorBg;
-                            cursor: pointer;
-                            z-index: 3;
-                        }
-
-                        &:after {
-                            border-radius: 100%;
-                            content: '';
-                            background: $toiColorBlocker;
-                            height: $toiH + $interiorMargin;
-                            width: $toiH + $interiorMargin;
-                            z-index: 2;
-                        }
-                    }
-                }
-
-                &:hover {
-                    td, .td {
-                        &:first-child:before {
-                            color: $toiColorBgAlert;
-                            content: $glyph-icon-x-in-circle !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}*/
-
 // TOI in plots
 .gl-plot {
     .gl-plot-wrapper-display-area-and-x-axis {