[Frontend] Form and form control enhancements

WTD-1002
Added Angular hooks to allow form elements to have JSON defined CSS classes
Form element cleanups

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

@@ -22,11 +22,12 @@
 		padding: $interiorMargin;
 		position: relative;
 		&:first-child {
-			border-top: none;
+//			border-top: none;
 		}
 
 		.label,
 		.controls {
+//			@include test(orange);
 			@include box-sizing(border-box);
 			@include clearfix;
 			box-sizing: border-box;
@@ -50,18 +51,38 @@
 		.controls {
 			float: left;
             position: relative;
-			width: 99% - $formLabelW; // Start with less than 100% for Firefox
+			width: 99.9% - $formLabelW; // Start with less than 100% for Firefox
 
 			.l-composite-control {
-				display: inline-block;
+//				display: inline-block;
 				&.l-checkbox {
 //					@include test();
 //					height: $formRowCtrlsH;
+					display: inline-block;
 					line-height: $formRowCtrlsH;
 					margin-right: 5px;
 				}
 			}
 
+			input[type="text"] {
+				height: $formInputH;
+				line-height: $formInputH;
+				margin-top: -4px;
+				vertical-align: baseline;
+			}
+
+			.l-med input[type="text"] {
+				width: 200px;
+			}
+
+			.l-small input[type="text"] {
+				width: 50px;
+			}
+
+			.l-numeric input[type="text"] {
+				text-align: right;
+			}
+
 			.select {
 				margin-right: $interiorMargin;
 			}
@@ -75,10 +96,13 @@
 			// Used in create overlay to display tree view
 			$h: 150px;
 			@include border-radius($basicCr);
+			@include box-sizing(border-box);
 			background: rgba(black, 0.2);
+			padding: $interiorMargin;
 			position: relative;
 			height: $h;
-			max-width: 50%;
+			overflow: auto;
+//			max-width: 50%;
 			.wrapper {
 				$p: $interiorMargin;
 				overflow-y: auto;

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

@@ -3,9 +3,10 @@
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
 	@include box-shadow(inset rgba(black, 0.5) 0 1px 5px);
-	background: lighten($bg, 20%);
+//	background: lighten($bg, 20%);
+	background: rgba(#fff, 0.1);
 	border: none;
-	border-bottom: 1px solid lighten($bg, 40%);
+	border-bottom: 1px solid rgba(#fff, 0.1);
 	color: lighten($fg, 20%);
 	outline: none;
 	&.error {

platform/commonUI/general/res/sass/forms/_text-input.scss

@@ -1,8 +1,5 @@
 input[type="text"] {
 	@include nice-input();
-	height: $formInputH;
-	line-height: $formInputH;
-	vertical-align: middle;
     &.filter {
         &.ng-dirty {
 //            background: red;

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

@@ -27,6 +27,7 @@
         }
 	}
     .title {
+	    @include ellipsize();
         font-size: 1.3em;
     }