[Front-end] Normalize overlay bg color

Fixes #1617
[Documentation] Style Guide mobile styling
2025-06-24 18:25:19 +00:00 · 2017-06-28 16:07:41 -07:00 · 2017-06-28 14:39:51 -07:00 · 2017-06-28 14:38:23 -07:00 · 2017-06-28 12:51:12 -07:00 · 2017-06-28 11:05:44 -07:00
20 changed files with 654 additions and 116 deletions
--- a/example/styleguide/bundle.js
+++ b/example/styleguide/bundle.js
@ -19,7 +19,9 @@ define([
                { "key": "styleguide.glyphs", "name": "Glyphs", "cssClass": "icon-page", "description": "Glyphs overview" },
                { "key": "styleguide.controls", "name": "Controls", "cssClass": "icon-page", "description": "Buttons, selects, HTML controls" },
                { "key": "styleguide.input", "name": "Text Inputs", "cssClass": "icon-page", "description": "Various text inputs" },
-                { "key": "styleguide.menus", "name": "Menus", "cssClass": "icon-page", "description": "Context menus, dropdowns" }
+                { "key": "styleguide.menus", "name": "Menus", "cssClass": "icon-page", "description": "Context menus, dropdowns" },
+                { "key": "styleguide.tables", "name": "Tables", "cssClass": "icon-page", "description": "" },
+                { "key": "styleguide.forms", "name": "Forms", "cssClass": "icon-page", "description": "" }
            ],
            "views": [
                { "key": "styleguide.intro", "type": "styleguide.intro", "templateUrl": "templates/intro.html", "editable": false },
@ -28,7 +30,9 @@ define([
                { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "templateUrl": "templates/glyphs.html", "editable": false },
                { "key": "styleguide.controls", "type": "styleguide.controls", "templateUrl": "templates/controls.html", "editable": false },
                { "key": "styleguide.input", "type": "styleguide.input", "templateUrl": "templates/input.html", "editable": false },
-                { "key": "styleguide.menus", "type": "styleguide.menus", "templateUrl": "templates/menus.html", "editable": false }
+                { "key": "styleguide.menus", "type": "styleguide.menus", "templateUrl": "templates/menus.html", "editable": false },
+                { "key": "styleguide.tables", "type": "styleguide.tables", "templateUrl": "templates/tables.html", "editable": false },
+                { "key": "styleguide.forms", "type": "styleguide.forms", "templateUrl": "templates/forms.html", "editable": false }
            ],
            "roots": [
                {
@ -62,7 +66,9 @@ define([
                        "composition": [
                            "controls",
                            "input",
-                            "menus"
+                            "menus",
+                            "tables",
+                            "forms"
                        ]
                    }
                }
--- a/example/styleguide/res/sass/_style-guide-base.scss
+++ b/example/styleguide/res/sass/_style-guide-base.scss
@ -21,7 +21,6 @@
 *****************************************************************************/
 .l-style-guide {
    font-size: 0.9em;
-    text-align: justify;
    margin: auto 10%;

    a.link {
@ -47,6 +46,7 @@

    .w-markup {
        //Wrap markup example "pre" element
+        @include box-sizing(border-box);
        background-color: $colorCode;
        border-radius: $interiorMargin;
        display: block;
@ -64,6 +64,19 @@
        border-radius: $controlCr;
        display: inline-block;
        padding: 1px $interiorMargin;
+        &.block {
+            @include box-sizing(border-box);
+            display: block;
+            margin-bottom: $interiorMarginLg;
+            padding: $interiorMarginLg;
+            white-space: pre;
+            &.bad { background-color: $colorCodeBad; }
+            &.good { background-color: $colorCodeGood; }
+        }
+    }
+
+    p {
+        text-align: justify;
    }

    pre {
@ -77,7 +90,6 @@

    table, ul {
        margin-bottom: $interiorMarginLg;
-        width: auto;
    }

    .themed {
@ -93,50 +105,49 @@
        border-top: 1px solid rgba(#999, 0.3);
        margin-top: 2em;
        padding-top: 1em;
+    }

-        .cols {
-            @include display(flex);
-            @include flex-direction(row);
+    .cols {
+        @include display(flex);
+        @include flex-direction(row);

+        .col {
+            @include flex(1 1 auto);
+            @include box-sizing(border-box);
+            &:not(:last-child) {
+                border-right: 1px solid $colorInteriorBorder;
+                margin-right: $colGutter;
+                padding-right: $colGutter;
+            }
+            img {
+                width: 100%;
+            }
+        }
+
+        &.cols1-1 {
+            // 2 cols, equal width
            .col {
-                @include flex(1 1 auto);
-                &:not(:last-child) {
-                    $v: $interiorMargin * 4;
-                    border-right: 1px solid $colorInteriorBorder;
-                    margin-right: $v;
-                    padding-right: $v;
-                }
-                min-width: 300px;
-                img {
-                    width: 100%;
-                }
+                width: 50%;
            }
+        }

-            &.cols1-1 {
-                // 2 cols, equal width
-                .col {
-                    width: 50%;
-                }
+        &.cols1-2 {
+            // 3 cols, first is 1/3 of the width
+            .col:first-child {
+                width: 33%;
            }
-
-            &.cols1-2 {
-                // 3 cols, first is 1/3 of the width
-                .col:first-child {
-                    width: 33%;
-                }
-                .col:last-child {
-                    width: 66%;
-                }
+            .col:last-child {
+                width: 66%;
            }
+        }

-            &.cols2-1 {
-                // 3 cols, first is 2/3 of the width
-                .col:first-child {
-                    width: 66%;
-                }
-                .col:last-child {
-                    width: 33%;
-                }
+        &.cols2-1 {
+            // 3 cols, first is 2/3 of the width
+            .col:first-child {
+                width: 66%;
+            }
+            .col:last-child {
+                width: 33%;
            }
        }
    }
@ -197,3 +208,19 @@
    }
 }

+body.mobile {
+    .l-style-guide {
+        margin: auto $interiorMarginLg;
+        .cols {
+            @include flex-direction(column);
+            .col {
+                border-right: none;
+                margin-bottom: $colGutter;
+                margin-right: 0;
+                padding-right: 0;
+                width: auto !important;
+            }
+        }
+    }
+}
+
--- a/example/styleguide/res/sass/style-guide-espresso.scss
+++ b/example/styleguide/res/sass/style-guide-espresso.scss
@ -29,7 +29,10 @@

 // Thematic constants
 $colorCode: rgba(black, 0.2);
+$colorCodeBad: rgba(red, 0.2);
+$colorCodeGood: rgba(green, 0.2);
 $colorGlyphExample: #fff;
+$colGutter: $interiorMargin * 4;

@import "style-guide-base";

--- a/example/styleguide/res/sass/style-guide-snow.scss
+++ b/example/styleguide/res/sass/style-guide-snow.scss
@ -29,7 +29,10 @@

 // Thematic constants
 $colorCode: rgba(black, 0.1);
+$colorCodeBad: rgba(red, 0.2);
+$colorCodeGood: rgba(green, 0.2);
 $colorGlyphExample: darken($colorBodyBg, 30%);
+$colGutter: $interiorMargin * 4;

@import "style-guide-base";

--- a/example/styleguide/res/templates/controls.html
+++ b/example/styleguide/res/templates/controls.html
@ -25,7 +25,7 @@

    <div class="l-section">
        <h2>Standard Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
                <p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
@ -41,7 +41,7 @@

    <div class="l-section">
        <h2>&quot;Major&quot; Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
            </div>
@ -53,7 +53,7 @@

    <div class="l-section">
        <h2>Button Sets</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
                <p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
@ -69,7 +69,7 @@

    <div class="l-section">
        <h2>Icon-only Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the &quot;base&quot; of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.</p>
            </div>
@ -80,7 +80,7 @@

    <div class="l-section">
        <h2>Checkboxes</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
                <p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
@ -104,7 +104,7 @@

    <div class="l-section">
        <h2>Radio Buttons</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Radio buttons use the same technique as checkboxes above.</p>
            </div>
@ -128,7 +128,7 @@

    <div class="l-section">
        <h2>Selects</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The <code>select</code> element is wrapped by another element, such as a <code>div</code>, which acts as the main display element for the styling. The <code>select</code> provides the click and select functionality, while having all of its native look-and-feel suppressed.</p>
            </div>
@ -147,7 +147,7 @@

    <div class="l-section">
        <h2>Local Controls</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Local controls are typically buttons and selects that provide local control to an individual element. Typically, these controls are hidden in order to not block data display until the user hovers their cursor over an element, when the controls are displayed using a transition fade. Mousing out of the element fades the controls from view.</p>
            </div>
--- a/example/styleguide/res/templates/formatting.html
+++ b/example/styleguide/res/templates/formatting.html
@ -0,0 +1,66 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT 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 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.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Formatting</h1>
+
+    <div class="l-section">
+        <h2>ID and Class Naming</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <ul>
+                    <li>ID and class names should be human-readable: use names that are as short as possible while long enough to be meaningful. Ideally, names are semantic to the purpose of the element. Avoid names that don't convey meaning.</li>
+                    <li>Avoid class names that refer overtly to the presentation of an object (e.g. <code>.red</code>) - this strategy is brittle and doesn't allow for themeing.</li>
+                    <li>Generic names may be used for classes that serve as &quot;helpers&quot; such as <code>.alt</code>.</li>
+                </ul>
+            </div>
+            <div class="col">
+                <h3>Bad</h3>
+<code class="block bad">/* Not recommended, meaningless */
+.eg-991 {}
+
+/* Not recommended, presentational */
+.red {}
+.left {}
+</code>
+                <h3>Good</h3>
+<code class="block good">/* Recommended, meaningful */
+.form-row {}
+.form-section {}
+.plot-axis-x {}
+
+/* Recommended, specific */
+.limit-lower {}
+.limit-upper {}
+
+/* Recommended, generic */
+.align-right {}
+.ellipsis {}
+</code>
+
+            </div>
+        </div>
+
+
+    </div>
+
+</div>
--- a/example/styleguide/res/templates/forms.html
+++ b/example/styleguide/res/templates/forms.html
@ -0,0 +1,284 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT 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 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.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Forms</h1>
+
+    <div class="l-section">
+        <h2>Forms</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Content TK</p>
+            </div>
+<mct-example><div class="hint" style="margin-bottom: 5px;">All fields marked <span class="req icon-asterisk"></span> are required.</div>
+<form class="form validates l-flex-col">
+    <span class="l-form-section l-flex-col flex-elem">
+        <div class="section-header flex-elem">Properties</div>
+        <div class="form-row validates l-flex-row flex-elem first req">
+            <div class="label flex-elem">
+                Title
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <span class="form-control">
+                        <span class="field control l-input-lg">
+                            <input type="text">
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-row l-flex-row flex-elem validates req invalid">
+            <div class="label flex-elem">
+                Target
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <div class="form-control complex datetime">
+                        <div class="field-hints">
+                            <span class="hint date">Date</span>
+                            <span class="hint time sm">Hour</span>
+                            <span class="hint time sm">Min</span>
+                            <span class="hint time sm">Sec</span>
+                            <span class="hint timezone">Timezone</span>
+                        </div>
+                        <div class="fields">
+                            <span class="field control date">
+                                <input type="text" name="date" placeholder="YYYY-MM-DD" ng-pattern="/\d\d\d\d-\d\d-\d\d/" value="foo">
+                            </span>
+                            <span class="field control time sm">
+                                <input type="number" name="hour" maxlength="2" min="0" max="23" integer="" ng-pattern="/\d+/">
+                            </span>
+                            <span class="field control time sm">
+                                <input type="number" name="min" maxlength="2" min="0" max="59" integer="" ng-pattern="/\d+/">
+                            </span>
+                            <span class="field control time sm">
+                                <input type="number" name="sec" maxlength="2" min="0" max="59" integer="" ng-pattern="/\d+/">
+                            </span>
+                            <span class="field control timezone">
+                                UTC
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-row l-flex-row flex-elem validates valid">
+            <div class="label flex-elem">
+                Layout Grid
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <div class="l-composite-control l-textfield l-input-sm l-numeric">
+                        <span class="form-control shell ng-scope">
+                            <span class="field control ">
+                                <input type="number" min="1" value="10">
+                            </span>
+                        </span>
+                        <span class="composite-control-label ng-binding">
+                            Horizontal grid (px)
+                        </span>
+                    </div>
+                    <div class="l-composite-control l-textfield l-input-sm l-numeric">
+                        <span class="form-control shell ng-scope">
+                            <span class="field control ">
+                                <input type="number" min="1" value="10">
+                            </span>
+                        </span>
+                        <span class="composite-control-label ng-binding">
+                            Vertical grid (px)
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-row l-flex-row flex-elem">
+            <div class="label flex-elem">
+                Notes
+            </div>
+            <div class="controls flex-elem">
+                <div class="wrapper">
+                    <span class="form-control shell">
+                        <span class="field control l-textarea-sm">
+                            <textarea></textarea>
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+
+    </span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <span ng-repeat="section in structure.sections" class="l-form-section l-flex-col flex-elem grows">
+        <div class="section-header flex-elem">Location
+        </div><!-- end ngIf: section.name -->
+                    <!-- ngRepeat: row in section.rows --><ng-form class="form-row validates l-flex-row flex-elem grows first ng-valid-required ng-valid-pattern ng-invalid ng-invalid-composition" ng-class="{
+                 first:$index < 1,
+                 req: row.required,
+                 valid: mctFormInner.$dirty &amp;&amp; mctFormInner.$valid,
+                 invalid: mctFormInner.$dirty &amp;&amp; !mctFormInner.$valid,
+                 first: $index < 1,
+                'l-controls-first': row.layout === 'control-first',
+                'l-controls-under': row.layout === 'controls-under'
+                 }" name="mctFormInner" ng-repeat="row in section.rows">
+            <div class="label flex-elem" title="">
+                Save In
+            </div>
+            <div class="controls flex-elem">
+                <!-- ngIf: row.control --><div class="wrapper" ng-if="row.control">
+                    <mct-control key="row.control" ng-model="ngModel" ng-required="row.required" ng-pattern="/\S/" options="row.options" structure="row" field="row.key" class="ng-pristine ng-untouched ng-isolate-scope ng-valid-required ng-valid-pattern ng-invalid ng-invalid-composition"><!--
+ Open MCT, Copyright (c) 2014-2017, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT 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 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.
+-->
+<div ng-controller="LocatorController" class="selector-list">
+    <div class="wrapper">
+        <mct-representation key="'tree'" mct-object="rootObject" ng-model="treeModel" class="ng-pristine ng-untouched ng-valid ng-isolate-scope"><!--
+ Open MCT, Copyright (c) 2014-2017, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT 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 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.
+-->
+<mct-tree root-object="domainObject" selected-object="ngModel.selectedObject" on-selection="ngModel.onSelection" allow-selection="ngModel.allowSelection" class="ng-scope ng-isolate-scope">
+<ul class="tree"><li><span class="tree-item menus-to-left">
+<span class="ui-symbol view-control flex-elem has-children">
+</span><span class="rep-object-label" draggable="true">
+    <div class="t-object-label l-flex-row flex-elem grows">
+        <div class="t-item-icon flex-elem icon-folder"></div>
+        <div class="t-title-label flex-elem grows">Style Guide Home</div>
+    </div>
+</span></span>
+<span class="tree-item-subtree">
+</span></li><li><span class="tree-item menus-to-left">
+<span class="ui-symbol view-control flex-elem has-children">
+</span><span class="rep-object-label" draggable="true">
+    <div class="t-object-label l-flex-row flex-elem grows">
+        <div class="t-item-icon flex-elem icon-folder"></div>
+        <div class="t-title-label flex-elem grows">My Items</div>
+    </div>
+</span></span>
+<span class="tree-item-subtree">
+</span></li></ul></mct-tree>
+
+</mct-representation>
+    </div>
+</div>
+</mct-control>
+                </div><!-- end ngIf: row.control -->
+            </div>
+        </ng-form><!-- end ngRepeat: row in section.rows -->
+    </span><!-- end ngRepeat: section in structure.sections -->
+                </form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+            </mct-example>
+        </div>
+    </div>
+
+</div>
+
+
--- a/example/styleguide/res/templates/glyphs.html
+++ b/example/styleguide/res/templates/glyphs.html
@ -139,7 +139,7 @@

    <div class="l-section">
        <h2>How to Use Glyphs</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>The easiest way to use a glyph is to include its CSS class in element. The CSS adds a psuedo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
                <p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach for some reason.</p>
--- a/example/styleguide/res/templates/input.html
+++ b/example/styleguide/res/templates/input.html
@ -28,7 +28,7 @@

    <div class="l-section">
        <h2>Text Inputs</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Use a text input where the user should enter relatively short text entries.</p>
                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
@ -48,9 +48,23 @@
        </div>
    </div>

+    <div class="l-section">
+        <h2>Number Inputs</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Use a number input to limit the user to numeric input. </p>
+                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
+            </div>
+            <mct-example><input type="number" min="0" step="1" class="sm" />
+<br /><br />
+<input type="number" min="0" step="10" placeholder="1" />
+            </mct-example>
+        </div>
+    </div>
+
    <div class="l-section">
        <h2>Textareas</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
                <p>By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
--- a/example/styleguide/res/templates/mct-example.html
+++ b/example/styleguide/res/templates/mct-example.html
@ -1,8 +1,8 @@
 <div class="col">
+    <h3>Example</h3>
+    <div></div>
    <h3>Markup</h3>
    <span class="w-markup">
        <pre></pre>
    </span>
-    <h3>Example</h3>
-    <div></div>
 </div>
--- a/example/styleguide/res/templates/menus.html
+++ b/example/styleguide/res/templates/menus.html
@ -25,7 +25,7 @@

    <div class="l-section">
        <h2>Context Menus</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Context menus are used extensively in Open MCT. They are created dynamically upon a contextual click and positioned at the user's cursor position coincident with the element that invoked them. Context menus must use absolute position and utilize a z-index that places them above other in-page elements.</p>
                <p>See <a class="link" href="http://localhost:8080/#/browse/styleguide:home/controls?view=styleguide.standards">User Interface Standards</a> for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.</p>
@ -46,10 +46,10 @@

    <div class="l-section">
        <h2>Dropdown Menus</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Dropdown menus are a dedicated, more discoverable context menu for a given object. Like context menus, dropdown menus are used extensively in Open MCT, and are most often associated with object header elements. They visually manifest as a downward pointing arrow <span class="context-available"></span> associated with an element, and when clicked displays a context menu at that location. See guidelines above about context menus in regards to z-indexing and element lifecycle.</p>
-                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
+                <p>Use a dropdown menu to encapsulate the important actions of an object in its header, or in a place that you'd normally use a context menu, but want to make the availability of the menu more apparent.</p>
            </div>
 <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">

@ -71,10 +71,9 @@

    <div class="l-section">
        <h2>Checkbox Menus</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
-                <p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this to </p>
-                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
+                <p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this interface when you need to provide a quickly accessible multi-selection interface that disappears when not needed. For example, this element is used currently in our Search menu that allows users to filter results by a specific object type.</p>
            </div>
 <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
 <div ng-controller="SearchMenuController as controller" class="ng-scope">
@ -119,10 +118,10 @@

    <div class="l-section">
        <h2>Palettes</h2>
-        <div class="cols cols1-1">
+        <div class="cols cols1-2">
            <div class="col">
                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one.</p>
-                <p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
+                <p>Note that while this example uses static markup for illustrative purposes, we recommend that you use a front-end library with repeaters to build the color choices instead.</p>
            </div>
            <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">

--- a/example/styleguide/res/templates/tables.html
+++ b/example/styleguide/res/templates/tables.html
@ -0,0 +1,98 @@
+<!--
+ Open MCT, Copyright (c) 2014-2016, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT 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 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.
+-->
+<div class="l-style-guide s-text">
+    <p class="doc-title">Open MCT Style Guide</p>
+    <h1>Tables</h1>
+
+    <div class="l-section">
+        <h2>Simple Table</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Tables in Open MCT are used to display data in a rows and columns format. There's no need to add any CSS classes to markup to effect the proper look, but be sure to use <code>&lt;th&gt;</code>'s in the <code>&lt;thead&gt;</code> section to get the proper look.</p>
+                <p>We recommend using class <code>numeric</code> in columns that display numbers: this class right-aligns the text and allows numbers to be compared more easily.</p>
+            </div>
+<mct-example><table>
+    <thead>
+        <tr><th>Telemetry ID</th><th>Title</th><th>DN</th><th>EU</th><th>Status</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>ECA-250-28-E</td><td>Data Power Conduit A</td><td class='numeric'>3.440</td><td class='numeric'></td><td>stale</td></tr>
+        <tr><td>ECG-841-04-E</td><td>Containment Power Bus B</td><td class='numeric'>97.710</td><td class='numeric'></td><td>alert</td></tr>
+        <tr><td>ECH-526-13-D</td><td>Containment Pressure Bus B</td><td class='numeric'>9.510</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECL-498-70-C</td><td>Monitors Fuel Side Bus C</td><td class='numeric'>41.300</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECN-545-31-A</td><td>Containment Power Side Bus C</td><td class='numeric'>73.390</td><td class='numeric'>6.116</td><td>alert</td></tr>
+    </tbody>
+</table>
+            </mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Sortable Table</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Table headers typically enable users to sort the table by a given column either ascending or descending. Clicking on the header sorts by that column, first ascending, then toggling to descending. Sometimes, particularly with data, there is a use case to display and maintain the &quot;original&quot; no-sorted order: however the data arrives, display it in that order. In that case, we recommend that clicking a header repeatedly would first sort ascending, then descending, then back to the original order - no sort.</p>
+                <p>Note that this table illustrates sorting by Telemetry ID ascending and isn't functional: clicking the headers won't do anything. </p>
+                <p>Use the following CSS classes: add <code>sortable</code> to each <code>&lt;th&gt;</code> that is capable of sorting. The column that is currently driving the sort order should also be given the <code>sort</code> class. Finally, the sort direction is indicated with the addition of <code>asc</code> or <code>desc</code>. For example, a column that is currently sorting descending would have these classes attached to it: <code>sortable sort desc</code>.</p>
+                <p>Attach click handlers to the entire <code>&lt;th&gt;</code> element (not just to a link within) in order to maximize the usable click area in the header.</p>
+            </div>
+<mct-example><table>
+    <thead>
+        <tr><th class='sortable sort asc'>Telemetry ID</th><th class='sortable'>Title</th><th class='sortable'>DN</th><th class='sortable'>EU</th><th class='sortable'>Status</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>ECA-250-28-E</td><td>Data Power Conduit A</td><td class='numeric'>3.440</td><td class='numeric'></td><td>stale</td></tr>
+        <tr><td>ECG-841-04-E</td><td>Containment Power Bus B</td><td class='numeric'>97.710</td><td class='numeric'></td><td>alert</td></tr>
+        <tr><td>ECH-526-13-D</td><td>Containment Pressure Bus B</td><td class='numeric'>9.510</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECL-498-70-C</td><td>Monitors Fuel Side Bus C</td><td class='numeric'>41.300</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECN-545-31-A</td><td>Containment Power Side Bus C</td><td class='numeric'>73.390</td><td class='numeric'>6.116</td><td>alert</td></tr>
+    </tbody>
+</table>
+            </mct-example>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Table with Filters</h2>
+        <div class="cols cols1-2">
+            <div class="col">
+                <p>Table styles also support the addition of column filters. Simply add <code>filterable</code> to the table's class attribute, and add text or number inputs to a row in the <code>&lt;thead&gt;</code> for each column that is filterable. Filtering should take place for each key press in a given field.</p>
+            </div>
+<mct-example><table class="filterable">
+    <thead>
+        <tr><th class='sortable sort asc'>Telemetry ID</th><th class='sortable'>Title</th><th class='sortable'>DN</th><th class='sortable'>EU</th><th class='sortable'>Status</th></tr>
+        <tr><th><input type='text' /></th><th><input type='text' /></th><th><input type='number' step="0.001" /></th><th><input type='number' step="0.001" /></th><th><input type='text' /></th></tr>
+    </thead>
+    <tbody>
+        <tr><td>ECA-250-28-E</td><td>Data Power Conduit A</td><td class='numeric'>3.440</td><td class='numeric'></td><td>stale</td></tr>
+        <tr><td>ECG-841-04-E</td><td>Containment Power Bus B</td><td class='numeric'>97.710</td><td class='numeric'></td><td>alert</td></tr>
+        <tr><td>ECH-526-13-D</td><td>Containment Pressure Bus B</td><td class='numeric'>9.510</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECL-498-70-C</td><td>Monitors Fuel Side Bus C</td><td class='numeric'>41.300</td><td class='numeric'></td><td>ok</td></tr>
+        <tr><td>ECN-545-31-A</td><td>Containment Power Side Bus C</td><td class='numeric'>73.390</td><td class='numeric'>6.116</td><td>alert</td></tr>
+    </tbody>
+</table>
+            </mct-example>
+        </div>
+    </div>
+</div>
+
+
--- a/example/styleguide/src/ExampleStyleGuideModelProvider.js
+++ b/example/styleguide/src/ExampleStyleGuideModelProvider.js
@ -37,6 +37,8 @@ define(
            pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
            pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
            pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };
+            pages['tables'] = { name: "Tables", type: "styleguide.tables", location: "styleguide:ui-elements" };
+            pages['forms'] = { name: "Forms", type: "styleguide.forms" };

            return {
                getModels: function () {
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@ -111,7 +111,9 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextP: 3px 5px;
+$inputTextPVert: 3px;
+$inputTextPHorz: 5px;
+$inputTextP: $inputTextPVert $inputTextPHorz;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@ -234,6 +234,13 @@ input[type="number"] {
    }
 }

+body.desktop {
+    input[type="number"] {
+        // Desktop-only, don't pad the side of the input with the spinner
+        padding: $inputTextPVert 0 $inputTextPVert $inputTextPHorz;
+    }
+}
+
 .l-input-sm {
    input[type="text"],
    input[type="search"],
@ -242,11 +249,40 @@ input[type="number"] {
    }
 }

-.l-input-lg input[type="text"],
-input[type="text"].lg {  width: 100% !important; }
-.l-input-med input[type="text"],
-input[type="text"].med { width: 200px !important; }
-input[type="text"].sm {  width: 50px !important; }
+.l-input-med {
+    input[type="text"],
+    input[type="search"],
+    input[type="number"] {
+        width: 200px !important;
+    }
+}
+
+.l-input-lg {
+    input[type="text"],
+    input[type="search"],
+    input[type="number"] {
+        width: 100% !important;
+    }
+}
+
+input[type="search"].sm,
+input[type="number"].sm,
+input[type="text"].sm {
+    width: 50px !important;
+}
+
+input[type="search"].med,
+input[type="number"].med,
+input[type="text"].med {
+    width: 200px !important;
+}
+
+input[type="search"].lg,
+input[type="number"].lg,
+input[type="text"].lg {
+    width: 100% !important;
+}
+
 .l-numeric input[type="text"],
 input[type="text"].numeric { text-align: right; }

--- a/platform/commonUI/general/res/sass/forms/_datetime.scss
+++ b/platform/commonUI/general/res/sass/forms/_datetime.scss
@ -20,8 +20,9 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
@mixin complexFieldHolder($myW) {
-	width: $myW + $interiorMargin;
-	input[type="text"] {
+	width: $myW;
+	input[type="text"],
+    input[type="number"] {
 		width: $myW;
 	}
 }
@ -29,19 +30,13 @@
 .complex.datetime {
 	span {
 		display: inline-block;
-		margin-right: $interiorMargin;
+		margin-right: $interiorMarginSm;
 	}

-/*
-	.field-hints,
-	.fields {
-	}
-
-	
-	.field-hints {
-
-	}
-	*/
+    .field-hints,
+    .fields {
+        white-space: nowrap;
+    }

 	.fields {
 		margin-top: $interiorMarginSm 0;
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@ -29,7 +29,7 @@
    }
 }

-
+form.validates,
 mct-form.validates {
    .form-row.validates {
        > .label {
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@ -131,16 +131,41 @@ body.mobile {
    }
 }

-body.phone.portrait {
-    .pane-tree-showing {
-        .pane.left.treeview {
-            width: $proporMenuOnly !important;
+body.phone {
+    .form .form-row.l-flex-row  {
+        // Display elements in a columnar view
+        @include flex-direction(column);
+        > .flex-elem {
+            &:not(:first-child) {
+                margin-top: $interiorMargin;
+            }
+            &.label {
+                width: 100%;
+            }
+            &.controls {
+                overflow: auto;
+            }
        }
-        .pane.right.items {
-            left: 0 !important;
-            @include transform(translateX($proporMenuOnly));
-            .holder-object-and-inspector {
-                opacity: 0;
+
+        &.validates > .label:before {
+            position: relative;
+            right: auto;
+            line-height: inherit;
+            margin-right: $interiorMargin;
+        }
+    }
+
+    &.portrait {
+        .pane-tree-showing {
+            .pane.left.treeview {
+                width: $proporMenuOnly !important;
+            }
+            .pane.right.items {
+                left: 0 !important;
+                @include transform(translateX($proporMenuOnly));
+                .holder-object-and-inspector {
+                    opacity: 0;
+                }
            }
        }
    }
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@ -95,31 +95,9 @@
                min-width: 520px;
                max-width: $max; max-height: $max;
            }
+
            @include phone {
                overflow: auto;
-
-                .editor .form .form-row.l-flex-row  {
-                    // Display elements in a columnar view
-                    @include flex-direction(column);
-                    > .flex-elem {
-                        &:not(:first-child) {
-                            margin-top: $interiorMargin;
-                        }
-                        &.label {
-                            width: 100%;
-                        }
-                        &.controls {
-                            overflow: auto;
-                        }
-                    }
-
-                    &.validates > .label:before {
-                        position: relative;
-                        right: auto;
-                        line-height: inherit;
-                        margin-right: $interiorMargin;
-                    }
-                }
            }

            @include containerSubtle($colorOvrBg, $colorOvrFg);
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@ -142,8 +142,8 @@ $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);

 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: pullForward($colorBodyBg, 10%);
-$colorOvrFg: pullForward($colorBodyFg, 30%);
+$colorOvrBg: $colorBodyBg;
+$colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
Author	SHA1	Message	Date
Charles Hacskaylo	95af4d8f02	[Front-end] Normalize overlay bg color Fixes #1617	2017-06-28 16:07:41 -07:00
Charles Hacskaylo	90e57d4ed1	[Documentation] Style Guide mobile styling Fixes #1617 Also includes layout cleanups	2017-06-28 14:39:51 -07:00
Charles Hacskaylo	20afe9327b	[CSS] Style tweaks, refactoring Fixes #1617 Prompted by desire to do cleanups for style guide examples: - Better padding for number input; - Prevent wrapping in complex datetime inputs - Move mobile form layout styles from overlay.scss into mobile/_layout.scss; -	2017-06-28 14:38:23 -07:00
Charles Hacskaylo	6ce8561d08	[Documentation] WIP stub in Formatting content and styles Fixes #1617	2017-06-28 12:51:12 -07:00
Charles Hacskaylo	04bce9a3e1	[Documentation] WIP adding Forms content and examples Fixes #1617 Includes addition of number input to selector in datetime.scss	2017-06-28 11:05:44 -07:00
Charles Hacskaylo	e5eb6b4c71	[Documentation] WIP adding Forms content and examples Fixes #1617	2017-06-27 16:03:27 -07:00
Charles Hacskaylo	cbd3f2d2bc	[Documentation] Tweaked Tables content Fixes #1617	2017-06-27 15:30:29 -07:00
Charles Hacskaylo	6879e4d7e7	[Documentation] Added Tables content Fixes #1617	2017-06-27 15:15:22 -07:00
Charles Hacskaylo	d9b50406aa	[Documentation] Tweaked cols markup Fixes #1617	2017-06-27 15:14:47 -07:00
Charles Hacskaylo	57ce799d2c	[Documentation] Fixed content issues. Fixes #1617	2017-06-27 12:44:17 -07:00
Charles Hacskaylo	c8f307c07d	[Documentation] Change order of example vs. markup Fixes #1617	2017-06-26 18:54:38 -07:00
Charles Hacskaylo	095d1095f1	[Documentation] Add number input Fixes #1617	2017-06-26 18:54:03 -07:00