[Frontend] Cleanups to Inspector config elements

open #729
In-progress!
Markup and CSS modified to cleanup control layout
and styling in Plot and Table config options;
gulpfile.js modified to include SASS source line numbers
in rendered CSS;

gulpfile.js

@@ -60,7 +60,8 @@ var gulp = require('gulp'),
             singleRun: true
         },
         sass: {
-            includePaths: bourbon.includePaths
+            includePaths: bourbon.includePaths,
+            sourceComments: true
         },
         replace: {
             variables: {

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

@@ -61,9 +61,23 @@
     .l-inspector-part {
         box-sizing: border-box;
         padding-right: $interiorMargin;
-        .form {
+        .tree .form {
             margin-left: $treeVCW + $interiorMarginLg;
-            margin-bottom: $interiorMarginLg;
+        }
+        .section-header {
+            background: none;
+            color: $colorInspectorPropName;
+            border-radius: unset;
+            font-size: inherit;
+            padding: $interiorMarginSm 0;
+        }
+
+        mct-form:not(:last-child) .form {
+            border-bottom: 1px solid $colorInspectorSectionHeaderBg;
+        }
+
+        .form {
+            margin-bottom: $interiorMargin;
             .form-section {
                 margin-bottom: 0;
                 &:not(.first) {

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

@@ -19,6 +19,14 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+.form {
+	color: $colorFormText;
+    width: 100%;
+	.form-section {
+		position: relative;
+		margin-bottom: $interiorMarginLg * 2;
+	}
+
     .section-header {
         border-radius: $basicCr;
         background: $colorFormSectionHeader;
@@ -29,14 +37,6 @@
         text-transform: uppercase;
     }
 
-.form {
-	color: $colorFormText;
-    width: 100%;
-	.form-section {
-		position: relative;
-		margin-bottom: $interiorMarginLg * 2;
-	}
-
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;
@@ -52,9 +52,9 @@
 		>.label,
 		>.controls {
 			box-sizing: border-box;
-			@include clearfix;
+			//@include clearfix;
 			font-size: 0.8rem;
-			line-height: $formInputH;
+			//line-height: $formInputH;
             min-height: $formInputH;
 		}
 

platform/features/plot/res/templates/plot-options-browse.html

@@ -41,6 +41,7 @@
             name="yAxisFormState"
             class="flex-elem l-flex-row no-validate no-margin reduced-min-width">
     </mct-form>
+    <div class="form">
         <div class="section-header ng-binding ng-scope">
             Plot Series
         </div>
@@ -74,3 +75,4 @@
             </ul>
         </ul>
     </div>
+</div>

platform/features/table/res/templates/table-options-edit.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-controller="TableOptionsController" class="flex-elem grows l-inspector-part">
+<div ng-controller="TableOptionsController" class="l-controls-first flex-elem grows l-inspector-part">
     <em class="t-inspector-part-header" title="Display properties for this object">Display</em>
     <mct-form
             ng-model="configuration.table.columns"