Merge pull request #1563 from nasa/open-623

[Timers] Add stop button

platform/commonUI/general/res/sass/features/_time-display.scss

@@ -1,33 +1,36 @@
 .l-time-display {
 	$transTime: 200ms;
+    $controlSize: 14px;
+    $control1ControlW: $controlSize + $interiorMargin;
+    $control2ControlW: $control1ControlW * 2;
     line-height: 140%;
 	&:hover {
-		.l-btn.control {
+		.l-btn.controls {
 			opacity: 1;
 		}
 	}
 
 	&.l-timer {
-        .l-value:before,
-        .control {
-            font-size: 0.8em;
-        }
-
         .l-value:before {
             // Direction +/- element
+            font-size: $controlSize;
             margin-right: $interiorMarginSm;
+
         }
-        .control {
+        .controls {
             @include trans-prop-nice((width, opacity), $transTime);
+            font-size: $controlSize;
             line-height: inherit;
             margin-right: 0;
             opacity: 0;
             width: 0;
+            .flex-elem {
+                margin-right: $interiorMargin;
+            }
         }
-		&:hover .control {
-            margin-right: $interiorMargin;
+		&:hover .controls {
             opacity: 1;
-			width: 1em;
+			width: $control2ControlW;
 		}
 	}
 
@@ -35,4 +38,34 @@
         color: pullForward($colorBodyFg, 50%);
         font-weight: 400;
     }
+
+    // States
+    &.s-state-stopped,
+    &.s-state-paused {
+        .l-value {
+            opacity: 0.4;
+        }
+    }
+
+    &.s-state-started {
+        .l-value {
+            opacity: 1;
+        }
+    }
+
+    &.s-state-stopped {
+        // Hide Stop button, 1controlW
+        .t-btn-stop {
+            display: none;
+        }
+        &:hover .controls {  width: $control1ControlW;  }
+
+    }
+
+    &.s-state-paused {
+        // Paused, do something visual
+        .l-value {
+            &:before { @extend .pulse; }
+        }
+    }
 }