[Merge] Cherrypick 2 from warp1220

WTD-1220

platform/commonUI/general/res/sass/_main.scss

@@ -47,6 +47,7 @@
 @import "controls/menus";
 @import "controls/time-controller";
 @import "features/imagery";
+@import "features/time-display";
 @import "forms/mixins";
 @import "forms/elems";
 @import "forms/validation";

platform/commonUI/general/res/sass/_mixins.scss

@@ -26,6 +26,16 @@
     width: auto; height: auto;
 }
 
+@mixin trans-prop-nice($props, $t) {
+	@if $t == 0 {
+		@include transition-property(none);
+	} @else {
+		@include transition-property($props);
+		@include transition-duration($t);
+		@include transition-timing-function(ease-in-out);
+	}
+}
+
 @mixin trans-prop-nice-fade($t: 0.5s) {
 	@if $t == 0 {
 		@include transition-property(none);
@@ -42,6 +52,12 @@
 	@include transition-timing-function(ease-in-out);
 }
 
+@mixin trans-prop-nice-resize-w($t: 0.5s) {
+	@include transition-property(width, left, right);
+	@include transition-duration($t);
+	@include transition-timing-function(ease-in-out);
+}
+
 @mixin triangle-right($size, $color) {
 	$size: $size/2;
 	$ratio: 1;

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

@@ -0,0 +1,44 @@
+.l-time-display {
+	$transTime: 200ms;
+	// Layout
+	&:hover {
+		.l-btn.control {
+			//display: inline-block;
+			opacity: 1;
+		}
+	}
+	.l-elem-wrapper {
+		position: relative;
+	}
+	.l-elem {
+		display: inline-block;
+	}
+
+	&.l-timer {
+		.l-elem.l-value {
+			@include trans-prop-nice(left, $transTime);
+			position: absolute;
+			left: 0;
+			z-index: 1;
+		}
+		&:hover .l-elem.l-value {
+			left: 20px;
+		}
+	}
+
+	// Look-and-feel
+	.l-elem {
+		.value.active,
+		&.value.active {
+			color: $colorKeyFg;
+		}
+	}
+	.l-btn.control {
+		@include trans-prop-nice-fade($transTime);
+		//display: none;
+		opacity: 0;
+		font-size: 0.9em;
+		line-height: 1em;
+	}
+
+}