[Frontend] Form styling

#772
Added ".l-controls-under" styling to allow
channel-selector layout;
Added new hint color constants and refined
style defs;

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -87,9 +87,7 @@
 			}
 		}
 
-		.field-hints {
+		.hint, .field-hints {  color: $colorFieldHint;  }
-			color: darken($colorBodyFg, 20%);
-		}
 
 		.selector-list {
 			// Used in create overlay to display tree view
@@ -130,6 +128,14 @@
     }
 }
 
+.l-controls-under.l-flex-row {
+    // Change to use column layout
+    @include flex-direction(column);
+    .flex-elem {
+        margin-bottom: $interiorMarginLg;
+    }
+}
+
 .no-validate {
     .form .form-row >.label {
         padding-right: 0;

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -65,9 +65,7 @@
         margin-bottom: $interiorMargin;
     }
 
-    .hint {
+    .hint, .field-hints { color: $colorFieldHintOverlay !important;  }
-        color: pushBack($colorOvrFg, 20%);
-    }
 
     .abs.top-bar {
         height: $ovrTopBarH;

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -77,6 +77,7 @@ $colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
+$colorFieldHint: pullForward($colorBodyFg, 20%);
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 3%);
@@ -125,6 +126,7 @@ $colorOvrBg: pullForward($colorBodyBg, 10%);
 $colorOvrFg: pullForward($colorBodyFg, 30%);
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
+$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
 
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -77,6 +77,7 @@ $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorFieldHint: pullForward($colorBodyFg, 40%);
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -125,6 +126,7 @@ $colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
+$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
 
 // Items
 $colorItemBg: #ddd;

platform/features/timeline/bundle.js

@@ -312,7 +312,8 @@ define([
                                         "dialog": {
                                             "control": "selector",
                                             "name": "Modes",
-                                            "type": "mode"
+                                            "type": "mode",
+                                            "layout": "controls-under"
                                         },
                                         "property": "modes"
                                     },

platform/forms/res/templates/form.html

@@ -33,7 +33,7 @@
                                invalid: mctFormInner.$dirty && !mctFormInner.$valid,
                                first: $index < 1,
                                'l-controls-first': row.layout === 'control-first',
-                               'l-input-sm': row.inputsize === 'sm'
+                               'l-controls-under': row.layout === 'controls-under'
                                }">
                     <div class='label flex-elem' title="{{row.description}}">
                         {{row.name}}