[Frontend] Styling for Time Conductor v2

Fixes #933
WIP: Adding zoom control with HTML5
input range type; Refactored sass slightly
to move display: inline-block out of mixin
containerBase and into .s-btn.

Author: charlesh88

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

@@ -108,6 +108,9 @@
         &.grows {
             @include flex(1 1 auto);
         }
+        &.contents-align-right {
+            text-align: right;
+        }
     }
     .flex-container {
         // Apply to wrapping elements, mct-includes, etc.

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

@@ -185,21 +185,15 @@
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    //$b: 1px solid lighten($bg, 30%);
     border-radius: 2px;
     box-sizing: border-box;
     @include boxIncised(0.7);
     background-color: $bg;
-    //border-bottom: $b;
-    //border-right: $b;
 }
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-    //&:before {
-    //@include trans-prop-nice("border-color", 25ms);
     content: '';
     display: block;
-    //height: auto;
     pointer-events: none;
     position: absolute;
     z-index: 2;
@@ -305,7 +299,6 @@
 	border-radius: $controlCr;
 	box-sizing: border-box;
 	color: $fg;
-	display: inline-block;
 }
 
 @mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -33,6 +33,7 @@ $pad: $interiorMargin * $baseRatio;
 
 .s-btn {
     box-sizing: border-box;
+    display: inline-block;
     padding: 0 $pad;
     font-size: 0.7rem;
     vertical-align: top;

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -420,6 +420,45 @@ input[type="search"] {
     }
 }
 
+@mixin sliderKnob() {
+    $h: 16px;
+    cursor: pointer;
+    width: floor($h/1.75);
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    //border-radius: 50% !important;
+}
+
+input[type="range"] {
+    // HTML5 range inputs
+
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    background: transparent; /* Otherwise white in Chrome */
+    &:focus {
+        outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+    }
+
+    // Thumb
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include sliderKnob();
+    }
+    &::-moz-range-thumb {
+        @include sliderKnob();
+    }
+    &::-ms-thumb {
+        @include sliderKnob();
+    }
+
+    // Track
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+}
+
 /******************************************************** DATETIME PICKER */
 .l-datetime-picker {
     $r1H: 15px;

platform/commonUI/general/res/sass/controls/_time-conductor.scss

@@ -20,6 +20,7 @@
     height: $d !important;
     width: $d;
     position: relative;
+    
     // Icon shape: brackets
     &:before,
     &:after {
@@ -76,7 +77,6 @@
             z-index: 1;
             @include animation-duration(1s);
             &:before {
-                //background: green;
                 height: $handH;
             }
         }
@@ -181,13 +181,15 @@
                     font-size: 0.9em;
                 }
                 path {
+                    // Line beneath ticks
                     display: none;
                 }
                 line {
                     // Tick marks
                     stroke: $c;
                 }
                 text {
+                    // Tick labels
                     fill: $c;
                 }
             }
@@ -199,7 +201,15 @@
     }
 
     .l-time-conductor-controls {
+        align-items: center;
         margin-top: $interiorMargin;
+        .time-conductor-zoom {
+            //@include test();
+            min-width: 100px;
+            height: $r3H;
+            width: 25%;
+        }
+
     }
     // Fixed
     &.fixed-mode {

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -129,6 +129,8 @@
     }
 
     .primary-pane {
+        // Clip element that have min-widths
+        overflow: hidden;
         // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
         z-index: 4;
     }

platform/features/conductor-v2/res/templates/time-conductor.html

@@ -104,6 +104,11 @@
                             {name: 'SCLK', key:'sclk', glyph:'\u0043'}
                     ]}">
             </mct-control>
+            <!-- Zoom control -->
+            <div class="l-time-conductor-zoom-w grows flex-elem contents-align-right">
+                <input class="time-conductor-zoom" type="range" />
+            </div>
         </div>
+
     </div>
 </div>