[Frontend] Further cleanups to form elements

#700
#689
#740
Removed _selects.scss and moved classes
into _controls.scss;
Reorg'd _controls;
Moved classes into _elems.scss;
Added and fixed cssclass defs in multiple
bundle.js files to allow better field widths
in overlay dialogs;
Fixed overlay custom scrollbar colors;
Fixed alignment of required glyphs in forms;

example/generator/bundle.js

@@ -126,7 +126,7 @@ define([
                         {
                             "name": "Period",
                             "control": "textfield",
-                            "cssclass": "l-small l-numeric",
+                            "cssclass": "l-input-sm l-numeric",
                             "key": "period",
                             "required": true,
                             "property": [

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

@@ -45,7 +45,6 @@
 
 /********************************* FORMS */
 @import "forms/elems";
-@import "forms/selects";
 @import "forms/channel-selector";
 @import "forms/datetime";
 @import "forms/validation";

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

@@ -74,6 +74,12 @@
 
 .l-composite-control {
     vertical-align: middle;
+    &:not(.l-inline) {
+        margin-bottom: $interiorMargin;
+    }
+    &.l-inline {
+        display: inline-block;
+    }
     &.l-checkbox {
         .composite-control-label {
             line-height: 18px;
@@ -108,6 +114,7 @@
     font-size: 0.7rem;
 }
 
+/******************************************************** CUSTOM CHECKBOXES */
 label.checkbox.custom,
 label.radio.custom {
     $bg: pullForward($colorBodyBg, 10%);
@@ -162,7 +169,40 @@ label.radio.custom {
 label.checkbox.custom input:checked ~ em:before { content: "\32"; }
 label.radio.custom input:checked ~ em:before { content: "\e619"; }
 
+.s-menu-btn label.checkbox.custom {
+    margin-left: 5px;
+}
+
+.item .checkbox {
+    &.checked label {
+        box-shadow: none;
+        border-bottom: none;
+    }
+}
+
+label.form-control.checkbox {
+    input {
+        margin-right: $interiorMargin;
+        vertical-align: top;
+    }
+}
+
+/******************************************************** INPUTS */
+input[type="text"],
+input[type="search"] {
+    @include nice-input();
+    &.numeric {
+        text-align: right;
+    }
+}
+
+.l-input-lg input[type="text"] {  width: 100% !important; }
+.l-input-med input[type="text"] { width: 200px !important; }
+.l-input-sm input[type="text"] {  width: 50px !important; }
+.l-numeric input[type="text"] { text-align: right; }
+
 .input-labeled {
+    // Used in toolbar
     margin-left: $interiorMargin;
     label {
         display: inline-block;
@@ -176,30 +216,38 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
     }
 }
 
-.s-menu-btn label.checkbox.custom {
+/******************************************************** SELECTS */
-    margin-left: 5px;
+.select {
+    @include btnSubtle($colorSelectBg);
+    @if $shdwBtns != none {
+        margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
     }
-
+    padding: 0 $interiorMargin;
-.item .checkbox {
+    overflow: hidden;
-    &.checked label {
+    position: relative;
-        box-shadow: none;
+    line-height: $formInputH;
-        border-bottom: none;
+    select {
+        @include appearance(none);
+        box-sizing: border-box;
+        background: none;
+        color: $colorSelectFg;
+        cursor: pointer;
+        border: none !important;
+        padding: 4px 25px 2px 0px;
+        width: 130%;
+        option {
+            margin: $interiorMargin 0; // Firefox
         }
     }
-
+    &:after {
-.context-available,
+        @include contextArrow();
-.s-icon-btn {
+        pointer-events: none;
-    $c: $colorKey;
+        color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
-    color: $c;
+        position: absolute;
-    &:hover {
+        right: $interiorMargin; top: 0;
-        color: lighten($c, 10%);
     }
 }
 
-.view-switcher {
-    @include trans-prop-nice-fade($controlFadeMs);
-}
-
 /******************************************************** OBJECT-HEADER */
 .object-header {
     font-size: 1em;
@@ -331,7 +379,6 @@ body.desktop .object-header {
 }
 
 /******************************************************** SLIDERS */
-
 .slider {
     $knobH: 100%;
     .slot {
@@ -425,7 +472,7 @@ body.desktop .object-header {
         border-top: 1px solid $colorInteriorBorder
     }
     .l-time-selects {
-        line-height: $formInputH;
+        line-height: inherit; //$formInputH;
     }
 }
 
@@ -479,11 +526,31 @@ body.desktop .object-header {
     }
 }
 
-/******************************************************** BROWSER ELEMENTS */
+/******************************************************** TEXTAREA */
+textarea {
+    @include nice-textarea($colorInputBg, $colorInputFg);
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
 
+/******************************************************** MISC */
+.context-available,
+.s-icon-btn {
+    $c: $colorKey;
+    color: $c;
+    &:hover {
+        color: lighten($c, 10%);
+    }
+}
+
+.view-switcher {
+    @include trans-prop-nice-fade($controlFadeMs);
+}
+
+/******************************************************** BROWSER ELEMENTS */
 body.desktop {
     ::-webkit-scrollbar {
-        border-radius: 2px;
         box-sizing: border-box;
         box-shadow: inset $scrollbarTrackShdw;
         background-color: $scrollbarTrackColorBg;
@@ -492,15 +559,15 @@ body.desktop {
     }
 
     ::-webkit-scrollbar-thumb {
-        $bg: $scrollbarThumbColor;
-        $hc: $scrollbarThumbColorHov;
-        $gr: 5%;
-        @include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
-        border-radius: 2px;
         box-sizing: border-box;
-        &:hover {
+        background: $scrollbarThumbColor;
-            @include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
+        &:hover { background: $scrollbarThumbColorHov; }
     }
+
+    .overlay ::-webkit-scrollbar-thumb {
+        $lr: 15%;
+        background: $scrollbarThumbColorOverlay;
+        &:hover { background: $scrollbarThumbColorOverlayHov; }
     }
 
     ::-webkit-scrollbar-corner {

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

@@ -139,13 +139,6 @@
     }
 }
 
-label.form-control.checkbox {
-	input {
-		margin-right: $interiorMargin;
-		vertical-align: top;
-	}
-}
-
 .hint,
 .s-hint {
 	font-size: 0.9em;
@@ -166,30 +159,3 @@ label.form-control.checkbox {
 		padding: $interiorMargin;
 	}
 }
-
-input[type="text"],
-input[type="search"] {
-	@include nice-input();
-	&.numeric {
-		text-align: right;
-	}
-}
-
-.l-input-med input[type="text"] {
-    width: 200px !important;
-}
-
-.l-input-sm input[type="text"] {
-    width: 50px !important;
-}
-
-.l-numeric input[type="text"] {
-    text-align: right;
-}
-
-textarea {
-	@include nice-textarea($colorInputBg, $colorInputFg);
-	position: absolute;
-	height: 100%;
-	width: 100%;
-}

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

@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-.select {
-	@include btnSubtle($colorSelectBg);
-    @if $shdwBtns != none {
-	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
-    }
-	padding: 0 $interiorMargin;
-    overflow: hidden;
-	position: relative;
-    line-height: $formInputH;
-	select {
-		@include appearance(none);
-		box-sizing: border-box;
-		background: none;
-		color: $colorSelectFg;
-		cursor: pointer;
-		border: none !important;
-		padding: 4px 25px 2px 0px;
-        width: 130%;
-        option {
-            margin: $interiorMargin 0; // Firefox
-        }
-	}
-	&:after {
-		@include contextArrow();
-		pointer-events: none;
-		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
-		position: absolute;
-		right: $interiorMargin; top: 0;
-	}
-}

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

@@ -35,7 +35,6 @@
         z-index: 100;
     }
     > .holder {
-        //$i: 15%;
         @include containerSubtle($colorOvrBg, $colorOvrFg);
         border-radius: $basicCr * 3;
         color: $colorOvrFg;
@@ -57,15 +56,8 @@
             right: $m;
             bottom: $m;
             left: $m;
-
-            //.top-bar,
-            //.editor,
-            //.bottom-bar {
-            //    @include absPosDefault();
-            //}
         }
     }
-
     .title {
         @include ellipsize();
         font-size: 1.2em;
@@ -120,7 +112,6 @@
         bottom: 0;
         left: 0;
         overflow: visible;
-        //font-size: 1em;
         height: $ovrFooterH;
     }
 
@@ -132,11 +123,14 @@
         margin: .5em 0;
         width: 100%;
     }
+
+    .select {
+        box-shadow: $shdwBtnsOverlay;
+    }
 }
 
 .t-dialog-sm .overlay > .holder {
     // Used for blocker and in-progress dialogs, modal alerts, etc.
-    //@include test(red);
     $h: 225px;
     min-height: $h;
     height: $h;

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -27,6 +27,7 @@ $colorBtnIcon: $colorKey;
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 $shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.1);
 $sliderColorRange: rgba($sliderColorBase, 0.3);
@@ -173,6 +174,8 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $scrollbarThumbColor: lighten($colorBodyBg, 10%);
 $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
+$scrollbarThumbColorOverlay: lighten($colorOvrBg, 10%);
+$scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);
 
 // Splitter
 $splitterD: 25px; // splitterD and HandleD should both be odd, or even

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -27,6 +27,7 @@ $colorBtnIcon: #eee;
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 $shdwBtns: none;
+$shdwBtnsOverlay: none;
 $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.07);
 $sliderColorRange: rgba($sliderColorBase, 0.2);
@@ -170,9 +171,11 @@ $shdwItemTreeIcon: none;
 // Scrollbar
 $scrollbarTrackSize: 10px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
-$scrollbarTrackColorBg: rgba(#000, 0.1);
+$scrollbarTrackColorBg: rgba(#000, 0.2);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);//
+$scrollbarThumbColor: darken($colorBodyBg, 50%);
 $scrollbarThumbColorHov: $colorKey;
+$scrollbarThumbColorOverlay: darken($colorOvrBg, 15%);
+$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
 
 // Splitter
 $splitterD: 24px;

platform/core/bundle.js

@@ -248,7 +248,7 @@ define([
                             "property": "name",
                             "pattern": "\\S+",
                             "required": true,
-                            "cssclass": "l-med"
+                            "cssclass": "l-input-lg"
                         }
                     ]
                 },

platform/features/clock/bundle.js

@@ -182,7 +182,8 @@ define([
                                             "value": "hh:mm:ss",
                                             "name": "hh:mm:ss"
                                         }
-                                    ]
+                                    ],
+                                    "cssclass": "l-inline"
                                 },
                                 {
                                     "control": "select",
@@ -195,7 +196,8 @@ define([
                                             "value": "clock24",
                                             "name": "24hr"
                                         }
-                                    ]
+                                    ],
+                                    "cssclass": "l-inline"
                                 }
                             ]
                         }
@@ -223,6 +225,7 @@ define([
                         {
                             "key": "timerFormat",
                             "control": "select",
+                            "name": "Display Format",
                             "options": [
                                 {
                                     "value": "long",

platform/features/layout/bundle.js

@@ -278,12 +278,12 @@ define([
                                 {
                                     "name": "Horizontal grid (px)",
                                     "control": "textfield",
-                                    "cssclass": "l-small l-numeric"
+                                    "cssclass": "l-input-sm l-numeric"
                                 },
                                 {
                                     "name": "Vertical grid (px)",
                                     "control": "textfield",
-                                    "cssclass": "l-small l-numeric"
+                                    "cssclass": "l-input-sm l-numeric"
                                 }
                             ],
                             "key": "layoutGrid",

platform/features/pages/bundle.js

@@ -49,7 +49,8 @@ define([
                             "name": "URL",
                             "control": "textfield",
                             "pattern": "^(ftp|https?)\\:\\/\\/\\w+(\\.\\w+)*(\\:\\d+)?(\\/\\S*)*$",
-                            "required": true
+                            "required": true,
+                            "cssclass": "l-input-lg"
                         }
                     ]
                 }