[Frontend] Styling TC unsynced elements

Fixes #933
WIP: Styling for unsynced elements

Author: charlesh88

platform/commonUI/general/res/sass/_data-status.scss

@@ -1,3 +1,10 @@
+.s-unsynced {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+    @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
+}
+
+
 .s-stale {
 	@include s-stale();
 	.td {
@@ -10,8 +17,7 @@
 
     // Plot areas
     .gl-plot .gl-plot-display-area {
-        border: 1px solid $c;
-        @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
+        @extend .s-unsynced;
     }
 }
 

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

@@ -74,8 +74,7 @@
 .s-image-main {
 	border: 1px solid transparent;
 	&.paused {
-		//border-color: $colorPausedBg;
-        @include s-status-for-block-elem($c: $colorPausedBg);
+		@extend .s-unsynced;
 	}
 }