[Frontend] Mods in progress to form layout

open #638
Major progress on form-row markup and CSS when
in Inspector 'part' context; General fixes cleanups
to custom checkbox/radio CSS;

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

@@ -60,10 +60,18 @@
     .l-inspector-part {
         @include box-sizing(border-box);
         padding-right: $interiorMargin;
+        .form {
+            margin-left: $treeVCW + $interiorMarginLg;
+            .form-row {
+                @include align-items(center);
+                border: none;
+                padding: 0;
+            }
+        }
     }
 
     ul li,
-    em {
+    em.t-inspector-part-header {
         display: block;
         position: relative;
     }
@@ -72,7 +80,7 @@
         margin-bottom: $interiorMarginLg;
     }
     
-    em {
+    em.t-inspector-part-header {
         @include border-radius($basicCr);
         background-color: $colorInspectorSectionHeaderBg;
         color: $colorInspectorSectionHeaderFg;

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

@@ -115,26 +115,25 @@ label.radio.custom {
     $d: $formRowCtrlsH;
     cursor: pointer;
     display: inline-block;
-    line-height: $d;
+    //line-height: $d;
     margin-right: $interiorMargin * 4;
     padding-left: $d + $interiorMargin;
     position: relative;
-    vertical-align: middle; // was top
+    //vertical-align: middle; // was top
     em {
         color: $colorBodyFg;
         display: inline-block;
         height: $d;
-        min-width: $d;
+        width: $d;
         &:before {
             @include border-radius($basicCr * .75);
             background: $bg;
             @include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
             box-sizing: border-box;
-            content: " ";
+            content: "";
             font-family: 'symbolsfont';
             font-size: 0.8em;
             display: inline-block;
-            margin-right: $interiorMargin;
             height: $d;
             width: $d;
             left: 0;
@@ -336,7 +335,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
 /******************************************************** SLIDERS */
 
 .slider {
-    $knobH: 100%; //14px;
+    $knobH: 100%;
     .slot {
         width: auto;
         position: absolute;
@@ -372,7 +371,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
         background-color: $sliderColorRange;
         cursor: ew-resize;
         position: absolute;
-        top: 0; //$tbOffset;
+        top: 0;
         right: auto;
         bottom: 0;
         left: auto;

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

@@ -23,7 +23,6 @@
 	@include border-radius($basicCr);
 	background: $colorFormSectionHeader;
 	$c: lighten($colorBodyFg, 20%);
-	//border-bottom: 1px solid rgba(#fff, 0.3);
 	color: $c;
 	font-size: 0.8em;
 	padding: $formTBPad $formLRPad;
@@ -32,6 +31,7 @@
 
 .form {
 	color: $colorFormText;
+    width: 100%;
 	.form-section {
 		position: relative;
 		margin-bottom: $interiorMarginLg * 2;
@@ -60,28 +60,24 @@
 
 		>.label {
 			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
-			//@include test(orange, 0.05);
-			float: left;
 			min-width: 120px;
+            order: 1;
             position: relative;
 			white-space: nowrap;
 			width: $formLabelW;
 		}
 
 		.value {
-			color: $colorInputFg; //lighten($colorBodyFg, 20%);
+			color: $colorInputFg;
 		}
 
 		.controls {
-			float: left;
+            order: 2;
             position: relative;
-			width: 99.9% - $formLabelW; // Start with less than 100% for Firefox
+            @include flex(1 1 auto);
 
 			.l-composite-control {
-//				display: inline-block;
 				&.l-checkbox {
-//					@include test();
-//					height: $formRowCtrlsH;
 					display: inline-block;
 					line-height: $formRowCtrlsH;
 					margin-right: 5px;
@@ -115,7 +111,6 @@
 			$h: 150px;
 			position: relative;
 			height: $h;
-//			max-width: 50%;
 			>.wrapper {
 				$p: $interiorMargin;
 				overflow: auto;
@@ -129,6 +124,37 @@
 	}
 }
 
+.l-controls-first {
+    .form .form-row {
+        margin-top: $interiorMarginSm;
+        >.label,
+        >.controls {
+            line-height: inherit;
+            min-height: inherit;;
+        }
+        >.label {
+            @include flex(1 1 auto);
+            min-width: 0;
+            width: auto;
+            order: 2;
+        }
+        >.controls {
+            @include flex(0 0 auto);
+            margin-right: $interiorMargin;
+            order: 1;
+        }
+    }
+}
+
+.no-validate {
+    .form .form-row >.label {
+        padding-right: 0;
+        &:after {
+            display: none;
+        }
+    }
+}
+
 label.form-control.checkbox {
 	input {
 		margin-right: $interiorMargin;

platform/commonUI/general/res/templates/object-inspector.html

@@ -36,7 +36,7 @@
             <mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
             <div class="split-pane-component pane bottom">
                 <div class="abs holder holder-elements l-flex-col">
-                    <em class="flex-elem">Elements</em>
+                    <em class="flex-elem t-inspector-part-header">Elements</em>
                     <mct-representation
                             key="'edit-elements'"
                             mct-object="domainObject"