[Mobile] IN PROGRESS: Styling in forms, overlay and tree

open #74
.section-header and form-row styles changed in forms/_elems.scss;
significant changes to overlay in mobile: full-screen, close button, more;
tree hover bg changed to use rgba(#fff, 0.1);
removed "Hide title by default" in core/bundle.json;

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

@@ -48,6 +48,7 @@ $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
 $colorFormLines: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.2);
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
@@ -104,6 +105,7 @@ $ueEditLeftPaneW: 75%;
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
+$overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
@@ -145,9 +147,11 @@ $reqSymbolFontSize: 0.7em;
 
 /************************** CONTROLS */
 $controlDisabledOpacity: 0.3;
-$formLabelW: 20%;
+$formLabelW: 30%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;

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

@@ -20,20 +20,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
-	@include border-radius(3px);
-	background: $colorFormLines;
+	@include border-radius($basicCr);
+	background: rgba(#fff, 0.1);
+	$c: lighten($colorBodyFg, 20%);
+	//border-bottom: 1px solid rgba(#fff, 0.3);
+	color: $c;
 	font-size: 0.8em;
-	margin-top: $interiorMargin;
-	padding: $interiorMargin;
-	&:first-child {
-		margin-top: 0;
-	}
+	padding: $formTBPad $formLRPad;
+	text-transform: uppercase;
 }
 
 .form {
 //	@include test(orange);
 	.form-section {
 		position: relative;
+		margin-bottom: $interiorMarginLg * 2;
 	}
 
 	.form-row {
@@ -42,7 +43,7 @@
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
 		margin-top: $m;
-		padding: $m;
+		padding: $formTBPad $formLRPad;
 		position: relative;
 		&.first {
 			border-top: none;

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

@@ -1,6 +1,10 @@
 @include phoneandtablet {
     .overlay {
         $m: 0;
+        .clk-icon.close {
+            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
+        }
+
         > .holder {
             @include border-radius($m);
             top: $m;
@@ -13,6 +17,12 @@
                 bottom: $mobileOverlayMargin;
                 left: $mobileOverlayMargin;
 
+                .top-bar {
+                    > .title {
+                        margin-right: 1.2em;
+                    }
+                }
+
                 .form.editor {
                     border: none;
 

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

@@ -24,16 +24,10 @@
 		background: $colorOvrBlocker;
 		z-index: 100;
 	}
-    .btn.close {
-	    @include border-radius($basicCr * 2);
-	    padding: 3px 6px;
+    .clk-icon.close {
         position: absolute;
-	    border: none;
-        top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
+        top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
 	    z-index: 100;
-    }
-    .editor {
-//        background: $colorBodyBg;
     }
 	>.holder {
 		$i: 15%;
@@ -43,13 +37,13 @@
 		top: $i; right: $i; bottom: $i; left: $i;
 		z-index: 101;
         >.contents {
-            $m: 25px;
+            $m: $overlayMargin;
             top: $m; right: $m; bottom: $m; left: $m;
         }
 	}
     .title {
 	    @include ellipsize();
-        font-size: 1.3em;
+        font-size: 1.2em;
 	    margin-bottom: $interiorMargin;
     }
     

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -132,7 +132,7 @@ ul.tree {
                 // NOTE: [Mobile] Removed Hover on Mobile
                 @include desktop {
                     &:hover {
-                        background: lighten($colorBodyBg, 5%);
+                        background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
                         color: lighten($colorBodyFg, 20%);
                         .context-trigger {
                             display: block;