[Frontend] Layout and positioning fixes for TC controls

open #889
IN PROGRESS
- Smaller font used on range value;
- More space allocated to left and right
for slider range values;
- Style tweaks to slider look;
- Layout and style of datetime inputs
fixed;
- Input error colors fixed, moved to
theme constants;

platform/commonUI/general/res/templates/controls/datetime-field.html

@@ -19,18 +19,17 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span class="s-btn"
-      ng-controller="DateTimeFieldController">
+<span ng-controller="DateTimeFieldController">
     <input type="text"
            ng-model="textValue"
            ng-blur="restoreTextValue(); ngBlur()"
            ng-class="{
                         error: textInvalid ||
                             (structure.validate &&
-                                !structure.validate(ngModel[field]))
+                                !structure.validate(ngModel[field])),
+                        'picker-icon': structure.format === 'utc' || !structure.format
                      }">
-    </input>
-    <a class="ui-symbol icon icon-calendar"
+    </input><a class="ui-symbol icon icon-calendar"
        ng-if="structure.format === 'utc' || !structure.format"
        ng-click="picker.active = !picker.active">
     </a>

platform/commonUI/general/res/templates/controls/time-controller.html

@@ -23,7 +23,7 @@
     <form class="l-time-range-inputs-holder l-flex-row"
           ng-submit="trCtrl.updateBoundsFromForm()">
         <span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
-        <span class="l-time-range-input flex-elem">
+        <span class="l-time-range-input-w flex-elem">
             <mct-control key="'datetime-field'"
                          structure="{
                              format: parameters.format,
@@ -38,7 +38,7 @@
 
         <span class="l-time-range-inputs-elem lbl flex-elem">to</span>
 
-        <span class="l-time-range-input flex-elem" ng-controller="ToggleController as t2">
+        <span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
             <mct-control key="'datetime-field'"
                          structure="{
                              format: parameters.format,
@@ -48,7 +48,7 @@
                          ng-blur="trCtrl.updateBoundsFromForm()"
                          field="'end'"
                          class="time-range-end">
-            </mct-control>&nbsp;
+            </mct-control>
         </span>
 
         <input type="submit" class="hidden">