[Frontend] Final styling on properties form in Inspector

open #638
Added custom radio button control and modified
PlotOptionsController / plotOptionsStructure
accordingly; spacing, borders, etc. are
all as finally intended;

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

@@ -32,14 +32,16 @@
     color: $colorInspectorFg;
     line-height: 140%;
 
-    .flex-elem.holder:not(:last-child) { margin-bottom: $interiorMargin; }
+    .flex-elem.holder:not(:last-child) {
+        margin-bottom: $interiorMargin;
+    }
 
     .pane-header {
         color: pushBack($colorInspectorFg, 20%);
         font-size: 0.8rem;
         &:before {
             color: pushBack($colorInspectorFg, 10%);
-            content:'\e615'; // e615 Crosshair symbol
+            content: '\e615'; // e615 Crosshair symbol
             display: inline;
             font-family: symbolsfont;
             margin-right: $interiorMargin;
@@ -56,16 +58,23 @@
             }
         }
     }
-    
+
     .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;
+            margin-bottom: $interiorMarginLg;
+            .form-section {
+                margin-bottom: 0;
+                &:not(.first) {
+                    border-top: 1px solid $colorFormLines;
+                }
+                .form-row {
+                    @include align-items(center);
+                    border: none;
+                    padding: 0;
+                }
             }
         }
     }
@@ -79,7 +88,7 @@
     ul li {
         margin-bottom: $interiorMarginLg;
     }
-    
+
     em.t-inspector-part-header {
         @include border-radius($basicCr);
         background-color: $colorInspectorSectionHeaderBg;
@@ -162,8 +171,16 @@
     }
 }
 
+mct-representation:not(.s-status-editing) .l-inspect {
+    .split-pane-component.pane.top {
+        bottom: 0 !important;
+    }
+}
+
 .s-status-editing .l-inspect {
-    .location-item { pointer-events: none; }
+    .location-item {
+        pointer-events: none;
+    }
     .splitter-inspect-panel,
     .split-pane-component.pane.bottom {
         opacity: 1;

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

@@ -83,7 +83,6 @@
 
 .l-control-group {
     // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
-    //    @include test();
     @include box-sizing(border-box);
     border-left: 1px solid $colorInteriorBorder;
     display: inline-block;
@@ -115,11 +114,9 @@ label.radio.custom {
     $d: $formRowCtrlsH;
     cursor: pointer;
     display: inline-block;
-    //line-height: $d;
     margin-right: $interiorMargin * 4;
     padding-left: $d + $interiorMargin;
     position: relative;
-    //vertical-align: middle; // was top
     em {
         color: $colorBodyFg;
         display: inline-block;
@@ -132,7 +129,7 @@ label.radio.custom {
             box-sizing: border-box;
             content: "";
             font-family: 'symbolsfont';
-            font-size: 0.8em;
+            font-size: 0.7em;
             display: inline-block;
             height: $d;
             width: $d;