R&I Clock timer fixes (#2254)

* Clocks and timers styling WIP

- Markup, new styles;
- Renamed _legacy-plots.scss > _legacy;
- New $colorBodyFgEm constants - theme files all updated;

* Clocks and timers styling complete

* Styles clean up

- Moved legacy styles out of _global into _legacy.scss;

platform/features/clock/res/templates/clock.html

@@ -19,16 +19,14 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-time-display l-digital l-clock s-clock" ng-controller="ClockController as clock">
-	<div class="l-elem-wrapper">
-	    <span class="l-elem timezone">
-	        {{clock.zone()}}
-	    </span>
-	    <span class="l-elem value active">
-	        {{clock.text()}}
-	    </span>
-	    <span class="l-elem ampm">
-	        {{clock.ampm()}}
-	    </span>
+<div class="c-clock l-time-display" ng-controller="ClockController as clock">
+	<div class="c-clock__timezone">
+		{{clock.zone()}}
+	</div>
+	<div class="c-clock__value">
+		{{clock.text()}}
+	</div>
+	<div class="c-clock__ampm">
+		{{clock.ampm()}}
 	</div>
 </div>

platform/features/clock/res/templates/timer.html

@@ -19,21 +19,19 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-time-display l-digital l-timer s-timer s-state-{{timer.timerState}}" ng-controller="TimerController as timer">
-	<div class="l-elem-wrapper l-flex-row">
-        <div class="l-elem-wrapper l-flex-row controls">
-            <a ng-click="timer.clickStopButton()"
-               title="Stop"
-               class="flex-elem s-icon-button t-btn-stop icon-box"></a>
-            <a ng-click="timer.clickButton()"
-               title="{{timer.buttonText()}}"
-               class="flex-elem s-icon-button t-btn-pauseplay {{timer.buttonCssClass()}}"></a>
-        </div>
-	    <span class="flex-elem l-value {{timer.signClass()}}">
-	        <span class="value"
-		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}
-            </span>
-	    </span>
-	    <span ng-controller="RefreshingController"></span>
+<div class="c-timer is-{{timer.timerState}}" ng-controller="TimerController as timer">
+    <div class="c-timer__controls">
+        <button ng-click="timer.clickStopButton()"
+                ng-hide="timer.timerState == 'stopped'"
+                title="Reset"
+                class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
+        <button ng-click="timer.clickButton()"
+                title="{{timer.buttonText()}}"
+                class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
+    </div>
+    <div class="c-timer__direction {{timer.signClass()}}"
+        ng-hide="!timer.signClass()"></div>
+	<div class="c-timer__value">{{timer.text() || "--:--:--"}}
 	</div>
+	<span class="c-timer__ng-controller u-contents" ng-controller="RefreshingController"></span>
 </div>