Edit mode button works

open #198
Minor tweak to placeholder init content;

.gitignore

@@ -3,8 +3,13 @@
 *.gzip
 *.tgz
 *.DS_Store
-*.idea
+
 *.sass-cache
+*COMPILE.css
+
+# Intellij project configuration files
+*.idea
+*.iml
 
 # External dependencies
 

CONTRIBUTING.md

@@ -238,6 +238,9 @@ Commit messages should:
 * Contain a reference to a relevant issue number in the body of the commit.
   * This is important for traceability; while branch names also provide this,
     you cannot tell from looking at a commit what branch it was authored on.
+  * This may be omitted if the relevant issue is otherwise obvious from the
+    commit history (that is, if using `git log` from the relevant commit
+    directly leads to a similar issue reference) to minimize clutter.
 * Describe the change that was made, and any useful rationale therefore.
   * Comments in code should explain what things do, commit messages describe
     how they came to be done that way.

README.md

@@ -103,6 +103,21 @@ This build will:
 
 Run as `mvn clean install`.
 
+### Building Documentation
+
+Open MCT Web's documentation is generated by an
+[npm](https://www.npmjs.com/)-based build:
+
+* `npm install` _(only needs to run once)_
+* `npm run docs`
+
+Documentation will be generated in `target/docs`. Note that diagram
+generation is dependent on having [Cairo](http://cairographics.org/download/)
+installed; see
+[node-canvas](https://github.com/Automattic/node-canvas#installation)'s
+documentation for help with installation.
+
+
 # Glossary
 
 Certain terms are used throughout Open MCT Web with consistent meanings

bundles.json

@@ -8,6 +8,8 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
+    "platform/commonUI/mobile",
+    "platform/commonUI/themes/espresso",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
@@ -18,13 +20,14 @@
     "platform/features/scrolling",
     "platform/features/events",
     "platform/forms",
+    "platform/identity",
+    "platform/persistence/local",
     "platform/persistence/queue",
     "platform/policy",
     "platform/entanglement",
     "platform/search",
 
     "example/imagery",
-    "example/persistence",
     "example/eventGenerator",
     "example/generator"
 ]

circle.yml

@@ -8,3 +8,7 @@ deployment:
     branch: search
     heroku:
       appname: openmctweb-staging-un
+  openmctweb-staging-deux:
+    branch: mobile
+    heroku:
+      appname: openmctweb-staging-deux

example/generator/bundle.json

@@ -34,6 +34,10 @@
                         {
                             "key": "time",
                             "name": "Time"
+                        },
+                        {
+                            "key": "yesterday",
+                            "name": "Yesterday"
                         }
                     ],
                     "ranges": [
@@ -61,4 +65,4 @@
             }
         ]
     }
-}
+}

example/generator/src/SinewaveTelemetryProvider.js

@@ -25,8 +25,8 @@
  * Module defining SinewaveTelemetryProvider. Created by vwoeltje on 11/12/14.
  */
 define(
-    ["./SinewaveTelemetry"],
-    function (SinewaveTelemetry) {
+    ["./SinewaveTelemetrySeries"],
+    function (SinewaveTelemetrySeries) {
         "use strict";
 
         /**
@@ -45,7 +45,7 @@ define(
             function generateData(request) {
                 return {
                     key: request.key,
-                    telemetry: new SinewaveTelemetry(request)
+                    telemetry: new SinewaveTelemetrySeries(request)
                 };
             }
 
@@ -112,4 +112,4 @@ define(
 
         return SinewaveTelemetryProvider;
     }
-);
+);

example/generator/src/SinewaveTelemetrySeries.js

@@ -29,35 +29,47 @@ define(
     function () {
         "use strict";
 
-        var firstObservedTime = Date.now();
+        var ONE_DAY = 60 * 60 * 24,
+            firstObservedTime = Math.floor(Date.now() / 1000) - ONE_DAY;
 
         /**
          *
          * @constructor
          */
-        function SinewaveTelemetry(request) {
-            var latestObservedTime = Date.now(),
-                count = Math.floor((latestObservedTime - firstObservedTime) / 1000),
-                period = request.period || 30,
-                generatorData = {};
+        function SinewaveTelemetrySeries(request) {
+            var timeOffset = (request.domain === 'yesterday') ? ONE_DAY : 0,
+                latestTime = Math.floor(Date.now() / 1000) - timeOffset,
+                firstTime = firstObservedTime - timeOffset,
+                endTime = (request.end !== undefined) ?
+                        Math.floor(request.end / 1000) : latestTime,
+                count = Math.min(endTime, latestTime) - firstTime,
+                period = +request.period || 30,
+                generatorData = {},
+                requestStart = (request.start === undefined) ? firstTime :
+                        Math.max(Math.floor(request.start / 1000), firstTime),
+                offset = requestStart - firstTime;
+
+            if (request.size !== undefined) {
+                offset = Math.max(offset, count - request.size);
+            }
 
             generatorData.getPointCount = function () {
-                return count;
+                return count - offset;
             };
 
             generatorData.getDomainValue = function (i, domain) {
-                return i * 1000 +
-                        (domain !== 'delta' ? firstObservedTime : 0);
+                return (i + offset) * 1000 + firstTime * 1000 -
+                    (domain === 'yesterday' ? ONE_DAY : 0);
             };
 
             generatorData.getRangeValue = function (i, range) {
                 range = range || "sin";
-                return Math[range](i * Math.PI * 2 / period);
+                return Math[range]((i + offset) * Math.PI * 2 / period);
             };
 
             return generatorData;
         }
 
-        return SinewaveTelemetry;
+        return SinewaveTelemetrySeries;
     }
-);
+);

example/identity/bundle.json

@@ -0,0 +1,12 @@
+{
+    "extensions": {
+        "components": [
+            {
+                "implementation": "ExampleIdentityService.js",
+                "provides": "identityService",
+                "type": "provider",
+                "depends": [ "dialogService" ]
+            }
+        ]
+    }
+}

example/identity/src/ExampleIdentityService.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        "use strict";
+
+        var DEFAULT_IDENTITY = { key: "user", name: "Example User" },
+            DIALOG_STRUCTURE = {
+                name: "Identify Yourself",
+                sections: [{ rows: [
+                    {
+                        name: "User ID",
+                        control: "textfield",
+                        key: "key",
+                        required: true
+                    },
+                    {
+                        name: "Human name",
+                        control: "textfield",
+                        key: "name",
+                        required: true
+                    }
+                ]}]
+            };
+
+
+        /**
+         * Example implementation of an identity service. This prompts the
+         * user to enter a name and user ID; in a more realistic
+         * implementation, this would be read from a server, possibly
+         * prompting for a user name and password (or similar) as
+         * appropriate.
+         *
+         * @implements {IdentityService}
+         * @memberof platform/identity
+         */
+        function ExampleIdentityProvider(dialogService) {
+            // Handle rejected dialog messages by treating the
+            // current user as undefined.
+            function echo(v) { return v; }
+            function giveUndefined() { return undefined; }
+
+            this.userPromise =
+                dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
+                    .then(echo, giveUndefined);
+        }
+
+        ExampleIdentityProvider.prototype.getUser = function () {
+            return this.userPromise;
+        };
+
+        return ExampleIdentityProvider;
+    }
+);

example/localstorage/src/LocalStoragePersistenceProvider.js

@@ -1,86 +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.
- *****************************************************************************/
-
-/*global define,localStorage*/
-/**
- * Stubbed implementation of a persistence provider,
- * to permit objects to be created, saved, etc.
- */
-define(
-    [],
-    function () {
-        'use strict';
-
-        function BrowserPersistenceProvider($q, SPACE) {
-            var spaces = SPACE ? [SPACE] : [],
-                promises = {
-                    as: function (value) {
-                        return $q.when(value);
-                    }
-                },
-                provider;
-
-            function setValue(key, value) {
-                localStorage[key] = JSON.stringify(value);
-            }
-
-            function getValue(key) {
-                if (localStorage[key]) {
-                    return JSON.parse(localStorage[key]);
-                }
-                return {};
-            }
-
-            provider = {
-                listSpaces: function () {
-                    return promises.as(spaces);
-                },
-                listObjects: function (space) {
-                    var space_obj = getValue(space);
-                    return promises.as(Object.keys(space_obj));
-                },
-                createObject: function (space, key, value) {
-                    var space_obj = getValue(space);
-                    space_obj[key] = value;
-                    setValue(space, space_obj);
-                    return promises.as(true);
-                },
-                readObject: function (space, key) {
-                    var space_obj = getValue(space);
-                    return promises.as(space_obj[key]);
-                },
-                deleteObject: function (space, key, value) {
-                    var space_obj = getValue(space);
-                    delete space_obj[key];
-                    return promises.as(true);
-                }
-            };
-
-            provider.updateObject = provider.createObject;
-
-            return provider;
-
-        }
-
-        return BrowserPersistenceProvider;
-    }
-);

example/profiling/bundle.json

@@ -4,7 +4,11 @@
             {
                 "implementation": "WatchIndicator.js",
                 "depends": ["$interval", "$rootScope"]
+            },
+            {
+                "implementation": "DigestIndicator.js",
+                "depends": ["$interval", "$rootScope"]
             }
         ]
     }
-}
+}

example/profiling/src/DigestIndicator.js

@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * Displays the number of digests that have occurred since the
+         * indicator was first instantiated.
+         * @constructor
+         * @param $interval Angular's $interval
+         * @implements {Indicator}
+         */
+        function DigestIndicator($interval, $rootScope) {
+            var digests = 0,
+                displayed = 0,
+                start = Date.now();
+
+            function update() {
+                var secs = (Date.now() - start) / 1000;
+                displayed = Math.round(digests / secs);
+            }
+
+            function increment() {
+                digests += 1;
+            }
+
+            $rootScope.$watch(increment);
+
+            // Update state every second
+            $interval(update, 1000);
+
+            // Provide initial state, too
+            update();
+
+            return {
+                getGlyph: function () {
+                    return ".";
+                },
+                getGlyphClass: function () {
+                    return undefined;
+                },
+                getText: function () {
+                    return displayed + " digests/sec";
+                },
+                getDescription: function () {
+                    return "";
+                }
+            };
+        }
+
+        return DigestIndicator;
+
+    }
+);

index.html

@@ -23,6 +23,7 @@
 <html>
 <head lang="en">
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title></title>
     <script type="text/javascript"
             src="platform/framework/lib/require.js"

platform/commonUI/browse/bundle.json

@@ -16,26 +16,41 @@
             {
                 "key": "BrowseController",
                 "implementation": "BrowseController.js",
-                "depends": [ "$scope", "$route", "$location", "objectService", "navigationService", "urlService" ]
+                "depends": [
+                    "$scope",
+                    "$route",
+                    "$location",
+                    "$q",
+                    "objectService",
+                    "navigationService",
+                    "urlService"
+                ]
+            },
+            {
+                "key": "BrowseTreeController",
+                "implementation": "BrowseTreeController.js",
+                "priority": "preferred",
+                "depends": [ "$scope", "agentService" ]
             },
             {
                 "key": "BrowseObjectController",
                 "implementation": "BrowseObjectController.js",
-                "depends": [ "$scope", "$location", "$route" ]
+                "depends": [ "$scope", "$location", "$route", "$q",
+                    "navigationService" ]
             },
             {
                 "key": "CreateMenuController",
-                "implementation": "creation/CreateMenuController",
+                "implementation": "creation/CreateMenuController.js",
                 "depends": [ "$scope" ]
             },
             {
                 "key": "LocatorController",
-                "implementation": "creation/LocatorController",
-                "depends": [ "$scope" ]
+                "implementation": "creation/LocatorController.js",
+                "depends": [ "$scope", "$timeout" ]
             },
             {
                 "key": "MenuArrowController",
-                "implementation": "MenuArrowController",
+                "implementation": "MenuArrowController.js",
                 "depends": [ "$scope" ]
             }
         ],
@@ -45,16 +60,11 @@
                 "templateUrl": "templates/create/locator.html"
             }
         ],
-        "templates": [
-            {
-                "key": "topbar-browse",
-                "templateUrl": "templates/topbar-browse.html"
-            }
-        ],
         "representations": [
             {
                 "key": "browse-object",
                 "templateUrl": "templates/browse-object.html",
+                "gestures": ["drop"],
                 "uses": [ "view" ]
             },
             {
@@ -82,17 +92,17 @@
                 "templateUrl": "templates/menu-arrow.html",
                 "uses": [ "action" ],
                 "gestures": [ "menu" ]
+            },
+            {
+                "key": "back-arrow",
+                "uses": [ "context" ],
+                "templateUrl": "templates/back-arrow.html"
             }
         ],
         "services": [
             {
                 "key": "navigationService",
                 "implementation": "navigation/NavigationService.js"
-            },
-            {
-                "key": "creationService",
-                "implementation": "creation/CreationService.js",
-                "depends": [ "persistenceService", "$q", "$log" ]
             }
         ],
         "actions": [
@@ -110,7 +120,7 @@
                 "depends": [ "urlService", "$window" ],
                 "group": "windowing",
                 "glyph": "y",
-			  	"priority": "preferred"
+                "priority": "preferred"
             },
             {
                 "key": "fullscreen",
@@ -118,7 +128,7 @@
                 "category": "view-control",
                 "group": "windowing",
                 "glyph": "z",
-			  	"priority": "default"
+                "priority": "default"
             }
         ],
         "views": [
@@ -141,6 +151,13 @@
                 "type": "provider",
                 "implementation": "creation/CreateActionProvider.js",
                 "depends": [ "typeService", "dialogService", "creationService", "policyService" ]
+            },
+            {
+                "key": "CreationService",
+                "provides": "creationService",
+                "type": "provider",
+                "implementation": "creation/CreationService.js",
+                "depends": [ "persistenceService", "now", "$q", "$log" ]
             }
         ],
         "runs": [

platform/commonUI/browse/res/templates/back-arrow.html

@@ -0,0 +1,30 @@
+<!--
+ 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.
+-->
+
+<!-- Back Arrow Icon used on mobile-->
+<a
+   class='type-icon icon ui-symbol s-back'
+   ng-show="context.getPath().length > 2"
+   ng-click="context.getParent().getCapability('action').perform('navigate')">
+    {
+</a>
+

platform/commonUI/browse/res/templates/browse-object.html

@@ -19,29 +19,100 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span ng-controller="BrowseObjectController">
-    <div class="object-browse-bar bar abs">
-        <div class="items-select left abs">
+<div ng-init="
+    editBtns = [{ cssclass: 'save',title: 'Save' },{ cssclass: 'cancel',title: 'Discard Changes', action:'cancelEditing' }];
+"></div>
+<span ng-controller="BrowseObjectController"
+      mct-before-unload="getUnloadWarning()">
+    <a class="s-btn"
+       style="opacity: 0.9; position:absolute; right: 250px; z-index: 100"
+       ng-class="{ major:!editMode }"
+       ng-click="editMode = !editMode">Set EditMode to {{!editMode}}</a>
+    <div class="object-browse-bar bar l-flex">
+        <div class="items-select left">
+            <mct-representation key="'back-arrow'"
+                                mct-object="domainObject"
+                                class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-
-        <div class="btn-bar right abs">
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }">
-            </mct-representation>
-
+        <div class="btn-bar right">
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
             </mct-representation>
+            <!-- Temporarily, on mobile, the action buttons are hidden-->
+            <mct-representation key="'action-group'"
+                                mct-object="domainObject"
+                                parameters="{ category: 'view-control' }"
+                                class="mobile-hide">
+            </mct-representation>
         </div>
     </div>
 
-    <div class='object-holder abs vscroll'>
-        <mct-representation key="representation.selected.key"
-                            mct-object="representation.selected.key && domainObject">
-        </mct-representation>
+    <div class="l-object-wrapper"
+         ng-class="{ active:editMode, 'edit-main':editMode}">
+        <div class="l-object-wrapper-inner l-flex flex-col">
+            <!-- Toolbar and Save/Cancel buttons -->
+            <div class="l-edit-controls flex-elem l-flex flex-row flex-align-end"
+                 ng-class="{ active:editMode }">
+
+
+
+
+<!--                <mct-toolbar name="mctToolbar"
+                             structure="toolbar.structure"
+                             ng-model="toolbar.state"
+                             class="flex-elem grow">
+                </mct-toolbar>-->
+                <!-- from toolbar.html -->
+                <mct-toolbar-x class="flex-elem grow ellipsis">
+                    <form novalidate>
+                        <div class="tool-bar btn-bar">
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                            </span>
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Lorem</span>
+                            </span>
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                                <span class="s-menu-btn">Lorem</span>
+                            </span>
+                            <span class="s-menu-btn">Lorem</span>
+                        </div>
+                    </form>
+                </mct-toolbar-x>
+
+
+
+
+<!--                <mct-representation key="'edit-action-buttons'"
+                                    mct-object="domainObject"
+                                    class='flex-elem conclude-editing'>
+                </mct-representation>-->
+                <!-- from edit-action-buttons.html -->
+                <span class='flex-elem conclude-editing'>
+                    <span ng-repeat="btn in editBtns">
+                        <a class='s-btn t-{{btn.cssclass}}'
+                           title='{{btn.title}}'
+                           ng-click="doAction(btn.action)"
+                           ng-class="{ major: $index === 0 }">
+                            <span class="title-label">{{btn.title}}</span>
+                        </a>
+                    </span>
+                </span>
+
+            </div>
+            <mct-representation key="representation.selected.key"
+                                mct-object="representation.selected.key && domainObject"
+                                class="flex-elem grow object-holder">
+            </mct-representation>
+        </div>
     </div>
 </span>

platform/commonUI/browse/res/templates/browse.html

@@ -19,38 +19,51 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div content="jquery-wrapper" class="abs holder-all browse-mode">
+
+<div class="abs holder-all browse-mode" ng-controller="BrowseController">
     <mct-include key="'topbar-browse'"></mct-include>
-    <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
+    <div class="holder browse-area s-browse-area abs browse-wrapper"
+         ng-controller="BrowseTreeController as tree"
+         ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div
-                class='split-pane-component treeview pane left'
-                >
-                <mct-representation key="'create-button'" mct-object="navigatedObject">
-                </mct-representation>
-                <div class='holder search-holder abs'
-                     ng-class="{active: treeModel.search}">
-                    <mct-representation key="'search'"
-                                 mct-object="domainObject"
-                                 ng-model="treeModel">
-                    </mct-representation>
-                </div>
-                <div class='holder tree-holder abs'
-                     ng-hide="treeModel.search">
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
+            <div class='split-pane-component treeview pane left'>
+                <div class="holder abs l-mobile">
+                    <mct-representation key="'create-button'"
+                                        mct-object="navigatedObject"
+                                        mct-device="desktop">
                     </mct-representation>
+                    <div class='holder search-holder abs'
+                         ng-class="{active: treeModel.search}">
+                        <mct-representation key="'search'"
+                                     mct-object="domainObject"
+                                     ng-model="treeModel">
+                        </mct-representation>
+                    </div>
+                    <div class='tree-holder abs mobile-tree-holder'
+                         ng-hide="treeModel.search">
+                        <mct-representation key="'tree'"
+                                            mct-object="domainObject"
+                                            parameters="tree"
+                                            ng-model="treeModel">
+                        </mct-representation>
+                    </div>
                 </div>
             </div>
-            <mct-splitter></mct-splitter>
-            <div class='split-pane-component items pane'>
-                <div class='holder abs' id='content-area'>
-                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
+
+            <mct-splitter class="mobile-hide"></mct-splitter>
+
+            <div class='split-pane-component items pane right-repr'>
+                <div class='holder abs l-mobile' id='content-area'>
+                    <mct-representation mct-object="navigatedObject"
+                                        key="'browse-object'">
                     </mct-representation>
                 </div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
+                     mct-device="mobile"
+                     ng-click="tree.toggle()">m</div>
             </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
 </div>
+

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -19,11 +19,11 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header'>
-    <span class="label s-label">
-        <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
+<div class='object-header object-header-mobile'>
+    <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
+    <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
+    <span class="l-elem-wrapper l-flex">
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='type-name'>{{type.getName()}}</span>
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>

platform/commonUI/browse/res/templates/create/create-button.html

@@ -20,10 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
-	    Create
+    <div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
+		<span class="ui-symbol icon type-icon">&#x2b;</span>
+		<span class="title-label">Create</span>
     </div>
-    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
+    <div class="menu super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>

platform/commonUI/browse/res/templates/create/locator.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="LocatorController" class="selector-list">
-    <div>
+    <div class="wrapper">
         <mct-representation key="'tree'"
                             mct-object="rootObject"
                             ng-model="treeModel">

platform/commonUI/browse/res/templates/items/grid-item.html

@@ -21,31 +21,27 @@
 -->
 <!-- For selected, add class 'selected' to outer div -->
 <div class='item grid-item' ng-click='action.perform("navigate")'>
-    <div class="contents abs">
+    <div class='contents abs'>
         <div class='top-bar bar abs'>
-            <div class='left abs'>
-                <mct-include key="_checkbox"></mct-include>
-            </div>
-            <div class='right abs'>
-                <div class='ui-symbol icon l-icon-alert'></div>
-                <div class='ui-symbol icon profile' title="Shared">P</div>
-            </div>
+            <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
+            <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
         </div>
         <div class='item-main abs'>
             <div class='ui-symbol icon lg item-type'>
                 {{type.getGlyph()}}
                 <span
-                    class="ui-symbol icon l-icon-link" title="This object is a link"
+                    class="ui-symbol l-icon-link" title="This object is a link"
                     ng-show="location.isLink()"
                     ></span>
             </div>
-            <div class='ui-symbol icon abs item-open'>}</div>
+            <div class='ui-symbol abs item-open'>}</div>
         </div>
         <div class='bottom-bar bar abs'>
             <div class='title'>{{model.name}}</div>
             <div class='details'>
+                <span>{{type.getName()}}</span>
                 <span ng-show="model.composition !== undefined">
-                    {{model.composition.length}} Items
+                    - {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
                 </span>
             </div>
         </div>

platform/commonUI/browse/res/templates/topbar-browse.html

@@ -1,36 +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.
--->
-<div class='top-bar browse abs'>
-    <!-- TO-DO: replace JS placeholders for click actions -->
-    <div class='browse-main bar abs left'>
-        <a class="menu-element btn btn-menu browse-btn" onclick="alert('Not yet functional. This will allow filtering of browsed objects and search context.');">
-            <span class='ui-symbol badge major' href=''>*</span>Browse All<span class='ui-symbol invoke-menu'>v</span>
-        </a>
-        <input type='text' class='control filter' name='filter-available'/>
-        <a class='icon icon-filter ui-symbol' onclick="alert('Not yet functional. This will initiate a search.');">M</a>
-    </div>
-    <div class='icon-buttons-main bar abs right'>
-        <a class='ui-symbol icon major alert' onclick="alert('Not yet functional. This will allow updating of domain objects that need to be refreshed.');">!<span id='alert-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
-        <!--a class='ui-symbol icon major profile' href=''>P<span id='profile-actions-menu' class='ui-symbol invoke-menu'>v</span></a-->
-        <a class='ui-symbol icon major settings' onclick="alert('Not yet functional. This will allow access to application configuration settings.');">G<span id='settings-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
-    </div>
-</div>

platform/commonUI/browse/src/BrowseController.js

@@ -26,8 +26,11 @@
  * @namespace platform/commonUI/browse
  */
 define(
-    [],
-    function () {
+    [
+        '../../../representation/src/gestures/GestureConstants',
+        '../../edit/src/objects/EditableDomainObject'
+    ],
+    function (GestureConstants, EditableDomainObject) {
         "use strict";
 
         var ROOT_ID = "ROOT",
@@ -43,7 +46,7 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
+        function BrowseController($scope, $route, $location, $q, objectService, navigationService, urlService) {
             var path = [ROOT_ID].concat(
                 ($route.current.params.ids || DEFAULT_PATH).split("/")
             );
@@ -55,7 +58,7 @@ define(
 
                 unlisten = $scope.$on('$locationChangeSuccess', function () {
                     // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current                    
+                    // if so, change $route.current
                     if ($location.path().indexOf("/browse/") === 0) {
                         $route.current = priorRoute;
                     }
@@ -65,19 +68,23 @@ define(
                 // path to new, addressed, path based on
                 // domainObject
                 $location.path(urlService.urlForLocation("browse", domainObject));
-                
+
             }
 
             // Callback for updating the in-scope reference to the object
             // that is currently navigated-to.
             function setNavigation(domainObject) {
-                $scope.navigatedObject = domainObject;
+
+                var wrappedObject = domainObject;
+
+                $scope.navigatedObject = wrappedObject;
                 $scope.treeModel.selectedObject = domainObject;
                 navigationService.setNavigation(domainObject);
                 updateRoute(domainObject);
             }
 
             function navigateTo(domainObject) {
+
                 // Check if an object has been navigated-to already...
                 // If not, or if an ID path has been explicitly set in the URL,
                 // navigate to the URL-specified object.
@@ -148,12 +155,12 @@ define(
 
             // Also listen for changes which come from the tree
             $scope.$watch("treeModel.selectedObject", setNavigation);
-
+            
             // Clean up when the scope is destroyed
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
-
+            
         }
 
         return BrowseController;

platform/commonUI/browse/src/BrowseObjectController.js

@@ -22,8 +22,9 @@
 /*global define,Promise*/
 
 define(
-    [],
-    function () {
+    ['../../../representation/src/gestures/GestureConstants', 
+        '../../edit/src/objects/EditableDomainObject'],
+    function (GestureConstants, EditableDomainObject) {
         "use strict";
 
         /**
@@ -32,8 +33,10 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseObjectController($scope, $location, $route) {
+        function BrowseObjectController($scope, $location, $route, $q, navigationService) {
+            var navigatedObject;
             function setViewForDomainObject(domainObject) {
+                
                 var locationViewKey = $location.search().view;
 
                 function selectViewIfMatching(view) {
@@ -47,6 +50,8 @@ define(
                     ((domainObject && domainObject.useCapability('view')) || [])
                         .forEach(selectViewIfMatching);
                 }
+                $scope.editMode = domainObject.getDomainObject ? true : false;
+                navigatedObject = domainObject;
             }
 
             function updateQueryParam(viewKey) {
@@ -67,6 +72,15 @@ define(
 
             $scope.$watch('domainObject', setViewForDomainObject);
             $scope.$watch('representation.selected.key', updateQueryParam);
+
+            $scope.cancelEditing = function() {
+                navigationService.setNavigation($scope.domainObject.getDomainObject());
+            }
+
+            $scope.doAction = function (action){
+                $scope[action] && $scope[action]();
+            }
+
         }
 
         return BrowseObjectController;

platform/commonUI/browse/src/BrowseTreeController.js

@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise*/
+
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * Controller to provide the ability to show/hide the tree in
+         * Browse mode.
+         * @constructor
+         * @memberof platform/commonUI/browse
+         */
+        function BrowseTreeController($scope, agentService) {
+            var self = this;
+            this.agentService = agentService;
+            this.state = true;
+
+            /**
+             * Callback to invoke when any selection occurs in the tree.
+             * This controller can be passed in as the `parameters` object
+             * to the tree representation.
+             *
+             * @property {Function} callback
+             * @memberof platform/commonUI/browse.BrowseTreeController#
+             */
+            this.callback = function () {
+                // Note that, since this is a callback to pass, this is not
+                // declared as a method but as a property which happens to
+                // be a function.
+                if (agentService.isPhone() && agentService.isPortrait()) {
+                    // On phones, trees should collapse in portrait mode
+                    // when something is navigated-to.
+                    self.state = false;
+                }
+            };
+        }
+
+        /**
+         * Toggle the visibility of the tree.
+         */
+        BrowseTreeController.prototype.toggle = function () {
+            this.state = !this.state;
+        };
+
+        /**
+         * Get the desired visibility state of the tree.
+         * @returns {boolean} true when visible
+         */
+        BrowseTreeController.prototype.visible = function () {
+            return this.state;
+        };
+
+        return BrowseTreeController;
+    }
+);

platform/commonUI/browse/src/creation/CreateWizard.js

@@ -59,10 +59,10 @@ define(
                 var locatingType = locatingObject &&
                     locatingObject.getCapability('type');
                 return locatingType && policyService.allow(
-                        "composition",
-                        locatingType,
-                        type
-                    );
+                    "composition",
+                    locatingType,
+                    type
+                );
             }
 
             sections.push({
@@ -77,6 +77,9 @@ define(
                     row.key = index;
 
                     return row;
+                }).filter(function (row) {
+                    // Only show rows which have defined controls
+                    return row && row.control;
                 })
             });
 

platform/commonUI/browse/src/creation/CreationService.js

@@ -42,10 +42,11 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreationService(persistenceService, $q, $log) {
+        function CreationService(persistenceService, now, $q, $log) {
             this.persistenceService = persistenceService;
             this.$q = $q;
             this.$log = $log;
+            this.now = now;
         }
 
         /**
@@ -55,6 +56,10 @@ define(
          * space an object is created within (as it is possible to
          * have multiple persistence spaces attached.)
          *
+         * Note that the model passed in for object creation may be
+         * modified to attach additional initial properties associated
+         * with domain object creation.
+         *
          * @param {object} model the model for the newly-created
          *        domain object
          * @param {DomainObject} parent the domain object which
@@ -67,12 +72,6 @@ define(
             var persistence = parent.getCapability("persistence"),
                 self = this;
 
-            // Store the location of an object relative to it's parent.
-            function addLocationToModel(modelId, model, parent) {
-                model.location = parent.getId();
-                return model;
-            }
-
             // Persist the new domain object's model; it will be fully
             // constituted as a domain object when loaded back, as all
             // domain object models are.
@@ -88,37 +87,18 @@ define(
             // composition, so that it will subsequently appear
             // as a child contained by that parent.
             function addToComposition(id, parent, parentPersistence) {
-                var mutatationResult = parent.useCapability("mutation", function (model) {
-                    if (Array.isArray(model.composition)) {
-                        // Don't add if the id is already there
-                        if (model.composition.indexOf(id) === -1) {
-                            model.composition.push(id);
-                        }
-                    } else {
-                        // This is abnormal; composition should be an array
-                        self.$log.warn(NO_COMPOSITION_WARNING + parent.getId());
-                        return false; // Cancel mutation
-                    }
-                });
+                var compositionCapability = parent.getCapability('composition'),
+                    addResult = compositionCapability &&
+                        compositionCapability.add(id);
 
-                return self.$q.when(mutatationResult).then(function (result) {
+                return self.$q.when(addResult).then(function (result) {
                     if (!result) {
-                        self.$log.error("Could not mutate " + parent.getId());
+                        self.$log.error("Could not modify " + parent.getId());
                         return undefined;
                     }
 
                     return parentPersistence.persist().then(function () {
-                        // Locate and return new Object in context of parent.
-                        return parent
-                            .useCapability('composition')
-                            .then(function (children) {
-                                var i;
-                                for (i = 0; i < children.length; i += 1) {
-                                    if (children[i].getId() === id) {
-                                        return children[i];
-                                    }
-                                }
-                            });
+                        return result;
                     });
                 });
             }
@@ -135,7 +115,7 @@ define(
             // 2. Create a model with that ID in the persistence space
             // 3. Add that ID to
             return self.$q.when(uuid()).then(function (id) {
-                model = addLocationToModel(id, model, parent);
+                model.persisted = self.now();
                 return doPersist(persistence.getSpace(), id, model);
             }).then(function (id) {
                 return addToComposition(id, parent, persistence);

platform/commonUI/browse/src/creation/LocatorController.js

@@ -33,7 +33,7 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function LocatorController($scope) {
+        function LocatorController($scope, $timeout) {
             // Populate values needed by the locator control. These are:
             // * rootObject: The top-level object, since we want to show
             //               the full tree
@@ -41,9 +41,19 @@ define(
             //              used for bi-directional object selection.
             function setLocatingObject(domainObject, priorObject) {
                 var context = domainObject &&
-                    domainObject.getCapability("context");
+                    domainObject.getCapability("context"),
+                    contextRoot = context && context.getRoot();
+
+                if (contextRoot && contextRoot !== $scope.rootObject) {
+                    $scope.rootObject = undefined;
+                    // Update the displayed tree on a timeout to avoid
+                    // an infinite digest exception.
+                    $timeout(function () {
+                        $scope.rootObject =
+                            (context && context.getRoot()) || $scope.rootObject;
+                    }, 0);
+                }
 
-                $scope.rootObject = (context && context.getRoot()) || $scope.rootObject;
                 $scope.treeModel.selectedObject = domainObject;
                 $scope.ngModel[$scope.field] = domainObject;
 
@@ -52,10 +62,7 @@ define(
                         $scope.structure &&
                             $scope.structure.validate) {
                     if (!$scope.structure.validate(domainObject)) {
-                        setLocatingObject(
-                            $scope.structure.validate(priorObject) ?
-                                    priorObject : undefined
-                        );
+                        setLocatingObject(priorObject, undefined);
                         return;
                     }
                 }

platform/commonUI/browse/test/BrowseControllerSpec.js

@@ -146,12 +146,14 @@ define(
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
 
+
             it("releases its navigation listener when its scope is destroyed", function () {
                 expect(mockScope.$on).toHaveBeenCalledWith(
                     "$destroy",
                     jasmine.any(Function)
                 );
                 mockScope.$on.mostRecentCall.args[1]();
+
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
                     mockNavigationService.addListener.mostRecentCall.args[0]
@@ -222,16 +224,16 @@ define(
                 mockNavigationService.addListener.mostRecentCall.args[0](
                     mockNextObject
                 );
-                
+
                 // Allows the path index to be checked
-                // prior to setting $route.current                
+                // prior to setting $route.current
                 mockLocation.path.andReturn("/browse/");
-                
+
                 // Exercise the Angular workaround
                 mockScope.$on.mostRecentCall.args[1]();
                 expect(mockUnlisten).toHaveBeenCalled();
-                
-                // location.path to be called with the urlService's 
+
+                // location.path to be called with the urlService's
                 // urlFor function with the next domainObject and mode
                 expect(mockLocation.path).toHaveBeenCalledWith(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)

platform/commonUI/browse/test/BrowseTreeControllerSpec.js

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../src/BrowseTreeController"],
+    function (BrowseTreeController) {
+        'use strict';
+
+        describe("The BrowseTreeController", function () {
+            var mockScope,
+                mockAgentService,
+                mockDomainObjects,
+                controller;
+
+            // We want to reinstantiate for each test case
+            // because device state can influence constructor-time behavior
+            function instantiateController() {
+                return new BrowseTreeController(
+                    mockScope,
+                    mockAgentService
+                );
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
+                mockDomainObjects = ['a', 'b'].map(function (id) {
+                    var mockDomainObject = jasmine.createSpyObj(
+                        'domainObject-' + id,
+                        [ 'getId', 'getModel', 'getCapability' ]
+                    );
+
+                    mockDomainObject.getId.andReturn(id);
+                    mockDomainObject.getModel.andReturn({});
+
+                    return mockDomainObject;
+                });
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
+                );
+            });
+
+            it("is initially visible", function () {
+                expect(instantiateController().visible()).toBeTruthy();
+            });
+
+            it("allows visibility to be toggled", function () {
+                controller = instantiateController();
+                controller.toggle();
+                expect(controller.visible()).toBeFalsy();
+                controller.toggle();
+                expect(controller.visible()).toBeTruthy();
+            });
+
+            it("collapses on navigation changes on portrait-oriented phones", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+                expect(controller.visible()).toBeTruthy();
+
+                // Simulate a change from the tree by invoking controller's
+                controller.callback();
+
+                // Tree should have collapsed
+                expect(controller.visible()).toBeFalsy();
+            });
+        });
+    }
+);

platform/commonUI/browse/test/creation/CreateWizardSpec.js

@@ -42,7 +42,9 @@ define(
                     "property" + name,
                     [ "getDefinition", "getValue", "setValue" ]
                 );
-                mockProperty.getDefinition.andReturn({});
+                mockProperty.getDefinition.andReturn({
+                    control: "textfield"
+                });
                 mockProperty.getValue.andReturn(name);
                 return mockProperty;
             }
@@ -157,4 +159,4 @@ define(
 
         });
     }
-);
+);

platform/commonUI/browse/test/creation/CreationServiceSpec.js

@@ -31,6 +31,7 @@ define(
 
         describe("The creation service", function () {
             var mockPersistenceService,
+                mockNow,
                 mockQ,
                 mockLog,
                 mockParentObject,
@@ -63,6 +64,7 @@ define(
                     "persistenceService",
                     [ "createObject" ]
                 );
+                mockNow = jasmine.createSpy('now');
                 mockQ = { when: mockPromise, reject: mockReject };
                 mockLog = jasmine.createSpyObj(
                     "$log",
@@ -86,7 +88,7 @@ define(
                 );
                 mockCompositionCapability = jasmine.createSpyObj(
                     "composition",
-                    ["invoke"]
+                    ["invoke", "add"]
                 );
                 mockContextCapability = jasmine.createSpyObj(
                     "context",
@@ -103,6 +105,8 @@ define(
                     mockPromise(true)
                 );
 
+                mockNow.andReturn(12321);
+
                 mockParentObject.getCapability.andCallFake(function (key) {
                     return mockCapabilities[key];
                 });
@@ -120,9 +124,11 @@ define(
                 mockCompositionCapability.invoke.andReturn(
                     mockPromise([mockNewObject])
                 );
+                mockCompositionCapability.add.andReturn(mockPromise(true));
 
                 creationService = new CreationService(
                     mockPersistenceService,
+                    mockNow,
                     mockQ,
                     mockLog
                 );
@@ -143,33 +149,34 @@ define(
                     parentModel = { composition: ["notAnyUUID"] };
                 creationService.createObject(model, mockParentObject);
 
-                // Invoke the mutation callback
-                expect(mockMutationCapability.invoke).toHaveBeenCalled();
-                mockMutationCapability.invoke.mostRecentCall.args[0](parentModel);
-
-                // Should have a longer composition now, with the new UUID
-                expect(parentModel.composition.length).toEqual(2);
+                // Verify that a new ID was added
+                expect(mockCompositionCapability.add)
+                    .toHaveBeenCalledWith(jasmine.any(String));
             });
 
-            it("warns if parent has no composition", function () {
-                var model = { someKey: "some value" },
-                    parentModel = { };
-                creationService.createObject(model, mockParentObject);
+            it("provides the newly-created object", function () {
+                var mockDomainObject = jasmine.createSpyObj(
+                        'newDomainObject',
+                        ['getId', 'getModel', 'getCapability']
+                    ),
+                    mockCallback = jasmine.createSpy('callback');
 
-                // Verify precondition; no prior warnings
-                expect(mockLog.warn).not.toHaveBeenCalled();
+                // Act as if the object had been created
+                mockCompositionCapability.add.andCallFake(function (id) {
+                    mockDomainObject.getId.andReturn(id);
+                    mockCompositionCapability.invoke
+                        .andReturn(mockPromise([mockDomainObject]));
+                    return mockPromise(mockDomainObject);
+                });
 
-                // Invoke the mutation callback
-                expect(mockMutationCapability.invoke).toHaveBeenCalled();
-                mockMutationCapability.invoke.mostRecentCall.args[0](parentModel);
+                // Should find it in the composition
+                creationService.createObject({}, mockParentObject)
+                    .then(mockCallback);
+
+                expect(mockCallback).toHaveBeenCalledWith(mockDomainObject);
 
-                // Should have a longer composition now, with the new UUID
-                expect(mockLog.warn).toHaveBeenCalled();
-                // Composition should still be undefined
-                expect(parentModel.composition).toBeUndefined();
             });
 
-
             it("warns if parent has no persistence capability", function () {
                 // Callbacks
                 var success = jasmine.createSpy("success"),
@@ -185,7 +192,6 @@ define(
                 expect(mockLog.warn).toHaveBeenCalled();
                 expect(success).not.toHaveBeenCalled();
                 expect(failure).toHaveBeenCalled();
-
             });
 
             it("logs an error when mutaton fails", function () {
@@ -194,21 +200,17 @@ define(
                 var model = { someKey: "some value" },
                     parentModel = { composition: ["notAnyUUID"] };
 
-                mockMutationCapability.invoke.andReturn(mockPromise(false));
+                mockCompositionCapability.add.andReturn(mockPromise(false));
 
                 creationService.createObject(model, mockParentObject);
 
                 expect(mockLog.error).toHaveBeenCalled();
             });
 
-            it("stores location on new domainObjects", function () {
-                var model = { name: "my model" },
-                    objectPromise = creationService.createObject(
-                        model,
-                        mockParentObject
-                    );
-
-                expect(model.location).toBe('parentId');
+            it("attaches a 'persisted' timestamp", function () {
+                var model = { someKey: "some value" };
+                creationService.createObject(model, mockParentObject);
+                expect(model.persisted).toEqual(mockNow());
             });
 
         });

platform/commonUI/browse/test/creation/LocatorControllerSpec.js

@@ -31,6 +31,7 @@ define(
 
         describe("The locator controller", function () {
             var mockScope,
+                mockTimeout,
                 mockDomainObject,
                 mockRootObject,
                 mockContext,
@@ -41,6 +42,7 @@ define(
                     "$scope",
                     [ "$watch" ]
                 );
+                mockTimeout = jasmine.createSpy("$timeout");
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
                     [ "getCapability" ]
@@ -60,7 +62,7 @@ define(
                 mockScope.ngModel = {};
                 mockScope.field = "someField";
 
-                controller = new LocatorController(mockScope);
+                controller = new LocatorController(mockScope, mockTimeout);
             });
 
             it("adds a treeModel to scope", function () {
@@ -80,6 +82,7 @@ define(
                 // Need to pass on selection changes as updates to
                 // the control's value
                 mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockTimeout.mostRecentCall.args[0]();
                 expect(mockScope.ngModel.someField).toEqual(mockDomainObject);
                 expect(mockScope.rootObject).toEqual(mockRootObject);
 
@@ -95,6 +98,7 @@ define(
 
                 // Pass selection change
                 mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockTimeout.mostRecentCall.args[0]();
 
                 expect(mockScope.structure.validate).toHaveBeenCalled();
                 // Change should have been rejected
@@ -108,14 +112,16 @@ define(
                 );
 
                 mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                mockTimeout.mostRecentCall.args[0]();
                 expect(mockScope.ngModelController.$setValidity)
                     .toHaveBeenCalledWith(jasmine.any(String), true);
 
                 mockScope.$watch.mostRecentCall.args[1](undefined);
+                mockTimeout.mostRecentCall.args[0]();
                 expect(mockScope.ngModelController.$setValidity)
                     .toHaveBeenCalledWith(jasmine.any(String), false);
             });
 
         });
     }
-);
+);

platform/commonUI/browse/test/suite.json

@@ -1,6 +1,7 @@
 [
     "BrowseController",
     "BrowseObjectController",
+    "BrowseTreeController",
     "MenuArrowController",
     "creation/CreateAction",
     "creation/CreateActionProvider",

platform/commonUI/dialog/res/templates/dialog.html

@@ -25,7 +25,7 @@
         All fields marked <span class="ui-symbol req">*</span> are required.
     </div>
 </div>
-<div class="abs form outline editor">
+<div class="abs form editor">
     <div class='abs contents l-dialog'>
         <mct-form ng-model="ngModel.value"
                   structure="ngModel.structure"
@@ -34,13 +34,13 @@
     </div>
 </div>
 <div class="abs bottom-bar">
-    <a class='btn lg major'
-       href=''
+    <a class='s-btn major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='btn lg subtle' href='' ng-click="ngModel.cancel()">
+    <a class='s-btn'
+       ng-click="ngModel.cancel()">
         Cancel
     </a>
 </div>

platform/commonUI/dialog/res/templates/overlay-options.html

@@ -35,7 +35,7 @@
     <div class="abs bottom-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
-           class="btn lg"
+           class="s-btn lg"
            title="{{option.description}}"
            ng-click="ngModel.confirm(option.key)"
            ng-class="{ major: $first, subtle: !$first }">

platform/commonUI/dialog/res/templates/overlay.html

@@ -25,7 +25,7 @@
         <a href=""
            ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="btn normal ui-symbol close">
+           class="clk-icon icon ui-symbol close">
             x
         </a>
         <div class="abs contents" ng-transclude>

platform/commonUI/edit/bundle.json

@@ -59,7 +59,7 @@
                 "glyph": "Z",
                 "name": "Remove",
                 "description": "Remove this object from its containing object.",
-                "depends": [ "$q" ]
+                "depends": [ "$q", "navigationService" ]
             },
             {
                 "key": "save",

platform/commonUI/edit/res/templates/edit-action-buttons.html

@@ -21,10 +21,11 @@
 -->
 <span ng-controller="EditActionController">
     <span ng-repeat="currentAction in editActions">
-        <a class='btn'
+        <a class='s-btn t-{{currentAction.getMetadata().key}}'
+           title='{{currentAction.getMetadata().name}}'
            ng-click="currentAction.perform()"
-           ng-class="{ major: $index === 0, subtle: $index !== 0 }">
-            {{currentAction.getMetadata().name}}
+           ng-class="{ major: $index === 0 }">
+            <span class="title-label">{{currentAction.getMetadata().name}}</span>
         </a>
     </span>
 </span>

platform/commonUI/edit/res/templates/edit-object.html

@@ -30,12 +30,11 @@
                          structure="toolbar.structure"
                          ng-model="toolbar.state">
             </mct-toolbar>
-            <div class='holder abs object-holder work-area'>
-                <mct-representation key="representation.selected.key"
-                                    toolbar="toolbar"
-                                    mct-object="representation.selected.key && domainObject">
-                </mct-representation>
-            </div>
+            <mct-representation key="representation.selected.key"
+                                toolbar="toolbar"
+                                mct-object="representation.selected.key && domainObject"
+                                class="holder abs object-holder work-area">
+            </mct-representation>
         </div>
         <mct-splitter></mct-splitter>
         <div

platform/commonUI/edit/src/actions/EditAction.js

@@ -25,8 +25,8 @@
  * Module defining EditAction. Created by vwoeltje on 11/14/14.
  */
 define(
-    [],
-    function () {
+    ['../objects/EditableDomainObject'],
+    function (EditableDomainObject) {
         "use strict";
 
         // A no-op action to return in the event that the action cannot
@@ -71,8 +71,10 @@ define(
          * Enter edit mode.
          */
         EditAction.prototype.perform = function () {
-            this.navigationService.setNavigation(this.domainObject);
-            this.$location.path("/edit");
+            if (!this.domainObject.getDomainObject) {
+                this.navigationService.setNavigation(new EditableDomainObject(this.domainObject));
+            }
+            //this.$location.path("/edit");
         };
 
         /**
@@ -83,10 +85,11 @@ define(
          */
         EditAction.appliesTo = function (context) {
             var domainObject = (context || {}).domainObject,
-                type = domainObject && domainObject.getCapability('type');
+                type = domainObject && domainObject.getCapability('type'),
+                isEditMode = domainObject && domainObject.getDomainObject ? true : false;
 
             // Only allow creatable types to be edited
-            return type && type.hasFeature('creation');
+            return type && type.hasFeature('creation') && !isEditMode;
         };
 
         return EditAction;

platform/commonUI/edit/src/actions/LinkAction.js

@@ -36,20 +36,11 @@ define(
         function LinkAction(context) {
             this.domainObject = (context || {}).domainObject;
             this.selectedObject = (context || {}).selectedObject;
-            this.selectedId = this.selectedObject && this.selectedObject.getId();
         }
 
         LinkAction.prototype.perform = function () {
             var self = this;
 
-            // Add this domain object's identifier
-            function addId(model) {
-                if (Array.isArray(model.composition) &&
-                    model.composition.indexOf(self.selectedId) < 0) {
-                    model.composition.push(self.selectedId);
-                }
-            }
-
             // Persist changes to the domain object
             function doPersist() {
                 var persistence =
@@ -59,11 +50,13 @@ define(
 
             // Link these objects
             function doLink() {
-                return self.domainObject.useCapability("mutation", addId)
-                    .then(doPersist);
+                var composition = self.domainObject &&
+                        self.domainObject.getCapability('composition');
+                return composition && composition.add(self.selectedObject)
+                        .then(doPersist);
             }
 
-            return this.selectedId && doLink();
+            return this.selectedObject && doLink();
         };
 
         return LinkAction;

platform/commonUI/edit/src/actions/PropertiesDialog.js

@@ -54,6 +54,9 @@ define(
                         var row = Object.create(property.getDefinition());
                         row.key = index;
                         return row;
+                    }).filter(function (row) {
+                        // Only show properties which are editable
+                        return row.control;
                     })
                 }]
             };

platform/commonUI/edit/src/actions/RemoveAction.js

@@ -41,9 +41,10 @@ define(
          * @constructor
          * @implements {Action}
          */
-        function RemoveAction($q, context) {
+        function RemoveAction($q, navigationService, context) {
             this.domainObject = (context || {}).domainObject;
             this.$q = $q;
+            this.navigationService = navigationService;
         }
 
         /**
@@ -53,8 +54,8 @@ define(
          */
         RemoveAction.prototype.perform = function () {
             var $q = this.$q,
+                navigationService = this.navigationService,
                 domainObject = this.domainObject;
-
             /*
              * Check whether an object ID matches the ID of the object being
              * removed (used to filter a parent's composition to handle the
@@ -82,19 +83,52 @@ define(
             }
 
             /*
-             * Remove the object from its parent, as identified by its context
-             * capability.
+             * Checks current object and ascendants of current
+             * object with object being removed, if the current
+             * object or any in the current object's path is being removed,
+             * navigate back to parent of removed object.
              */
-            function removeFromContext(contextCapability) {
-                var parent = contextCapability.getParent();
-                return $q.when(
-                        parent.useCapability('mutation', doMutate)
-                    ).then(function () {
-                        return doPersist(parent);
-                    });
+            function checkObjectNavigation(object, parentObject) {
+                // Traverse object starts at current location
+                var traverseObject = (navigationService).getNavigation(),
+                    context;
+
+                // Stop when object is not defined (above ROOT)
+                while (traverseObject) {
+                    // If object currently traversed to is object being removed
+                    // navigate to parent of current object and then exit loop
+                    if (traverseObject.getId() === object.getId()) {
+                        navigationService.setNavigation(parentObject);
+                        return;
+                    }
+                    // Traverses to parent of current object, moving
+                    // up the ascendant path
+                    context = traverseObject.getCapability('context');
+                    traverseObject = context && context.getParent();
+                }
             }
 
-            return $q.when(this.domainObject.getCapability('context'))
+            /*
+             * Remove the object from its parent, as identified by its context
+             * capability. Based on object's location and selected object's location
+             * user may be navigated to existing parent object
+             */
+            function removeFromContext(object) {
+                var contextCapability = object.getCapability('context'),
+                    parent = contextCapability.getParent();
+
+                // If currently within path of removed object(s),
+                // navigates to existing object up tree
+                checkObjectNavigation(object, parent);
+
+                return $q.when(
+                    parent.useCapability('mutation', doMutate)
+                ).then(function () {
+                    return doPersist(parent);
+                });
+            }
+
+            return $q.when(domainObject)
                 .then(removeFromContext);
         };
 

platform/commonUI/edit/src/objects/EditableDomainObject.js

@@ -101,6 +101,10 @@ define(
                             new Factory(capability, editableObject, domainObject, cache) :
                             capability;
                 };
+                
+                editableObject.getDomainObject = function() {
+                    return domainObject;
+                }
 
                 return editableObject;
             }

platform/commonUI/edit/test/actions/LinkActionSpec.js

@@ -31,7 +31,7 @@ define(
                 mockDomainObject,
                 mockParent,
                 mockContext,
-                mockMutation,
+                mockComposition,
                 mockPersistence,
                 mockType,
                 actionContext,
@@ -67,7 +67,7 @@ define(
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
-                mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
+                mockComposition = jasmine.createSpyObj("composition", [ "invoke", "add" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
 
@@ -75,11 +75,11 @@ define(
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getParent.andReturn(mockParent);
                 mockType.hasFeature.andReturn(true);
-                mockMutation.invoke.andReturn(mockPromise(true));
-
+                mockComposition.invoke.andReturn(mockPromise(true));
+                mockComposition.add.andReturn(mockPromise(true));
 
                 capabilities = {
-                    mutation: mockMutation,
+                    composition: mockComposition,
                     persistence: mockPersistence,
                     type: mockType
                 };
@@ -96,33 +96,17 @@ define(
             });
 
 
-            it("mutates the parent when performed", function () {
+            it("adds to the parent's composition when performed", function () {
                 action.perform();
-                expect(mockMutation.invoke)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
+                expect(mockComposition.add)
+                    .toHaveBeenCalledWith(mockDomainObject);
             });
 
-            it("changes composition from its mutation function", function () {
-                var mutator, result;
+            it("persists changes afterward", function () {
                 action.perform();
-                mutator = mockMutation.invoke.mostRecentCall.args[0];
-                result = mutator(model);
-
-                // Should not have cancelled the mutation
-                expect(result).not.toBe(false);
-
-                // Simulate mutate's behavior (remove can either return a
-                // new model or modify this one in-place)
-                result = result || model;
-
-                // Should have removed "test" - that was our
-                // mock domain object's id.
-                expect(result.composition).toEqual(["a", "b", "c", "test"]);
-
-                // Finally, should have persisted
                 expect(mockPersistence.persist).toHaveBeenCalled();
             });
 
         });
     }
-);
+);

platform/commonUI/edit/test/actions/PropertiesDialogSpec.js

@@ -39,7 +39,7 @@ define(
                     return {
                         getValue: function (model) { return model[k]; },
                         setValue: function (model, v) { model[k] = v; },
-                        getDefinition: function () { return {}; }
+                        getDefinition: function () { return { control: 'textfield '}; }
                     };
                 });
 

platform/commonUI/edit/test/actions/RemoveActionSpec.js

@@ -28,9 +28,16 @@ define(
 
         describe("The Remove action", function () {
             var mockQ,
+                mockNavigationService,
                 mockDomainObject,
                 mockParent,
+                mockChildObject,
+                mockGrandchildObject,
+                mockRootObject,
                 mockContext,
+                mockChildContext,
+                mockGrandchildContext,
+                mockRootContext,
                 mockMutation,
                 mockPersistence,
                 mockType,
@@ -54,6 +61,18 @@ define(
                     "domainObject",
                     [ "getId", "getCapability" ]
                 );
+                mockChildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
+                mockGrandchildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
+                mockRootObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
                 mockQ = { when: mockPromise };
                 mockParent = {
                     getModel: function () {
@@ -67,28 +86,41 @@ define(
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockChildContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockGrandchildContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockRootContext = jasmine.createSpyObj("context", [ "getParent" ]);
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
-
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [
+                        "getNavigation",
+                        "setNavigation",
+                        "addListener",
+                        "removeListener"
+                    ]
+                );
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                
+                
                 mockDomainObject.getId.andReturn("test");
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getParent.andReturn(mockParent);
                 mockType.hasFeature.andReturn(true);
 
-
                 capabilities = {
                     mutation: mockMutation,
                     persistence: mockPersistence,
                     type: mockType
                 };
                 model = {
-                    composition: [ "a", "test", "b", "c" ]
+                    composition: [ "a", "test", "b" ]
                 };
 
                 actionContext = { domainObject: mockDomainObject };
 
-                action = new RemoveAction(mockQ, actionContext);
+                action = new RemoveAction(mockQ, mockNavigationService, actionContext);
             });
 
             it("only applies to objects with parents", function () {
@@ -123,11 +155,64 @@ define(
 
                 // Should have removed "test" - that was our
                 // mock domain object's id.
-                expect(result.composition).toEqual(["a", "b", "c"]);
+                expect(result.composition).toEqual(["a", "b"]);
 
                 // Finally, should have persisted
                 expect(mockPersistence.persist).toHaveBeenCalled();
             });
+            
+            it("removes parent of object currently navigated to", function () {
+                // Navigates to child object
+                mockNavigationService.getNavigation.andReturn(mockChildObject);
+                
+                // Test is id of object being removed
+                // Child object has different id
+                mockDomainObject.getId.andReturn("test");
+                mockChildObject.getId.andReturn("not test");
+                
+                // Sets context for the child and domainObject
+                mockDomainObject.getCapability.andReturn(mockContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                
+                // Parents of child and domainObject are set
+                mockContext.getParent.andReturn(mockParent);
+                mockChildContext.getParent.andReturn(mockDomainObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects navigation to parent of domainObject (removed object)
+                expect(mockNavigationService.setNavigation).toHaveBeenCalledWith(mockParent);
+            });
+            
+            it("checks if removing object not in ascendent path (reaches ROOT)", function () {
+                // Navigates to grandchild of ROOT
+                mockNavigationService.getNavigation.andReturn(mockGrandchildObject);
+                
+                // domainObject (grandparent) is set as ROOT, child and grandchild
+                // are set objects not being removed
+                mockDomainObject.getId.andReturn("test 1");
+                mockRootObject.getId.andReturn("ROOT");
+                mockChildObject.getId.andReturn("not test 2");
+                mockGrandchildObject.getId.andReturn("not test 3");
+                
+                // Sets context for the grandchild, child, and domainObject
+                mockRootObject.getCapability.andReturn(mockRootContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                mockGrandchildObject.getCapability.andReturn(mockGrandchildContext);
+                
+                // Parents of grandchild and child are set
+                mockChildContext.getParent.andReturn(mockRootObject);
+                mockGrandchildContext.getParent.andReturn(mockChildObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects no navigation to occur
+                expect(mockNavigationService.setNavigation).not.toHaveBeenCalled();
+            });
 
         });
     }

platform/commonUI/general/bundle.json

@@ -6,8 +6,13 @@
         "services": [
             {
                 "key": "urlService",
-                "implementation": "/services/UrlService.js",
+                "implementation": "services/UrlService.js",
                 "depends": [ "$location" ]
+            },
+            {
+                "key": "popupService",
+                "implementation": "services/PopupService.js",
+                "depends": [ "$document", "$window" ]
             }
         ],
         "runs": [
@@ -20,18 +25,6 @@
             {
                 "stylesheetUrl": "css/normalize.min.css",
                 "priority": "mandatory"
-            },
-            {
-                "stylesheetUrl": "css/theme-espresso.css",
-                "priority": 1000
-            },
-            {
-                "stylesheetUrl": "css/items.css",
-                "priority": 901
-            },
-            {
-                "stylesheetUrl": "css/tree.css",
-                "priority": 900
             }
         ],
         "templates": [
@@ -57,6 +50,16 @@
             }
         ],
         "controllers": [
+            {
+                "key": "TimeRangeController",
+                "implementation": "controllers/TimeRangeController.js",
+                "depends": [ "$scope", "now" ]
+            },
+            {
+                "key": "DateTimePickerController",
+                "implementation": "controllers/DateTimePickerController.js",
+                "depends": [ "$scope", "now" ]
+            },
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
@@ -117,11 +120,21 @@
                 "implementation": "directives/MCTDrag.js",
                 "depends": [ "$document" ]
             },
+            {
+                "key": "mctClickElsewhere",
+                "implementation": "directives/MCTClickElsewhere.js",
+                "depends": [ "$document" ]
+            },
             {
                 "key": "mctResize",
                 "implementation": "directives/MCTResize.js",
                 "depends": [ "$timeout" ]
             },
+            {
+                "key": "mctPopup",
+                "implementation": "directives/MCTPopup.js",
+                "depends": [ "$compile", "popupService" ]
+            },
             {
                 "key": "mctScrollX",
                 "implementation": "directives/MCTScroll.js",
@@ -135,7 +148,7 @@
             {
                 "key": "mctSplitPane",
                 "implementation": "directives/MCTSplitPane.js",
-                "depends": [ "$parse", "$log" ]
+                "depends": [ "$parse", "$log", "$interval" ]
             },
             {
                 "key": "mctSplitter",
@@ -225,6 +238,10 @@
             {
                 "key": "selector",
                 "templateUrl": "templates/controls/selector.html"
+            },
+            {
+                "key": "datetime-picker",
+                "templateUrl": "templates/controls/datetime-picker.html"
             }
         ],
         "licenses": [

platform/commonUI/general/res/config.rb

@@ -13,7 +13,7 @@ javascripts_dir = "js"
 output_style = :nested
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
 # line_comments = false

platform/commonUI/general/res/css/forms.css

@@ -1,533 +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.
- *****************************************************************************/
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/************************** FEATURES */
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** COLORS AND SHADING */
-/************************** RATIOS */
-/************************** LAYOUT */
-/************************** CONTROLS */
-/************************** PATHS */
-/************************** TIMINGS */
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 22, ../sass/forms/_elems.scss */
-.section-header {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.1);
-  font-size: 0.8em;
-  margin-top: 5px;
-  padding: 5px; }
-  /* line 28, ../sass/forms/_elems.scss */
-  .section-header:first-child {
-    margin-top: 0; }
-
-/* line 35, ../sass/forms/_elems.scss */
-.form .form-section {
-  position: relative; }
-/* line 39, ../sass/forms/_elems.scss */
-.form .form-row {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  overflow: hidden;
-  *zoom: 1;
-  border-top: 1px solid #4d4d4d;
-  margin-top: 5px;
-  padding: 5px;
-  position: relative; }
-  /* line 46, ../sass/forms/_elems.scss */
-  .form .form-row.first {
-    border-top: none; }
-  /* line 50, ../sass/forms/_elems.scss */
-  .form .form-row .label,
-  .form .form-row .controls {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    *zoom: 1;
-    box-sizing: border-box;
-    font-size: 0.75rem;
-    line-height: 22px;
-    min-height: 22px; }
-  /* line 61, ../sass/forms/_elems.scss */
-  .form .form-row > .label {
-    float: left;
-    position: relative;
-    white-space: nowrap;
-    width: 20%; }
-  /* line 69, ../sass/forms/_elems.scss */
-  .form .form-row .value {
-    color: #cccccc; }
-  /* line 73, ../sass/forms/_elems.scss */
-  .form .form-row .controls {
-    float: left;
-    position: relative;
-    width: 79.9%; }
-    /* line 80, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-composite-control.l-checkbox {
-      display: inline-block;
-      line-height: 14px;
-      margin-right: 5px; }
-    /* line 89, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-med input[type="text"] {
-      width: 200px; }
-    /* line 93, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-small input[type="text"] {
-      width: 50px; }
-    /* line 97, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-numeric input[type="text"] {
-      text-align: right; }
-    /* line 101, ../sass/forms/_elems.scss */
-    .form .form-row .controls .select {
-      margin-right: 5px; }
-  /* line 106, ../sass/forms/_elems.scss */
-  .form .form-row .field-hints {
-    color: #666666; }
-  /* line 110, ../sass/forms/_elems.scss */
-  .form .form-row .selector-list {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 5px;
-    position: relative;
-    height: 150px;
-    overflow: auto; }
-    /* line 121, ../sass/forms/_elems.scss */
-    .form .form-row .selector-list .wrapper {
-      overflow-y: auto;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
-
-/* line 135, ../sass/forms/_elems.scss */
-label.form-control.checkbox input {
-  margin-right: 5px;
-  vertical-align: top; }
-
-/* line 141, ../sass/forms/_elems.scss */
-.hint,
-.s-hint {
-  font-size: 0.9em; }
-
-/* line 146, ../sass/forms/_elems.scss */
-.l-result {
-  display: inline-block;
-  min-width: 32px;
-  min-height: 32px;
-  position: relative;
-  vertical-align: top; }
-  /* line 153, ../sass/forms/_elems.scss */
-  .l-result div.s-hint {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    background: rgba(255, 153, 0, 0.8);
-    display: block;
-    color: #ffd699;
-    padding: 5px; }
-
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 22, ../sass/forms/_textarea.scss */
-.edit-main textarea {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #cccccc;
-  outline: none;
-  padding: 5px;
-  position: absolute;
-  height: 100%;
-  width: 100%; }
-  /* line 33, ../sass/forms/_mixins.scss */
-  .edit-main textarea.error {
-    background: rgba(255, 0, 0, 0.5); }
-
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 22, ../sass/forms/_text-input.scss */
-input[type="text"] {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #cccccc;
-  outline: none;
-  padding: 0 3px; }
-  /* line 33, ../sass/forms/_mixins.scss */
-  input[type="text"].error {
-    background: rgba(255, 0, 0, 0.5); }
-  /* line 29, ../sass/forms/_text-input.scss */
-  input[type="text"].numeric {
-    text-align: right; }
-
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 22, ../sass/forms/_selects.scss */
-.form-control.select {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-  background-image: -moz-linear-gradient(#525252, #454545);
-  background-image: -webkit-linear-gradient(#525252, #454545);
-  background-image: linear-gradient(#525252, #454545);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border: none;
-  border-top: 1px solid #575757;
-  color: #999;
-  display: inline-block;
-  cursor: pointer;
-  display: inline-block;
-  margin: 0 0 2px 2px;
-  overflow: hidden;
-  position: relative; }
-  /* line 162, ../sass/_mixins.scss */
-  .form-control.select:not(.disabled):hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
-    background-image: -moz-linear-gradient(#636363, #575757);
-    background-image: -webkit-linear-gradient(#636363, #575757);
-    background-image: linear-gradient(#636363, #575757);
-    color: #bdbdbd; }
-    /* line 165, ../sass/_mixins.scss */
-    .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
-      color: #878787; }
-  /* line 170, ../sass/_mixins.scss */
-  .form-control.select.btn-menu .invoke-menu {
-    color: #757575; }
-  /* line 29, ../sass/forms/_selects.scss */
-  .form-control.select select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background: none;
-    color: #999;
-    border: none !important;
-    cursor: pointer;
-    padding: 4px 25px 2px 5px;
-    width: 120%; }
-    /* line 38, ../sass/forms/_selects.scss */
-    .form-control.select select option {
-      margin: 5px 0; }
-  /* line 42, ../sass/forms/_selects.scss */
-  .form-control.select:after {
-    color: #0099cc;
-    content: "v";
-    display: block;
-    font-family: 'symbolsfont';
-    pointer-events: none;
-    position: absolute;
-    right: 5px;
-    top: 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.
- *****************************************************************************/
-/* line 23, ../sass/forms/_channel-selector.scss */
-.channel-selector .line {
-  margin-bottom: 5px;
-  min-height: 22px; }
-/* line 27, ../sass/forms/_channel-selector.scss */
-.channel-selector .treeview {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #cccccc;
-  outline: none;
-  padding: 0 3px;
-  background: #3b3b3b;
-  border-bottom: 1px solid #4d4d4d;
-  min-height: 300px;
-  max-height: 400px;
-  overflow: auto;
-  padding: 5px; }
-  /* line 33, ../sass/forms/_mixins.scss */
-  .channel-selector .treeview.error {
-    background: rgba(255, 0, 0, 0.5); }
-/* line 36, ../sass/forms/_channel-selector.scss */
-.channel-selector .btns-add-remove {
-  margin-top: 150px; }
-  /* line 39, ../sass/forms/_channel-selector.scss */
-  .channel-selector .btns-add-remove .btn {
-    display: block;
-    font-size: 1.5em;
-    margin-bottom: 5px;
-    padding: 10px;
-    text-align: center; }
-
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 23, ../sass/forms/_datetime.scss */
-.complex.datetime span {
-  display: inline-block;
-  margin-right: 5px; }
-/* line 36, ../sass/forms/_datetime.scss */
-.complex.datetime .fields {
-  margin-top: 3px 0;
-  padding: 3px 0; }
-/* line 41, ../sass/forms/_datetime.scss */
-.complex.datetime .date {
-  width: 85px; }
-  /* line 44, ../sass/forms/_datetime.scss */
-  .complex.datetime .date input {
-    width: 80px; }
-/* line 50, ../sass/forms/_datetime.scss */
-.complex.datetime .time.sm {
-  width: 45px; }
-  /* line 53, ../sass/forms/_datetime.scss */
-  .complex.datetime .time.sm input {
-    width: 40px; }

platform/commonUI/general/res/css/items.css

@@ -1,299 +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.
- *****************************************************************************/
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/************************** FEATURES */
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** COLORS AND SHADING */
-/************************** RATIOS */
-/************************** LAYOUT */
-/************************** CONTROLS */
-/************************** PATHS */
-/************************** TIMINGS */
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 22, ../sass/items/_item.scss */
-.items-holder {
-  overflow: hidden;
-  *zoom: 1;
-  overflow-y: auto; }
-  /* line 25, ../sass/items/_item.scss */
-  .items-holder .contents {
-    top: 0; }
-  /* line 29, ../sass/items/_item.scss */
-  .items-holder .item.grid-item {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
-    background-image: -moz-linear-gradient(#5e5e5e, #525252);
-    background-image: -webkit-linear-gradient(#5e5e5e, #525252);
-    background-image: linear-gradient(#5e5e5e, #525252);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    border-top: 1px solid #636363;
-    color: #999;
-    display: inline-block;
-    box-sizing: border-box;
-    cursor: pointer;
-    float: left;
-    height: 200px;
-    width: 200px;
-    margin-bottom: 3px;
-    margin-right: 3px;
-    position: relative; }
-    /* line 162, ../sass/_mixins.scss */
-    .items-holder .item.grid-item:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #707070), color-stop(100%, #636363));
-      background-image: -moz-linear-gradient(#707070, #636363);
-      background-image: -webkit-linear-gradient(#707070, #636363);
-      background-image: linear-gradient(#707070, #636363);
-      color: #bdbdbd; }
-      /* line 165, ../sass/_mixins.scss */
-      .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
-        color: #949494; }
-    /* line 170, ../sass/_mixins.scss */
-    .items-holder .item.grid-item.btn-menu .invoke-menu {
-      color: #828282; }
-    /* line 46, ../sass/items/_item.scss */
-    .items-holder .item.grid-item:hover .item-main .item-type {
-      color: #0099cc !important; }
-      /* line 48, ../sass/items/_item.scss */
-      .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
-        color: #49dedb; }
-    /* line 52, ../sass/items/_item.scss */
-    .items-holder .item.grid-item:hover .item-main .item-open {
-      opacity: 1; }
-    /* line 57, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .contents {
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
-    /* line 61, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar.abs {
-      bottom: auto;
-      height: 20px;
-      line-height: 20px;
-      z-index: 5; }
-      /* line 66, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
-        width: auto; }
-        /* line 68, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
-          margin-left: 3px; }
-          /* line 70, ../sass/items/_item.scss */
-          .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
-            color: #49dedb; }
-    /* line 76, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar.abs {
-      top: auto;
-      height: 30px;
-      padding: 5px; }
-    /* line 82, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .item-main {
-      line-height: 160px;
-      z-index: 1; }
-      /* line 88, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .item-main .item-type {
-        overflow: false;
-        position: absolute;
-        top: 40px;
-        right: 40px;
-        bottom: 40px;
-        left: 40px;
-        width: auto;
-        height: auto;
-        color: #737373;
-        text-align: center;
-        font-size: 96.9px;
-        line-height: 102px;
-        bottom: auto;
-        height: 102px;
-        top: 30px; }
-        /* line 100, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .item-main .item-type .l-icon-link {
-          color: #1a8e8b;
-          height: 36px;
-          line-height: 36px;
-          position: absolute;
-          font-size: 32px;
-          left: 0px;
-          bottom: 10px;
-          z-index: 2; }
-      /* line 112, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .item-main .item-open {
-        -moz-transition-property: "opacity";
-        -o-transition-property: "opacity";
-        -webkit-transition-property: "opacity";
-        transition-property: "opacity";
-        -moz-transition-duration: 200ms;
-        -o-transition-duration: 200ms;
-        -webkit-transition-duration: 200ms;
-        transition-duration: 200ms;
-        -moz-transition-timing-function: ease-in-out;
-        -o-transition-timing-function: ease-in-out;
-        -webkit-transition-timing-function: ease-in-out;
-        transition-timing-function: ease-in-out;
-        opacity: 0;
-        font-size: 3em;
-        left: auto;
-        width: 50px;
-        pointer-events: none;
-        text-align: right; }
-    /* line 124, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .title {
-      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-      color: #cccccc;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis; }
-    /* line 132, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .details {
-      font-size: 0.8em; }
-    /* line 135, ../sass/items/_item.scss */
-    .items-holder .item.grid-item.selected {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
-      background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: linear-gradient(#0ac2ff, #00b4f0);
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      border: none;
-      border-top: 1px solid #14c4ff;
-      color: #999;
-      display: inline-block;
-      color: #80dfff; }
-      /* line 162, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected:not(.disabled):hover {
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-        background-size: 100%;
-        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
-        background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
-        background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
-        background-image: linear-gradient(#2ecbff, #14c4ff);
-        color: #bdbdbd; }
-        /* line 165, ../sass/_mixins.scss */
-        .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
-          color: #75ddff; }
-      /* line 170, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
-        color: #52d4ff; }
-      /* line 140, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
-        color: #80dfff; }
-      /* line 141, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected .item-main .item-open {
-        color: #80dfff; }
-      /* line 142, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected .title {
-        color: white; }
-      /* line 144, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected:hover .item-main .item-type {
-        color: white !important; }

platform/commonUI/general/res/css/main.css

@@ -1,120 +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.
- *****************************************************************************/
-/*
-Syntax error: Undefined variable: "$colorBodyBg".
-        on line 66 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss, in `boxOutline'
-        from line 7 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss
-        from line 10 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/main.scss
-
-Backtrace:
-/Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss:66:in `boxOutline'
-/Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss:7
-/Users/iMac/dev/nasa/wtd-dev/platform/sass/main.scss:10
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/variable.rb:49:in `_perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/node.rb:40:in `perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/funcall.rb:93:in `_perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/funcall.rb:93:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/funcall.rb:93:in `_perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/node.rb:40:in `perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:56:in `perform_arguments'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:50:in `zip'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:50:in `perform_arguments'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:261:in `visit_mixin'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:107:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:119:in `with_environment'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:106:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:318:in `visit_rule'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:225:in `visit_import'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:225:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:225:in `visit_import'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:107:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:119:in `with_environment'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:106:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:126:in `visit_root'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:7:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:7:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/root_node.rb:20:in `render'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/engine.rb:315:in `_render'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/engine.rb:262:in `render'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:140:in `compile'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:126:in `timed'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:139:in `compile'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/logger.rb:45:in `red'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:138:in `compile'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:118:in `compile_if_required'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:103:in `run'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:101:in `each'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:101:in `run'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:126:in `timed'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:100:in `run'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/watch_project.rb:147:in `recompile'
-/Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `to_proc'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:73:in `call'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:73:in `run_callback'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:55:in `callback_action'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:35:in `update'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:39:in `modified'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:37:in `each'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:37:in `modified'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:18:in `refresh'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `each'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:15:in `loop'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:15:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/monitor.rb:26:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm.rb:70:in `monitor'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/watch_project.rb:87:in `perform'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/base.rb:18:in `execute'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/project_base.rb:19:in `execute'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/exec/sub_command_ui.rb:15:in `run!'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:30
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:44:in `call'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:44
-/usr/bin/compass:23:in `load'
-/usr/bin/compass:23
-*/
-body:before {
-  white-space: pre;
-  font-family: monospace;
-  content: "Syntax error: Undefined variable: \"$colorBodyBg\".\A         on line 66 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss, in `boxOutline'\A         from line 7 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss\A         from line 10 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/main.scss"; }

platform/commonUI/general/res/css/tree.css

@@ -1,497 +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.
- *****************************************************************************/
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/************************** FEATURES */
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** COLORS AND SHADING */
-/************************** RATIOS */
-/************************** LAYOUT */
-/************************** CONTROLS */
-/************************** PATHS */
-/************************** TIMINGS */
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 23, ../sass/tree/_tree.scss */
-ul.tree {
-  margin: 0;
-  padding: 0; }
-  /* line 308, ../sass/_mixins.scss */
-  ul.tree li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0; }
-  /* line 25, ../sass/tree/_tree.scss */
-  ul.tree li {
-    display: block;
-    position: relative; }
-    /* line 28, ../sass/tree/_tree.scss */
-    ul.tree li span.tree-item {
-      -moz-border-radius: 2px;
-      -webkit-border-radius: 2px;
-      border-radius: 2px;
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      display: block;
-      font-size: 0.8em;
-      height: 1.5rem;
-      line-height: 1.5rem;
-      margin-bottom: 3px;
-      position: relative; }
-      /* line 39, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .view-control {
-        display: inline-block;
-        margin-left: 5px;
-        font-size: 0.75em;
-        width: 10px; }
-        /* line 45, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .view-control:hover {
-          color: #ffc700; }
-      /* line 50, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .label {
-        display: block;
-        overflow: hidden;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        bottom: 0px;
-        left: 0px;
-        width: auto;
-        height: auto;
-        left: 15px; }
-        /* line 57, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .type-icon {
-          overflow: false;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          width: auto;
-          height: auto;
-          text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
-          color: #0099cc;
-          left: 5px;
-          right: auto;
-          width: 1em; }
-          /* line 65, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            text-shadow: black 0 1px 2px;
-            position: absolute;
-            z-index: 2; }
-          /* line 71, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            color: #ff3c00;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            top: 1px;
-            right: -2px; }
-          /* line 77, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
-            color: #49dedb;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            left: -3px;
-            bottom: 5px; }
-        /* line 86, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          overflow: hidden;
-          position: absolute;
-          top: 0px;
-          right: 0px;
-          bottom: 0px;
-          left: 0px;
-          width: auto;
-          height: auto;
-          display: block;
-          left: 30px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 97, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.loading {
-        pointer-events: none; }
-        /* line 99, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .label {
-          opacity: 0.5; }
-          /* line 101, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item.loading .label .title-label {
-            font-style: italic; }
-        /* line 105, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .wait-spinner {
-          margin-left: 14px; }
-      /* line 110, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 114, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .view-control {
-          color: #0099cc; }
-        /* line 117, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .label .type-icon {
-          color: #fff; }
-      /* line 123, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 126, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 129, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover .icon {
-          color: #33ccff; }
-      /* line 135, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item:not(.loading) {
-        cursor: pointer; }
-      /* line 139, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .context-trigger {
-        top: -1px;
-        position: absolute;
-        right: 3px; }
-        /* line 145, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .context-trigger .invoke-menu {
-          font-size: 0.75em;
-          height: 0.9rem;
-          line-height: 0.9rem; }
-  /* line 154, ../sass/tree/_tree.scss */
-  ul.tree ul.tree {
-    margin-left: 15px; }
-
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/* line 23, ../sass/search/_search.scss */
-.abs.search-holder {
-  height: 25px;
-  bottom: 0;
-  z-index: 5; }
-  /* line 27, ../sass/search/_search.scss */
-  .abs.search-holder.active {
-    height: auto;
-    bottom: 0; }
-
-/* line 38, ../sass/search/_search.scss */
-.search {
-  display: flex;
-  flex-direction: column;
-  height: 100%; }
-  /* line 49, ../sass/search/_search.scss */
-  .search .search-bar {
-    font-size: 0.8em;
-    position: relative;
-    width: 100%; }
-    /* line 66, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      height: 25px;
-      line-height: 25px;
-      padding-top: 0;
-      padding-bottom: 0; }
-    /* line 73, ../sass/search/_search.scss */
-    .search .search-bar .search-icon,
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      color: #737373;
-      height: 17px;
-      width: 17px;
-      line-height: 17px;
-      position: absolute;
-      text-align: center;
-      top: 4px; }
-    /* line 86, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      cursor: pointer;
-      transition: color .25s; }
-    /* line 93, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      position: relative;
-      width: 100%;
-      padding-left: 22px !important;
-      padding-right: 44px !important; }
-      /* line 100, ../sass/search/_search.scss */
-      .search .search-bar .search-input input {
-        width: 100%; }
-    /* line 105, ../sass/search/_search.scss */
-    .search .search-bar .search-icon {
-      color: #737373;
-      left: 3px;
-      transition: visibility .15s, opacity .15s, color .2s;
-      pointer-events: none; }
-    /* line 125, ../sass/search/_search.scss */
-    .search .search-bar .search-input:hover + div.search-icon {
-      color: #a6a6a6; }
-    /* line 129, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon {
-      right: 22px;
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 138, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon.content {
-        visibility: visible;
-        opacity: 1; }
-      /* line 143, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon:hover {
-        color: #a6a6a6; }
-    /* line 148, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon {
-      font-size: 0.8em;
-      padding-right: 4px;
-      right: 4px;
-      text-align: right; }
-      /* line 154, ../sass/search/_search.scss */
-      .search .search-bar .menu-icon:hover {
-        color: #a6a6a6; }
-    /* line 159, ../sass/search/_search.scss */
-    .search .search-bar .search-menu-holder {
-      float: right;
-      left: -20px;
-      z-index: 1;
-      transition: visibility .05s, opacity .05s; }
-      /* line 169, ../sass/search/_search.scss */
-      .search .search-bar .search-menu-holder.off {
-        visibility: hidden;
-        opacity: 0; }
-    /* line 176, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon:hover + div.search-menu-holder {
-      visibility: visible; }
-    /* line 179, ../sass/search/_search.scss */
-    .search .search-bar div.search-menu-holder:hover {
-      visibility: visible; }
-  /* line 184, ../sass/search/_search.scss */
-  .search .active-filter-display {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    line-height: 130%;
-    padding: 5px 0;
-    padding-left: 1.4625em;
-    font-size: 0.65em;
-    margin-top: 3px; }
-    /* line 199, ../sass/search/_search.scss */
-    .search .active-filter-display .clear-filters-icon {
-      opacity: 0.4;
-      font-size: 0.8em;
-      position: absolute;
-      left: 1px;
-      cursor: pointer; }
-    /* line 210, ../sass/search/_search.scss */
-    .search .active-filter-display.off {
-      visibility: hidden;
-      opacity: 0;
-      height: 0;
-      margin: 0;
-      padding: 0;
-      border: 0; }
-  /* line 220, ../sass/search/_search.scss */
-  .search .search-scroll {
-    order: 3;
-    margin-top: 4px;
-    overflow-y: auto;
-    top: auto;
-    height: auto;
-    max-height: 100%;
-    position: relative; }
-    /* line 235, ../sass/search/_search.scss */
-    .search .search-scroll .results .search-result-item {
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      margin-bottom: 2px;
-      border-radius: 2px;
-      padding-top: 4px;
-      padding-bottom: 2px; }
-      /* line 249, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label {
-        margin-left: 6px; }
-        /* line 253, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item .label .title-label {
-          display: inline-block;
-          position: absolute;
-          left: 29px;
-          right: 5px;
-          font-size: .8em;
-          line-height: 17px;
-          width: auto;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 275, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 279, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .view-control {
-          color: #0099cc; }
-        /* line 282, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .label .type-icon {
-          color: #fff; }
-      /* line 287, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
-        text-shadow: black 0 1px 2px;
-        z-index: 2;
-        color: #49dedb;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        margin-left: -25px; }
-      /* line 296, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 299, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 302, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
-          color: #33ccff; }
-    /* line 310, ../sass/search/_search.scss */
-    .search .search-scroll .load-icon {
-      position: relative; }
-      /* line 312, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon.loading {
-        pointer-events: none;
-        margin-left: 6px; }
-        /* line 316, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .title-label {
-          font-style: italic;
-          font-size: .9em;
-          opacity: 0.5;
-          margin-left: 26px;
-          line-height: 24px; }
-        /* line 326, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .wait-spinner {
-          margin-left: 6px; }
-      /* line 331, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon:not(.loading) {
-        cursor: pointer; }
-    /* line 336, ../sass/search/_search.scss */
-    .search .search-scroll .load-more-button {
-      margin-top: 5px 0;
-      font-size: 0.8em;
-      position: relative;
-      left: 50%;
-      margin-left: -45px;
-      text-align: center;
-      width: 90px;
-      white-space: nowrap; }

platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json

@@ -1,123 +1,168 @@
 {
 	"metadata": {
-		"name": "WTD Symbols v2.2",
-		"lastOpened": 1439948744240,
-		"created": 1439948734037
+		"name": "WTD-Symbols-v25",
+		"lastOpened": 1445369623428,
+		"created": 1445367449289
 	},
 	"iconSets": [
 		{
 			"selection": [
 				{
-					"order": 82,
+					"order": 109,
+					"id": 89,
+					"prevSize": 32,
+					"code": 58898,
+					"name": "icon-save",
+					"tempChar": ""
+				},
+				{
+					"order": 108,
+					"id": 88,
+					"prevSize": 32,
+					"code": 58897,
+					"name": "icon-dataset",
+					"tempChar": ""
+				},
+				{
+					"order": 90,
+					"id": 87,
+					"prevSize": 32,
+					"code": 58896,
+					"name": "icon-bell",
+					"tempChar": ""
+				},
+				{
+					"order": 91,
+					"id": 86,
+					"prevSize": 32,
+					"code": 58889,
+					"name": "icon-hourglass",
+					"tempChar": ""
+				},
+				{
+					"order": 92,
+					"id": 85,
+					"prevSize": 32,
+					"code": 58888,
+					"codes": [
+						58888,
+						58889,
+						58890
+					],
+					"name": "icon-info-v15",
+					"tempChar": ""
+				},
+				{
+					"order": 93,
 					"id": 84,
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 77,
+					"order": 94,
 					"id": 83,
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 78,
+					"order": 95,
 					"id": 82,
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 79,
+					"order": 96,
 					"id": 81,
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 80,
+					"order": 97,
 					"id": 80,
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 81,
+					"order": 98,
 					"id": 78,
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 1,
+					"order": 99,
 					"id": 75,
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 3,
+					"order": 100,
 					"id": 74,
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 4,
+					"order": 101,
 					"id": 73,
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 5,
+					"order": 102,
 					"id": 72,
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 6,
+					"order": 103,
 					"id": 71,
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 7,
+					"order": 104,
 					"id": 70,
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 8,
+					"order": 105,
 					"id": 69,
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 9,
+					"order": 106,
 					"id": 68,
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -125,7 +170,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -133,7 +178,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -141,15 +186,15 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 13,
+					"order": 87,
 					"id": 64,
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -157,7 +202,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -165,7 +210,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -173,7 +218,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -181,7 +226,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -189,7 +234,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -197,7 +242,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -205,7 +250,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -213,7 +258,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -221,7 +266,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -229,7 +274,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -237,7 +282,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -245,7 +290,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -253,7 +298,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -261,15 +306,15 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
 					"id": 49,
 					"prevSize": 32,
 					"code": 224,
-					"name": "icon-box-round-corners",
-					"tempChar": ""
+					"name": "icon-box",
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -277,7 +322,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -285,7 +330,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -293,7 +338,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -301,7 +346,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -309,7 +354,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -317,7 +362,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -325,7 +370,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -333,7 +378,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -341,7 +386,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -349,7 +394,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -357,7 +402,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -365,7 +410,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -373,7 +418,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -381,7 +426,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -389,7 +434,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -397,7 +442,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -405,7 +450,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -413,7 +458,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -421,7 +466,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -429,7 +474,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -437,7 +482,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -445,7 +490,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -453,7 +498,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -461,7 +506,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -469,7 +514,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -477,7 +522,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -485,7 +530,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -493,7 +538,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -501,7 +546,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -509,7 +554,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -517,7 +562,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -525,7 +570,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -533,7 +578,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -541,7 +586,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -549,7 +594,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -557,7 +602,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -565,7 +610,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -573,7 +618,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -581,7 +626,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -589,7 +634,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -597,7 +642,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -605,7 +650,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -613,7 +658,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -621,7 +666,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -629,7 +674,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -637,7 +682,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -652,6 +697,121 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
+				{
+					"id": 89,
+					"paths": [
+						"M192.2 576c-0.2 0-0.2 0 0 0l-0.2 448h640v-447.8c0 0 0 0-0.2-0.2h-639.6z",
+						"M978.8 210.8l-165.4-165.4c-25-25-74.2-45.4-109.4-45.4h-576c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128v-448c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64v448c70.4 0 128-57.6 128-128v-576c0-35.2-20.4-84.4-45.2-109.2zM704 256c0 35.2-28.8 64-64 64h-448c-35.2 0-64-28.8-64-64v-192h320v192h128v-192h128v192z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(0, 0, 0)"
+						},
+						{
+							"fill": "rgb(0, 0, 0)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-save-v2"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							0,
+							0
+						]
+					}
+				},
+				{
+					"id": 88,
+					"paths": [
+						"M896 192h-320c-16.4-16.4-96.8-96.8-109.2-109.2l-37.4-37.4c-25-25-74.2-45.4-109.4-45.4h-256c-35.2 0-64 28.8-64 64v384c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v-128c0-70.4-57.6-128-128-128z",
+						"M896 448h-768c-70.4 0-128 57.6-128 128v320c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-320c0-70.4-57.6-128-128-128zM320 896h-128v-320h128v320zM576 896h-128v-320h128v320zM832 896h-128v-320h128v320z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-dataset"
+					],
+					"colorPermutations": {
+						"125525525516161751": []
+					}
+				},
+				{
+					"id": 87,
+					"paths": [
+						"M512 1024c106 0 192-86 192-192h-384c0 106 86 192 192 192z",
+						"M896 448v-64c0-212-172-384-384-384s-384 172-384 384v64c0 70.6-57.4 128-128 128v128h1024v-128c-70.6 0-128-57.4-128-128z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-bell"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
+				{
+					"id": 86,
+					"paths": [
+						"M1024 0h-1024c0 282.8 229.2 512 512 512s512-229.2 512-512zM512 384c-102.6 0-199-40-271.6-112.4-41.2-41.2-72-90.2-90.8-143.6h724.6c-18.8 53.4-49.6 102.4-90.8 143.6-72.4 72.4-168.8 112.4-271.4 112.4z",
+						"M512 512c-282.8 0-512 229.2-512 512h1024c0-282.8-229.2-512-512-512z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-hourglass"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
+				{
+					"id": 85,
+					"paths": [
+						"M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM512 128c70.6 0 128 57.4 128 128s-57.4 128-128 128c-70.6 0-128-57.4-128-128s57.4-128 128-128zM704 832h-384v-128h64v-256h256v256h64v128z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(0, 0, 0)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-info-v1.5"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							0
+						]
+					}
+				},
 				{
 					"id": 84,
 					"paths": [
@@ -664,7 +824,8 @@
 						"icon-x-in-circle"
 					],
 					"colorPermutations": {
-						"16161751": []
+						"16161751": [],
+						"125525525516161751": []
 					}
 				},
 				{
@@ -840,17 +1001,19 @@
 				{
 					"id": 78,
 					"paths": [
-						"M896 640c0 0-130 188-128 256 2 70.6 57.4 128 128 128s126-57.4 128-128c2-68-128-256-128-256z",
-						"M449 129l0.2-64.8c0-35.4-28.4-64-63.8-64.2 0 0-0.2 0-0.2 0-35.2 0-63.8 28.6-64 63.8l-0.6 190.8-294 292.6c-50 50-12.4 215.2 112.4 340s290 162.4 340 112.4l417-423.6-447-447zM384 640c-70.6 0-128-57.4-128-128 0-47.4 25.8-89 64.4-111l-0.4 110.8c0 35.4 28.4 64 63.8 64.2 0 0 0.2 0 0.2 0 35.2 0 63.8-28.6 64-63.8l0.4-110.8c38 22.2 63.6 63.4 63.6 110.6 0 70.6-57.4 128-128 128z"
+						"M544 224v224c0 88.4-71.6 160-160 160s-160-71.6-160-160v-97.2l-197.4 196.4c-50 50-12.4 215.2 112.4 340s290 162.4 340 112.4l417-423.6-352-352z",
+						"M896 1024c70.6 0 128-57.4 128-128 0-108.6-128-192-128-192s-128 83.4-128 192c0 70.6 57.4 128 128 128z",
+						"M384 512c-35.4 0-64-28.6-64-64v-384c0-35.4 28.6-64 64-64s64 28.6 64 64v384c0 35.4-28.6 64-64 64z"
 					],
 					"attrs": [
 						{
-							"fill": "rgb(6,161,75)",
-							"opacity": 1
+							"fill": "rgb(6, 161, 75)"
 						},
 						{
-							"fill": "rgb(6,161,75)",
-							"opacity": 1
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
 						}
 					],
 					"isMulticolor": false,
@@ -860,10 +1023,12 @@
 					],
 					"colorPermutations": {
 						"16161751": [
+							1,
 							1,
 							1
 						],
 						"125525525516161751": [
+							1,
 							1,
 							1
 						]
@@ -1018,18 +1183,28 @@
 				{
 					"id": 67,
 					"paths": [
-						"M832 512.4c0-0.2 0-0.2 0-0.4v-320c0-105.6-86.4-192-192-192h-448c-105.6 0-192 86.4-192 192v320c0 105.6 86.4 192 192 192h263.6l-197.2-445.6 573.6 254z",
-						"M766.8 659.8l193.8-20.4-576.6-255.4 255.4 576.6 20.4-193.8 257 257.2 107.2-107.2z"
+						"M894-2h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h400c-2.2-3.8-4-7.6-5.8-11.4l-255.2-576.8c-21.4-48.4-10.8-105 26.6-142.4 24.4-24.4 57.2-37.4 90.4-37.4 17.4 0 35.2 3.6 51.8 11l576.6 255.4c4 1.8 7.8 3.8 11.4 5.8v-400.2c0.2-70.4-57.4-128-127.8-128z",
+						"M958.6 637.4l-576.6-255.4 255.4 576.6 64.6-128.6 192 192 128-128-192-192z"
 					],
 					"attrs": [
-						{},
-						{}
+						{
+							"fill": "rgb(0, 0, 0)"
+						},
+						{
+							"fill": "rgb(0, 0, 0)"
+						}
 					],
 					"isMulticolor": false,
 					"grid": 0,
 					"tags": [
 						"icon-box-with-arrow-cursor"
-					]
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							0,
+							0
+						]
+					}
 				},
 				{
 					"id": 66,
@@ -1290,16 +1465,26 @@
 				{
 					"id": 49,
 					"paths": [
-						"M1024 832c0 105.6-86.4 192-192 192h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640z"
+						"M0 0h1024v1024h-1024v-1024z"
 					],
 					"attrs": [
-						{}
+						{
+							"fill": "rgb(0, 0, 0)"
+						}
 					],
 					"isMulticolor": false,
 					"grid": 0,
 					"tags": [
 						"icon-box-round-corners"
-					]
+					],
+					"colorPermutations": {
+						"16161751": [
+							0
+						],
+						"125525525516161751": [
+							0
+						]
+					}
 				},
 				{
 					"id": 48,
@@ -2046,6 +2231,12 @@
 						161,
 						75,
 						1
+					],
+					[
+						255,
+						255,
+						255,
+						1
 					]
 				]
 			],

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -55,7 +55,7 @@
 <glyph unicode="&#x7a;" glyph-name="icon-fullscreen-expand" d="M192.344 128c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 767.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 960h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 128.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
 <glyph unicode="&#x7b;" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
 <glyph unicode="&#x7d;" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
-<glyph unicode="&#xe0;" glyph-name="icon-box-round-corners" d="M1024 128c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
+<glyph unicode="&#xe0;" glyph-name="icon-box" d="M0 960h1024v-1024h-1024v1024z" />
 <glyph unicode="&#xe1;" glyph-name="icon-layers" d="M1024 576l-512 384-512-384 512-384zM512 64l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
 <glyph unicode="&#xe2;" glyph-name="icon-line-horz" d="M64 384c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
 <glyph unicode="&#xe3;" glyph-name="icon-image" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-768v768h768v-768zM320 704l-128-128v-448h640v320l-128 128-128-128z" />
@@ -76,14 +76,19 @@
 <glyph unicode="&#xf4;" glyph-name="icon-link" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
 <glyph unicode="&#xf5;" glyph-name="icon-timer" d="M638 898c0 35.4-28.6 64-64 64h-128c-35.4 0-64-28.6-64-64s28.6-64 64-64h128c35.4 0 64 28.6 64 64zM510 834c-247.4 0-448-200.6-448-448s200.6-448 448-448 448 200.6 448 448-200.6 448-448 448zM510 386h-336c0 185.2 150.8 336 336 336v-336z" />
 <glyph unicode="&#xf6;" glyph-name="icon-thumbs-strip" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
-<glyph unicode="&#xe600;" glyph-name="icon-box-with-arrow-cursor" d="M832 447.6c0 0.2 0 0.2 0 0.4v320c0 105.6-86.4 192-192 192h-448c-105.6 0-192-86.4-192-192v-320c0-105.6 86.4-192 192-192h263.6l-197.2 445.6 573.6-254zM766.8 300.2l193.8 20.4-576.6 255.4 255.4-576.6 20.4 193.8 257-257.2 107.2 107.2z" />
+<glyph unicode="&#xe600;" glyph-name="icon-box-with-arrow-cursor" d="M894 962h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 322.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
 <glyph unicode="&#xe601;" glyph-name="icon-datatable" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 385v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 345.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 70v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
 <glyph unicode="&#xe602;" glyph-name="icon-tabular-scrolling" d="M64 960c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 704v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 576v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 320c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-64l-256 256h512z" />
 <glyph unicode="&#xe603;" glyph-name="icon-alert-triangle" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
 <glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
 <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
-<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
+<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
 <glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
+<glyph unicode="&#xe608;" glyph-name="icon-info-v15" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h64v256h256v-256h64v-128z" />
+<glyph unicode="&#xe609;" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
+<glyph unicode="&#xe610;" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
+<glyph unicode="&#xe611;" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
+<glyph unicode="&#xe612;" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>

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

@@ -59,7 +59,7 @@
 	line-height: 120%;
 
 	a {
-		color: #84b3ff;
+		color: $colorAboutLink;
 	}
 	.s-description,
 	.s-info {
@@ -89,7 +89,7 @@
 				border-top: none;
 			}
 			em {
-				color: darken($colorBodyFg, 20%);
+				color: pushBack($colorBodyFg, 20%);
 //				margin-left: 2em;
 				&:first-child {
 //					margin-left: 0;

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

@@ -29,7 +29,7 @@
 	font-size: 0.75rem;
 
 	&:hover {
-		.l-autoflow-header .l-btn.change-column-width {
+		.l-autoflow-header .s-btn.change-column-width {
 			@include trans-prop-nice-fade(50ms);
 			opacity: 1;
 		}
@@ -45,7 +45,7 @@
 		span {
 			vertical-align: middle;
 		}
-		.l-btn.change-column-width {
+		.s-btn.change-column-width {
 			@include trans-prop-nice-fade(500ms);
 			opacity: 0;
 		}

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

@@ -28,64 +28,8 @@ $bodyMargin: 10px;
 $interiorMargin: 5px;
 $interiorMarginLg: $interiorMargin * 2;
 $interiorMarginSm: 3px;
-$basicCr: 2px;
-$controlCr: 3px;
-$smallCr: 2px;
 $badgeW: 35px;
 
-/************************** COLORS AND SHADING */
-$colorBodyBg: #333;
-$colorBodyFg: #999;
-$colorFooterBg: #000;
-$colorKey: #0099cc;
-$colorKeySelectedBg: #005177;
-$colorKeyFg: #fff;
-$colorAlt1: #ffc700;
-$colorAlert: #ff3c00;
-$colorIconLink: #49dedb;
-$colorPausedBg: #c56f01;
-$colorPausedFg: #fff;
-$colorCreateBtn: $colorKey;
-$colorGridLines: rgba(#fff, 0.05);
-// Menu colors
-$colorMenuBg: lighten($colorBodyBg, 23%);
-$colorMenuFg: lighten($colorMenuBg, 70%);
-$colorMenuIc: lighten($colorKey, 17%);
-$colorInteriorBorder: lighten($colorBodyBg, 10%);
-$colorObjFrameBg: darken($colorBodyBg, 5%);
-// Form colors
-$colorCheck: $colorKey;
-$colorFormRequired: #ffc700;
-$colorFormValid: #33cc33;
-$colorFormError: #cc0000;
-$colorFormInvalid: #ff9900;
-// Limits and staleness colors
-$colorLimitYellow: #9d7500;
-$colorLimitRed: #aa0000;
-$colorTelemFresh: #fff;
-$colorTelemStale: #888;
-$styleTelemStale: italic;
-// Bubble colors
-$colorInfoBubbleFg: #666;
-$colorInfoBubbleBg: #ddd;
-$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
-$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
-// Overlay
-$colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: $colorBodyBg;
-$colorOvrFg: $colorBodyFg;
-// Items
-$colorItemBase: lighten($colorBodyBg, 5%);
-$colorItemFg: lighten($colorItemBase, 20%);
-$colorItemSelected: $colorKey;
-// Tabular
-$tabularColorBorder: rgba(white, 0.1);
-$tabularColorBodyBg: darken($colorBodyBg, 10%);
-$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
-$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
-$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
-$tabularColorHeaderBorder: $colorBodyBg;
-
 /************************** RATIOS */
 $ltGamma: 20%;
 $btnFontSizeToH: 0.45;
@@ -101,9 +45,11 @@ $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
+$ueTimeControlH: (33px, 20px, 20px);
 // Overlay
 $ovrTopBarH: 60px;
-$ovrFooterH: 40px;
+$ovrFooterH: 30px;
+$overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
@@ -111,17 +57,15 @@ $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
 // Tree
 $treeVCW: 10px;
+$treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
-$colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
-$colorItemTreeVCHover: $colorAlt1;
 // Tabular
 $tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 3px;
 // Imagery
-$imageMainControlBarH: 22px;
+$imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
 $imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;
@@ -144,18 +88,21 @@ $reqSymbolFontSize: 0.7em;
 
 /************************** CONTROLS */
 $controlDisabledOpacity: 0.3;
-$formLabelW: 20%;
+$formLabelW: 30%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
-$scrollbarTrackSize: 10px;
-$scrollbarTrackColorBg: rgba(#000, 0.4);
+$menuLineHPx: 24px;
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
+$btnFrameH: 16px;
 
 /************************** PATHS */
-$dirImgs: '../images/'; // Relative to platform/css/ directory
+// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
+$dirCommonRes: '../../../../general/res/';
+$dirImgs: $dirCommonRes + 'images/';
 
 /************************** TIMINGS */
 $controlFadeMs: 100ms;
-

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

@@ -52,7 +52,7 @@ a.disabled {
 }
 
 @include keyframes(pulse) {
-	0%   { opacity: 0.2; }
+	0%   { opacity: 0.5; }
 	100% { opacity: 1; }
 }
 
@@ -66,6 +66,19 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }
 
+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) {
+	@include keyframes(pulseBorder) {
+		0%   { border-color: transparent; }
+		100% { border-color: $c; }
+	}
+	@include animation-name(pulseBorder);
+	@include animation-duration($dur);
+	@include animation-direction(alternate);
+	@include animation-iteration-count($iteration);
+	@include animation-timing-function(ease);
+    @include animation-delay($delay);
+}
+
 .pulse {
 	@include pulse(750ms);
 }

platform/commonUI/general/res/sass/_fixed-position.scss

@@ -76,7 +76,7 @@
 		}
 
 		.l-fixed-position-text {
-			@include txtShdwSubtle();
+			//@include txtShdwSubtle();
 			border: 1px solid transparent;
 			font-size: 0.8rem;
 			$p: 1px; //$interiorMarginSm;

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

@@ -19,12 +19,32 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** FONTS */
+@font-face {
+	/*
+    * Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+    */
+	font-family: 'symbolsfont';
+	src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot');
+	src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.woff') format('woff'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.ttf') format('truetype'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.ui-symbol {
+	font-family: 'symbolsfont';
+}
+
+/************************** HTML ENTITIES */
 a {
-	color: #ccc;
+	color: $colorA;
 	cursor: pointer;
 	text-decoration: none;
 	&:hover {
-		color: #fff;
+		color: $colorAHov;
 	}
 }
 
@@ -42,7 +62,6 @@ body, html {
 }
 
 em {
-//	color: rgba(white, 0.2); Removed this as a global setting
 	font-style: normal;
 }
 
@@ -71,12 +90,6 @@ p {
 	margin-bottom: $interiorMarginLg;
 }
 
-span {
-	/* 618 DEBUG
-	box-sizing: border-box;
-	*/
-}
-
 mct-container {
 	display: block;
 }
@@ -100,7 +113,7 @@ mct-container {
 
 .codehilite {
 	@extend .code;
-	background-color: rgba(#fff, 0.1);
+	background-color: rgba($colorBodyFg, 0.1);
 	padding: 1em;
 }
 
@@ -112,12 +125,20 @@ mct-container {
 	text-align: center;
 }
 
-.no-margin {
-	margin: 0;
+.ellipsis {
+    @include ellipsize();
 }
 
-.colorKey {
-	color: $colorKey;
+.scrolling {
+	overflow: auto;
+}
+
+.vscroll {
+	overflow-y: auto;
+}
+
+.no-margin {
+	margin: 0;
 }
 
 .ds {
@@ -129,13 +150,6 @@ mct-container {
 	display: none !important;
 }
 
-.paused {
-	&:not(.s-btn) {
-		border-color: $colorPausedBg !important;
-		color: $colorPausedBg !important;
-	}
-}
-
 .sep {
 	color: rgba(#fff, 0.2);
 }

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

@@ -29,10 +29,11 @@
 }
 
 .ui-symbol {
-	$c: $colorKey;
+	&.type-icon {
+		color: $colorObjHdrIc;
+	}
 	&.icon {
-		color: $c;
-		@include txtShdwSubtle();
+		color: $colorKey;
 		&.alert {
 			color: $colorAlert;
 			&:hover {
@@ -43,9 +44,12 @@
 			font-size: 1.65em;
 		}
 	}
+	&.icon-calendar:after {
+		content: "\e605";
+	}
 }
 
-.bar .icon {
+.bar .ui-symbol {
 	display: inline-block;
 }
 
@@ -54,7 +58,7 @@
 	display: inline-block;
 }
 
-.btn-menu .invoke-menu,
+.s-menu-btn .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
@@ -65,9 +69,9 @@
 	position: absolute;
 }
 
-.tree-item .type-icon {
-	font-size: 16px; // 16px is crisp size
-}
+//.tree-item .type-icon {
+//	font-size: 16px; // 16px is crisp size
+//}
 
 .l-icon-link:before {
 	content: "\f4";

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

@@ -1,20 +0,0 @@
-// Classes for initializing states of objects
-
-.browse-mode {
-    .split-layout {
-        .split-pane-component.pane.left {
-            width: 15%;
-        }
-    }
-}
-
-.edit-mode {
-    .split-layout {
-        .split-pane-component.pane.right {
-            width: 15%;
-            .pane.bottom {
-                height: 30%;
-            }
-        }
-    }
-}

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

@@ -1,52 +1,26 @@
-@mixin limit($c, $glyph) {
-	background: $c;
+@mixin limit($bg, $ic, $glyph) {
+	background: $bg !important;
+	//color: $fg !important;
 	&:before {
-		//@include pulse(500ms);
-		color: lighten($c, 30%);
+		//@include pulse(1000ms);
+		color: $ic;
 		content: $glyph;
 	}
 }
 
-/*.s-limit-upr,
-.s-limit-lwr {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
-	&:before {
-		display: inline-block;
-		font-family: symbolsfont;
-		font-size: 0.85em;
-		font-style: normal !important;
-		margin-right: $interiorMarginSm;
-		vertical-align: middle;
-	}
-}
-
-.s-limit-upr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000eb"); }
-}
-
-.s-limit-lwr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
-}*/
-
 [class*="s-limit"] {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
+	//white-space: nowrap;
 	&:before {
 		display: inline-block;
 		font-family: symbolsfont;
-		font-size: 0.85em;
+		font-size: 0.75em;
 		font-style: normal !important;
 		margin-right: $interiorMarginSm;
 		vertical-align: middle;
 	}
 }
 
-.s-limit-upr-red { @include limit($colorLimitRed, "\0000eb"); };
-.s-limit-upr-yellow { @include limit($colorLimitYellow, "\0000ed"); };
-.s-limit-lwr-yellow { @include limit($colorLimitYellow, "\0000ec"); };
-.s-limit-lwr-red { @include limit($colorLimitRed, "\0000ee"); };
+.s-limit-upr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000eb"); };
+.s-limit-upr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ed"); };
+.s-limit-lwr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ec"); };
+.s-limit-lwr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000ee"); };

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

@@ -1,4 +1,3 @@
-/*****************************************************************************
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -20,26 +19,20 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@import "compass";
-@import "compass/reset";
-@import "compass/css3";
-@import "compass/css3/animation";
-@import "compass/css3/user-interface";
-@import "compass/utilities";
-
-@import "mixins";
 @import "effects";
 @import "global";
-@import "fonts";
-@import "user-environ/layout";
-//@import "search/layout";
-@import "fixed-position";
 @import "about";
 @import "text";
 @import "icons";
 @import "limits";
 @import "data-status";
-@import "lists/tabular";
+@import "helpers/bubbles";
+@import "helpers/splitter";
+@import "helpers/wait-spinner";
+@import "messages";
+@import "properties";
+
+/********************************* CONTROLS */
 @import "controls/breadcrumb";
 @import "controls/buttons";
 @import "controls/color-palette";
@@ -47,30 +40,43 @@
 @import "controls/lists";
 @import "controls/menus";
 @import "controls/time-controller";
-@import "edit/editor";
-@import "features/imagery";
-@import "features/time-display";
+@import "mobile/controls/menus";
+
+/********************************* FORMS */
 @import "forms/elems";
-@import "forms/validation";
-@import "forms/text-input";
 @import "forms/selects";
 @import "forms/channel-selector";
 @import "forms/datetime";
+@import "forms/validation";
 @import "forms/filter";
-@import "plots/plots-main";
+
+/********************************* USER ENVIRON */
+@import "user-environ/layout";
+@import "mobile/layout";
+@import "edit/editor";
+@import "search/search";
+@import "mobile/search/search";
 @import "overlay/overlay";
+@import "mobile/overlay/overlay";
+@import "tree/tree";
+@import "mobile/tree";
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/bottom-bar";
-@import "user-environ/object-browse";
 @import "user-environ/tool-bar";
-@import "helpers/bubbles";
-@import "helpers/splitter";
-@import "helpers/wait-spinner";
-@import "properties";
-@import "autoflow";
+
+/********************************* VIEWS */
+@import "fixed-position";
+@import "lists/tabular";
+@import "plots/plots-main";
 @import "iframe";
-@import "messages";
-@import "initialization";
 @import "hide-non-functional";
 @import "views";
+@import "items/item";
+@import "mobile/item";
+
+
+/********************************* TO BE MOVED */
+@import "autoflow";
+@import "features/imagery";
+@import "features/time-display";

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

@@ -19,257 +19,285 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
-    top: $offset; right: $offset; bottom: $offset; left: $offset;
-    width: auto; height: auto;
+    top: $offset;
+    right: $offset;
+    bottom: $offset;
+    left: $offset;
+    width: auto;
+    height: auto;
 }
 
 @mixin ancillaryIcon($d, $c) {
-	// Used for small icons used in combination with larger icons,
-	// like the link and alert icons in tree items.
-	color: $c;
-	font-size: $d;
-	line-height: $d;
-	height: $d;
-	width: $d;
+    // Used for small icons used in combination with larger icons,
+    // like the link and alert icons in tree items.
+    color: $c;
+    font-size: $d;
+    line-height: $d;
+    height: $d;
+    width: $d;
 }
 
 @mixin trans-prop-nice($props, $t: 500ms) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property($props);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property($props);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
 }
 
 @mixin trans-prop-nice-fade($t: 0.5s) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property(visibility, opacity, background-color, border-color);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property(visibility, opacity, background-color, border-color);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
+}
+
+@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
+    @include transition-property(height, width, top, right, bottom, left, opacity);
+    @include transition-duration($t);
+    @include transition-timing-function($tf);
 }
 
 @mixin trans-prop-nice-resize-h($t: 0.5s) {
-	@include transition-property(height, bottom, top);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(height, bottom, top);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin trans-prop-nice-resize-w($t: 0.5s) {
-	@include transition-property(width, left, right);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(width, left, right);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin triangle-right($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-top: $size/$ratio solid transparent;
-	border-left: $size solid $color;
-	border-bottom: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-top: $size/$ratio solid transparent;
+    border-left: $size solid $color;
+    border-bottom: $size/$ratio solid transparent;
 }
 
 @mixin triangle-down($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-left: $size/$ratio solid transparent;
-	border-top: $size solid $color;
-	border-right: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-left: $size/$ratio solid transparent;
+    border-top: $size solid $color;
+    border-right: $size/$ratio solid transparent;
 }
 
 @mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-	//$size: $size*2;
-	width: 0;
-	height: 0;
-	$slopedB: $size/$ratio solid transparent;
-	$straightB: $size solid $color;
-	@if $dir == "up" {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-bottom: $straightB;
-	} @else if $dir == "right" {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-left: $straightB;
-	} @else if $dir == "down"  {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-top: $straightB;
-	} @else {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-right: $straightB;
-	}
+    //$size: $size*2;
+    width: 0;
+    height: 0;
+    $slopedB: $size/$ratio solid transparent;
+    $straightB: $size solid $color;
+    @if $dir == "up" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-bottom: $straightB;
+    } @else if $dir == "right" {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-left: $straightB;
+    } @else if $dir == "down" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-top: $straightB;
+    } @else {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-right: $straightB;
+    }
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
-	@include background-image(linear-gradient(-45deg,
-		rgba($c, $a) 25%, transparent 25%,
-		transparent 50%, rgba($c, $a) 50%,
-		rgba($c, $a) 75%, transparent 75%,
-		transparent 100%
-	));
-	background-repeat: repeat;
-	background-size: $d $d;
+    @include background-image(linear-gradient(-45deg,
+        rgba($c, $a) 25%, transparent 25%,
+        transparent 50%, rgba($c, $a) 50%,
+        rgba($c, $a) 75%, transparent 75%,
+        transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
 }
 
 @mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
-	$deg: 90deg;
-	@if ($repeatDir != 'x') {
-		$deg: 0deg;
-		$repeatDir: repeat-y;
-	} @else {
-		$repeatDir: repeat-x;
-	}
+    $deg: 90deg;
+    @if ($repeatDir != 'x') {
+        $deg: 0deg;
+        $repeatDir: repeat-y;
+    } @else {
+        $repeatDir: repeat-x;
+    }
 
-	@include background-image(linear-gradient($deg,
-		$c 1px, transparent 1px,
-		transparent 100%
-	));
-	background-repeat: $repeatDir;
-}
-
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-	$ltnRatio: 7%;
-	$gradRatio: 5%;
-	$hovRatio: 7%;
-	$bgBase: lighten($bg, $ltnRatio);
-	$fgBase: lighten($fg, $ltnRatio);
-	$gradC1: lighten($bgBase, $gradRatio);
-	$gradC2: $bgBase;
-	$cInvokeBase: lighten($gradC1, $ltnRatio*2);
-
-	@include background-image(linear-gradient($gradC1, $gradC2));
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border: none;
-	border-top: 1px solid lighten($gradC1, 2%);
-	color: $fg;
-	display: inline-block;
-	@if $hover == true {
-		&:not(.disabled):hover {
-			@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
-			color: lighten($fgBase, $hovRatio);
-			&.btn-menu .invoke-menu {
-				color: lighten($cInvokeBase, $hovRatio);
-			}
-		}
-	}
-	&.btn-menu .invoke-menu {
-		color: $cInvokeBase;
-	}
+    @include background-image(linear-gradient($deg,
+        $c 1px, transparent 1px,
+        transparent 100%
+    ));
+    background-repeat: $repeatDir;
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    $b: 1px solid lighten($bg, 30%);
+    //$b: 1px solid lighten($bg, 30%);
     @include border-radius(2px);
     @include box-sizing(border-box);
     @include boxIncised(0.7);
     background-color: $bg;
-    border-bottom: $b;
-    border-right: $b;
+    //border-bottom: $b;
+    //border-right: $b;
 }
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-	&:before {
-		@include trans-prop-nice("border-color",0.75s);
-		content: '';
-		display: block;
-		height: auto;
-		pointer-events: none;
-		position: absolute;
-		z-index: 2;
+    &:before {
+        @include trans-prop-nice("border-color", 0.75s);
+        content: '';
+        display: block;
+        height: auto;
+        pointer-events: none;
+        position: absolute;
+        z-index: 2;
 
-		@if $direction == "horizontal" {
-			border-top: $w $style darken($b, 15%);
-			top: 2px;
-			left: 5px;
-			right: 5px;
+        @if $direction == "horizontal" {
+            border-top: $w $style darken($b, 15%);
+            top: 2px;
+            left: 5px;
+            right: 5px;
 
-		} @else if $direction == "vertical" {
-			border-left: $w $style darken($b, 15%);
-			left: 2px;
-			bottom: 5px;
-			top: 5px;
-		}
-	}
-	&:not(.disabled):hover:before {
-		@include trans-prop-nice("border-color",50ms);
-		border-color: $colorKey;
-	}
+        } @else if $direction == "vertical" {
+            border-left: $w $style darken($b, 15%);
+            left: 2px;
+            bottom: 5px;
+            top: 5px;
+        }
+    }
+    &:not(.disabled):hover:before {
+        @include trans-prop-nice("border-color", 25ms);
+        border-color: $colorGrippyInteriorHover;
+    }
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include containerSubtle($bg, $fg, true);
-}
-
-@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	// No longer should be used; use btnSubtle instead
-	//@include containerSubtle($bg, $fg, true);
-	//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
-/*	&:not(.disabled):hover {
-		@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
-	}*/
-}
-
-@mixin boxIncised($sVal: 0.6) {
-    @include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
+@mixin boxIncised($sVal: 0.6, $inset: 5px) {
+    @include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
 }
 
 @mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
     border: 1px solid $c;
 }
 
+@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
+	@if $sVal != 'none' {
+		@include box-shadow($sVal);
+	}
+}
+
 @mixin boxShdwSubtle($sVal: 0.2) {
-    @include box-shadow(rgba(black, $sVal) 0 1px 2px);
+	@if $sVal != 'none' {
+		@include box-shadow(rgba(black, $sVal) 0 1px 2px);
+	}
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
-	@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+	@if $sVal != 'none' {
+		@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+	}
 }
 
 @mixin outerGlow($color: #fff, $sVal: 0.3) {
-	@include box-shadow(rgba($color, $sVal) 0 0 30px);
+    @include box-shadow(rgba($color, $sVal) 0 0 30px);
 }
 
 @mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
-    @include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
 }
 
 @mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
-	@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
+}
+
+@mixin txtShdw($sVal) {
+	//@if $sVal != 'none' {
+		@include text-shadow($sVal);
+	//}
 }
 
 @mixin txtShdwSubtle($sVal: 0.1) {
-	@include text-shadow(rgba(black, $sVal) 0 1px 2px);
-}
-@mixin txtShdwLarge($sVal: 0.7) {
-	@include text-shadow(rgba(black, $sVal) 0 3px 7px);
+	@if $sVal != 'none' {
+	    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
+	}
+}
+
+@mixin txtShdwLarge($sVal: 0.7) {
+    @include text-shadow(rgba(black, $sVal) 0 3px 7px);
+}
+
+@function pullForward($c, $p: 20%) {
+    // For dark interfaces, lighter things come forward
+    @return lighten($c, $p);
+}
+
+@function pushBack($c, $p: 20%) {
+    // For dark interfaces, darker things move back
+    @return darken($c, $p);
+}
+
+@function percentToDecimal($p) {
+	@return $p / 100%;
+}
+
+@function decimalToPercent($d) {
+	@return percentage($d);
+}
+
+/*********************************************** CONTROLS, FORM ELEMENTS */
+
+@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	background-color: $bg;
+	@include border-radius($controlCr);
+	@include box-sizing(border-box);
+	color: $fg;
+	display: inline-block;
+}
+
+@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+	@include user-select(none);
+    @include transition(background, .25s);
+	.icon {
+		color: $ic;
+	}
+	@include desktop {
+		@if $bgHov != none {
+			&:not(.disabled):hover {
+				background: $bgHov;
+				>.icon {
+					color: lighten($ic, $ltGamma);
+				}
+			}
+		}
+	}
 }
 
-/*********************************************** FORM ELEMENTS */
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	@include appearance(none);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-	//	background: lighten($bg, 20%);
-	background: rgba(#fff, 0.1);
+	@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
+	background: $bg;
 	border: none;
-	//border-bottom: 1px solid rgba(#fff, 0.1);
-	color: lighten($fg, 20%);
+	color: $fg;
 	outline: none;
 	&.error {
 		background: rgba(red, 0.5);
@@ -281,50 +309,66 @@
 	padding: 0 $interiorMarginSm;
 }
 
+@mixin contextArrow() {
+	@include text-shadow(none);
+	content: '\76';
+	display: inline-block;
+	font-family: 'symbolsfont';
+	margin-left: $interiorMarginSm;
+	vertical-align: top;
+}
+
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: $interiorMargin;
+    @include input-base($bg, $fg);
+    padding: $interiorMargin;
 }
 
 @mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include nice-input($bg, $fg);
-	background: lighten($bg, 3%);
-	border-bottom: 1px solid lighten($bg, 10%);
+    @include nice-input($bg, $fg);
+    background: lighten($bg, 3%);
+    border-bottom: 1px solid lighten($bg, 10%);
 }
 
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-
 @mixin menuUlReset() {
     margin: 0;
     padding: 0;
     li {
         list-style-type: none;
-        margin:0;
+        margin: 0;
         padding: 0;
     }
 }
 
-@mixin vertical-align {
-	/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
-	position: relative;
-	top: 50%;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
+@mixin webkitProp($name, $val) {
+	#{$name}: #{$val};
+	-webkit-#{$name}: #{$val};
+}
+
+@mixin webkitVal($name, $val) {
+	#{$name}: #{$val};
+	#{$name}: -webkit-#{$val};
+}
+
+@mixin verticalCenter {
+    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
+    //position: relative;
+    top: 50%;
+	@include webkitProp(transform, translateY(-50%));
+    //-webkit-transform: translateY(-50%);
+    //-ms-transform: translateY(-50%);
+    //transform: translateY(-50%);
+}
+
+@mixin verticalCenterBlock($holderH, $itemH) {
+    top: floor(($holderH - $itemH) / 2);
+    bottom: auto;
+    height: $itemH;
 }
 
 @mixin ellipsize() {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 @mixin scrollH($showBar: auto) {
@@ -337,22 +381,13 @@
     overflow-y: $showBar;
 }
 
-@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
-	display: block;
-	position: absolute;
-	-webkit-animation: rotation .6s infinite linear;
-	-moz-animation: rotation .6s infinite linear;
-	-o-animation: rotation .6s infinite linear;
-	animation: rotation .6s infinite linear;
-	border-color: rgba($c, 0.25);
-	border-top-color: rgba($c, 1.0);
-	border-style: solid;
-	border-width: $b;
-	border-radius: 100%;
+@mixin test($c: #ffcc00, $a: 0.2) {
+    background-color: rgba($c, $a) !important;
 }
 
-@mixin test($c: #ffcc00, $a: 0.2) {
-	background-color: rgba($c, $a);
+@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    @include box-sizing(border-box);
+    border: 1px dotted rgba($c, $a);
 }
 
 @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
@@ -373,6 +408,6 @@
 }
 
 @mixin s-stale($a: 0.5) {
-	color: rgba($colorTelemFresh, $a) !important;
-	font-style: italic;
-}
+    color: rgba($colorTelemFresh, $a) !important;
+    font-style: italic;
+}

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

@@ -37,7 +37,7 @@
 	}
 
 	h1, h2, h3 {
-		color: #fff;
+		color: pullForward($colorBodyFg, 20%);
 		font-weight: normal !important;
 		margin-bottom: 1em;
 	}

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

@@ -10,9 +10,6 @@
 	&.fixed {
 		font-size: 0.8em;
 	}
-	&.scrolling {
-		overflow: auto;
-	}
 	.controls,
 	label,
 	.inline-block {

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

@@ -22,139 +22,115 @@
 $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;
 
-/******* LAYOUT AND SIZING */
-.btn,
-.l-btn {
-	@include user-select(none);
-	line-height: 1.5em; // Was 1.25em
-	padding: 0 $pad;
-	text-decoration: none;
-	&.lg,
-	&.create-btn {
-		$h: $ueTopBarH; // - $interiorMargin;
-		height: $h;
-		line-height: $h - 2;
-		//padding: 0 $pad * 6 0 $pad;
-		padding: 0 $pad * 3;
-	}
-	&.create-btn {
-		&:before {
-			content:"+";
-			font-family: symbolsfont;
-			font-size: 0.8em;
-		}
-		.menu {
-			margin-left: $pad * -1;
-		}
-		>.ui-symbol {
-			//font-size: 1.1em; // Normalizing for new icomoon symbols font
-		}
-	}
-	&.sm {
-		padding: 0 $pad / $baseRatio;
-	}
-	&.vsm {
-		padding: 0 ($pad / $baseRatio) / 2;
-	}
-}
-
-/*********************************** STYLE STYLES */
-.btn,
 .s-btn {
-	$base: lighten($colorBodyBg, 20%); // Moved to s-btn
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
-	cursor: pointer;
-	//line-height: 1.2em;
-	text-decoration: none;
-	&.major {
-		$bg: $colorKey;
-		@include btnSubtle($bg);
-		$fg: lighten($bg, 50%);
-		color: $fg;
-		&:hover {
-			@include btnSubtle(lighten($bg, 5%), $fg);
-			//color: $fg;
-		}
-		.invoke-menu {
-			color: $fg;
-		}
-	}
-	&.subtle {
-		@include btnSubtle($base, lighten($base, 40%));
-	}
-	&.very-subtle,
-	&.s-very-subtle {
-		@include containerSubtle($colorBodyBg, $colorBodyFg, true);
-		&.paused {
-			@include containerSubtle($colorPausedBg, $colorPausedFg, true);
-			.icon:before {
-				content:"\0000EF";
-			}
-		}
+    @include box-sizing(border-box);
+    @include user-select(none);
+    cursor: pointer;
+    text-decoration: none;
+    height: $btnStdH;
+    line-height: $btnStdH;
+    padding: 0 $pad;
+    font-size: 0.7rem;
+    vertical-align: top;
+
+    .icon {
+        font-size: 0.8rem;
+        color: $colorKey;
+    }
+
+    .title-label {
+        vertical-align: top;
+    }
+
+	&.lg {
+		font-size: 1rem;
 	}
+
+    &.sm {
+        padding: 0 $pad / $baseRatio;
+    }
+
+    &.vsm {
+        padding: 0 ($pad / $baseRatio) / 2;
+    }
+
+    &.major {
+        $bg: $colorBtnMajorBg;
+        $hc: lighten($bg, 10%);
+        @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
+    }
+
+    &:not(.major) {
+        // bg, bgHov, fg, ic
+        @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+    }
+    &.pause-play {
+
+    }
+    &.t-save:before {
+        content:'\e612';
+        font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
+    }
+    &.t-cancel {
+        .title-label { display: none; }
+        &:before {
+            content:'\78';
+            font-family: symbolsfont;
+        }
+    }
+
+    &.pause-play {
+        .icon:before {
+            content: "\0000F1";
+        }
+        &.paused {
+            @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
+            .icon {
+                @include pulse(1000ms);
+                :before {
+                    content: "\0000EF";
+                }
+            }
+        }
+    }
+
+    &.show-thumbs {
+        .icon:before {
+            content: "\000039";
+        }
+    }
 }
 
-.icon-btn,
-.s-icon-btn {
-	@extend .s-btn;
-	font-size: 1em;
-	.icon {
-		color: $colorKey;
-	}
-	&.paused {
-		.icon {
-			color: $colorPausedFg;
-		}
-	}
+.l-btn-set {
+    // Buttons that have a very tight conceptual grouping - no internal space between them.
+    // Structure: .btn-set > mct-representation class=first|last > .s-btn
+    //@include test(red);
+    font-size: 0; // Remove space between s-btn elements due to white space in markup
 
-	&:not(.disabled) {
-		&:not(.paused) {
-			&:hover {
-				.icon {
-					color: lighten($colorKey, $ltGamma);
-				}
-			}
-		}
-	}
+    .s-btn {
+        @include border-radius(0);
+        margin-left: 1px;
+    }
 
-	&.labeled {
-		padding: 0 $pad/2;
-		.icon {
-			//font-size: 1.5em;
-		}
-		.title-label {
-			margin-left: $interiorMargin;
-		}
-	}
+    .first {
+        .s-btn {
+            @include border-left-radius($controlCr);
+            margin-left: 0;
+        }
+    }
 
-	&.pause-play {
-/*		&.paused {
-			.icon {
-				@include pulse(500ms);
-			}
-		}*/
-		.icon:before {
-			content:"\0000F1";
-		}
-	}
-
-	&.show-thumbs {
-		.icon:before {
-			content:"\000039";
-		}
-	}
+    .last {
+        .s-btn {
+            @include border-right-radius($controlCr);
+        }
+    }
+}
+
+.paused {
+    &:not(.s-btn) {
+        border-color: $colorPausedBg !important;
+        color: $colorPausedBg !important;
+    }
 }
 
-/*********************************** LAYOUT STYLES */
-span.btn,
-span.btn span,
-span.l-btn,
-span.l-btn span,
-a.btn,
-a.btn span,
-a.l-btn,
-a.l-btn span {
-	display: inline-block;
-}

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

@@ -100,22 +100,6 @@
 	}
 }
 
-.btn-bar {
-	//	position: relative;
-	.btn,
-	.btn-set,
-	.t-btn {
-		display: inline-block;
-		//		margin-left: $interiorMargin;
-	}
-	.btn,
-	.t-btn {
-		&:first-child {
-			//			margin-left: 0;
-		}
-	}
-}
-
 .l-composite-control {
 	vertical-align: middle;
 	&.l-checkbox {
@@ -131,7 +115,7 @@
 	@include box-sizing(border-box);
 	border-left: 1px solid $colorInteriorBorder;
 	display: inline-block;
-	padding: 0 $interiorMargin;
+	padding: 0 0 0 $interiorMargin;
 	position: relative;
 	&:first-child {
 		border-left: none;
@@ -153,55 +137,16 @@
 	font-size: 0.7rem;
 }
 
-.btn-set {
-	// Buttons that have a very tight conceptual grouping - no internal space between them.
-	display: inline-block;
-	position: relative;
-	.btn,
-	.t-btn {
-		@include border-radius(0);
-		border-left: 1px solid lighten($colorBodyBg, 20%);
-		margin-left: 0;
-		&:first-child {
-			border-left: none;
-			@include border-left-radius($controlCr);
-		}
-		&:last-child {
-			@include border-right-radius($controlCr);
-		}
-	}
-}
-
-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.tool-bar .btn,
-.tool-bar .t-btn {
-	$h: $btnToolbarH;
-	display: inline-block;
-	font-size: $h * $btnFontSizeToH;
-	height: $h;
-	line-height: $h - 3;
-	.icon:not(.invoke-menu) {
-		//		position: relative;
-		//		top: -0.04em;
-		//font-size: 150%;
-		//vertical-align: middle;
-	}
-}
-
 label.checkbox.custom {
-	$bg: lighten($colorBodyBg, $ltGamma);
+	$bg: pullForward($colorBodyBg, 10%);
 	$d: $formRowCtrlsH;
-	//	@include vertical-align();
 	cursor: pointer;
 	display: inline-block;
 	line-height: $d;
 	margin-right: $interiorMargin * 4;
 	padding-left: $d + $interiorMargin;
 	position: relative;
-	vertical-align: top;
+	vertical-align: middle; // was top
 	em {
 		color: $colorBodyFg;
 		display: inline-block;
@@ -210,7 +155,8 @@ label.checkbox.custom {
 		&:before {
 			@include border-radius($basicCr * .75);
 			background: $bg;
-			border-bottom: 1px solid lighten($bg, 10%);
+			//border-bottom: 1px solid lighten($bg, 10%);
+			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
 			box-sizing: border-box;
 			content: " ";
 			font-family: 'symbolsfont';
@@ -259,7 +205,7 @@ label.checkbox.custom {
 	}
 }
 
-.btn-menu label.checkbox.custom {
+.s-menu-btn label.checkbox.custom {
 	margin-left: 5px;
 }
 
@@ -270,88 +216,9 @@ label.checkbox.custom {
 	}
 }
 
-.btn-menu {
-	$h: 20px;
-	$p: $interiorMarginSm * 2;
-	$c: $colorBodyFg;
-	@include btnSubtle($colorBodyBg);
-	/*	height: $h;
-		line-height: $h;
-		&.dropdown {
-			padding-left: $p;
-			padding-right: $p;
-		}*/
-
-	&:not(.disabled):hover {
-		color: lighten($c, 20%);
-	}
-
-	/*	&.context-available {
-			// An element like the invoke-menu triangle;
-			// Indicates that this element has a dropdown menu available;
-			// Currently unused
-			$c: $colorKey;
-			color: $c;
-			padding: 0 5px;
-			&:hover {
-				color: lighten($c, 10%);
-			}
-		}*/
-
-	span.l-click-area {
-		// In markup, this element should not enclose anything.
-		@extend .abs;
-	}
-
-	.type-icon {
-		//margin-right: $interiorMargin;
-	}
-
-	.name {
-		margin-left: $interiorMargin;
-	}
-	.menu {
-		//		margin-left: (-1 * $p);
-		position: absolute;
-		left: 0;
-		text-align: left;
-		.ui-symbol.icon {
-			width: 12px;
-		}
-	}
-}
-
-.top-bar .btn-menu {
-	$h: $btnStdH; //$ueTopBarBtnH; // 35px
-	$p: 10px;
-	$badgeM: $interiorMargin;
-	$badgeD: $h - ($badgeM * 2);
-	height: $h;
-	line-height: $h;
-	padding-right: 10px;
-	&.browse-btn {
-		margin-right: $interiorMargin;
-		padding-left: $badgeD + $badgeM * 2;
-		.badge {
-			@include border-radius($controlCr * 1.5);
-			display: block;
-			font-size: 1em;
-			line-height: $badgeD;
-			position: absolute;
-			top: $badgeM;
-			left: $badgeM;
-			bottom: $badgeM;
-			right: auto;
-			width: $badgeD;
-			height: auto;
-		}
-	}
-}
-
 .context-available {
 	$c: $colorKey;
 	color: $c;
-	//padding: 0 5px;
 	&:hover {
 		color: lighten($c, 10%);
 	}
@@ -363,20 +230,58 @@ label.checkbox.custom {
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
-	display: inline-block;
+	//@include test();
 	font-size: 1em;
-	.label {
-		.title-label {
-			color: lighten($colorBodyFg, 40%);
-		}
-		.type-icon {
-			font-size: 120%;
-			margin-right: $interiorMargin;
-			vertical-align: middle;
+
+	//> .title-label,
+	//> .type-icon,
+	//> .context-available {
+	//	//@include tmpBorder(#6666ff);
+	//	//vertical-align: middle;
+	//}
+
+	> .type-icon {
+		color: $colorObjHdrIc;
+		font-size: 120%;
+		float: left;
+		margin-right: $interiorMargin;
+	}
+
+	.l-elem-wrapper {
+		//@include test(#66f, 0.2);
+		@include webkitProp(justify-content, flex-start);
+		mct-representation {
+			// Holds the context-available item
+			// Must have min-width to make flex work properly
+			// in Safari
+			min-width: 0.7em;
 		}
+	}
+
+	.action {
+		margin-right: $interiorMargin;
+	}
+
+	.title-label {
+		//@include test(green, 0.9);
+		color: $colorObjHdrTxt;
+		@include ellipsize();
+		//color: pushBack($colorBodyFg, 40%);
+		@include webkitProp(flex, '0 1 auto');
+		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+		//position: relative;
+	}
+
+	.context-available {
+		font-size: 0.7em;
+		@include webkitProp(flex, '0 0 1');
+		//margin-right: $interiorMargin;
+	}
+
+	@include desktop {
 		.context-available {
+			@include trans-prop-nice(opacity, 0.25s);
 			opacity: 0;
-			font-size: 0.8em;
 		}
 		&:hover {
 			.context-available {
@@ -386,87 +291,190 @@ label.checkbox.custom {
 	}
 }
 
-.top-bar,
-.object-browse-bar {
-	.object-header {
-		font-size: 1.1em;
-		span {
-			display: inline-block;
-		}
-	}
-}
-
 /******************************************************** SLIDERS */
 
 .slider {
 	$knobH: 100%; //14px;
-	$knobW: 12px;
-	$slotH: 50%;
 	.slot {
 		//		@include border-radius($basicCr * .75);
-		@include sliderTrack();
-		height: $slotH;
+		//@include sliderTrack();
 		width: auto;
 		position: absolute;
-		top: ($knobH - $slotH) / 2;
+		top: 0;
 		right: 0;
-		bottom: auto;
+		bottom: 0;
 		left: 0;
 	}
 	.knob {
-		@include btnSubtle();
-		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
-		cursor: ew-resize;
+		//@include btnSubtle();
+		//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorKnob;
+		&:hover {
+			background-color: $sliderColorKnobHov;
+		}
 		position: absolute;
 		height: $knobH;
-		width: $knobW;
+		width: $sliderKnobW;
 		top: 0;
 		auto: 0;
 		bottom: auto;
 		left: auto;
-		&:before {
-			top: 1px;
-			bottom: 3px;
-			left: ($knobW / 2) - 1;
-		}
-
+	}
+	.knob-l {
+		@include border-left-radius($sliderKnobW);
+		cursor: w-resize;
+	}
+	.knob-r {
+		@include border-right-radius($sliderKnobW);
+		cursor: e-resize;
 	}
 	.range {
-		background: rgba($colorKey, 0.6);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorRange;
 		cursor: ew-resize;
 		position: absolute;
-		top: 0;
+		top: 0; //$tbOffset;
 		right: auto;
 		bottom: 0;
 		left: auto;
 		height: auto;
 		width: auto;
 		&:hover {
-			background: rgba($colorKey, 0.7);
+			background-color: $sliderColorRangeHov;
+		}
+	}
+}
+
+/******************************************************** DATETIME PICKER */
+.l-datetime-picker {
+	$r1H: 15px;
+	@include user-select(none);
+	font-size: 0.8rem;
+	padding: $interiorMarginLg !important;
+	width: 230px;
+	.l-month-year-pager {
+		$pagerW: 20px;
+		//@include test();
+		//font-size: 0.8rem;
+		height: $r1H;
+		margin-bottom: $interiorMargin;
+		position: relative;
+		.pager,
+		.val {
+			//@include test(red);
+			@extend .abs;
+		}
+		.pager {
+			width: $pagerW;
+			@extend .ui-symbol;
+			&.prev {
+				right: auto;
+				&:before {
+					content: "\3c";
+				}
+			}
+			&.next {
+				left: auto;
+				text-align: right;
+				&:before {
+					content: "\3e";
+				}
+			}
+		}
+		.val {
+			text-align: center;
+			left: $pagerW + $interiorMargin;
+			right: $pagerW + $interiorMargin;
+		}
+	}
+	.l-calendar,
+	.l-time-selects {
+		border-top: 1px solid $colorInteriorBorder
+	}
+	.l-time-selects {
+		line-height: $formInputH;
+	}
+}
+
+/******************************************************** CALENDAR */
+.l-calendar {
+	$colorMuted: pushBack($colorMenuFg, 30%);
+	ul.l-cal-row {
+		@include display-flex;
+		@include flex-flow(row nowrap);
+		margin-top: 1px;
+		&:first-child {
+			margin-top: 0;
+		}
+		li {
+			@include flex(1 0);
+			//@include test();
+			margin-left: 1px;
+			padding: $interiorMargin;
+			text-align: center;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+		&.l-header li {
+			color: $colorMuted;
+		}
+		&.l-body li {
+			@include trans-prop-nice(background-color, .25s);
+			cursor: pointer;
+			&.in-month {
+				background-color: $colorCalCellInMonthBg;
+			}
+			.sub {
+				color: $colorMuted;
+				font-size: 0.8em;
+			}
+			&.selected {
+				background: $colorCalCellSelectedBg;
+				color: $colorCalCellSelectedFg;
+				.sub {
+					color: inherit;
+				}
+			}
+			&:hover {
+				background-color: $colorCalCellHovBg;
+				color: $colorCalCellHovFg;
+				.sub {
+					color: inherit;
+				}
+			}
 		}
 	}
 }
 
 /******************************************************** BROWSER ELEMENTS */
 
-::-webkit-scrollbar {
-	@include sliderTrack();
-	height: $scrollbarTrackSize;
-	width: $scrollbarTrackSize;
-}
-
-::-webkit-scrollbar-thumb {
-	$bg: lighten($colorBodyBg, 10%);
-	@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
-	@include border-radius(1px);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border-top: 1px solid lighten($bg, 20%);
-	&:hover {
-		@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+@include desktop {
+	::-webkit-scrollbar {
+		@include border-radius(2px);
+		@include box-sizing(border-box);
+		@include box-shadow(inset $scrollbarTrackShdw);
+		background-color: $scrollbarTrackColorBg;
+		height: $scrollbarTrackSize;
+		width: $scrollbarTrackSize;
 	}
-}
 
-::-webkit-scrollbar-corner {
-	background: rgba(#000, 0.4);
+	::-webkit-scrollbar-thumb {
+		$bg: $scrollbarThumbColor;
+		$hc: $scrollbarThumbColorHov;
+		$gr: 5%;
+		@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
+		@include border-radius(2px);
+		@include box-sizing(border-box);
+		//@include boxShdwSubtle();
+		//border-top: 1px solid lighten($bg, 20%);
+		&:hover {
+			@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
+		}
+	}
+
+	::-webkit-scrollbar-corner {
+		background: $scrollbarTrackColorBg;
+	}
 }

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

@@ -19,202 +19,235 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************** MENUS */
-.menu-element {
-	$bg: lighten($colorBodyBg, 5%);
-	$bgHover: lighten($bg, 20%);
-	$iconColor: $colorKey;
-	cursor: pointer;
-	position: relative;
+/******************************************************** MENU BUTTONS */
+.s-menu-btn {
+	// Formerly .btn-menu
+	@extend .s-btn;
+	span.l-click-area {
+		// In markup, this element should not enclose anything.
+		@extend .abs;
+	}
+
+	.icon {
+		font-size: 120%;
+	}
+
+	.title-label {
+		margin-left: $interiorMarginSm;
+	}
+
+	&:after {
+		// Adds the downward facing 'context available / invoke menu' arrow element
+		@include contextArrow();
+		color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
+	}
+
+	&.create-btn {
+		.title-label {
+			font-size: 1rem;
+		}
+		//&:after {
+		//	color: rgba($colorInvokeMenu, 0.5);
+		//}
+	}
+
 	.menu {
-		@include border-radius($basicCr);
-		@include containerSubtle($bg);
-		@include txtShdwSubtle(0.2);
-		display: block; // set to block via jQuery
-		padding: $interiorMarginSm 0;
-		position: absolute;
-		z-index: 10;
-		ul {
-			@include menuUlReset();
-			li {
-				@include box-sizing(border-box);
-				border-top: 1px solid lighten($bg, 20%);
-				color: lighten($bg, 60%);
-				line-height: $menuLineH;
-				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-				position: relative;
-				white-space: nowrap;
-				&:first-child {
-					border: none;
-				}
-				&:hover {
-					background: $bgHover;
-					color: $colorKeyFg;
-					//a {
-					//	color: $colorKeyFg;
-					//}
-					.icon {
-						color: lighten($iconColor, 20%);
-					}
-				}
-				//a {
-				//	color: lighten($bg, 60%);
-				//	display: block;
-				//}
-				.type-icon {
-					left: $interiorMargin * 2;
-				}
-			}
+		left: 0;
+		text-align: left;
+		.ui-symbol.icon {
+			width: 12px;
 		}
 	}
-
-	.context-menu,
-	.super-menu {
-		$bg: $colorMenuBg;
-		$fg: $colorMenuFg;
-		$ic: $colorMenuIc;
-		//font-size: 0.80rem;
-		pointer-events: auto;
-		@include containerSubtle($bg);
-		ul li {
-			padding-left: 25px;
-			a {
-				color: $fg;
-			}
-			.icon {
-				color: $ic;
-			}
-			.type-icon {
-				left: $interiorMargin;
-			}
-			&:hover .icon {
-				color: lighten($ic, 5%);
-			}
-		}
-	}
-
-	.checkbox-menu {
-		// Used in search dropdown in tree
-		@extend .context-menu;
-		ul li {
-			padding-left: 50px;
-			.checkbox {
-				$d: 0.7rem;
-				position: absolute;
-				left: $interiorMargin;
-				top: ($menuLineH - $d) / 1.5;
-				em {
-					height: $d;
-					width: $d;
-					&:before {
-						font-size: 7px !important;// $d/2;
-						height: $d;
-						width: $d;
-						line-height: $d;
-					}
-				}
-			}
-			.type-icon {
-				left: 25px;
-			}
-		}
-	}
-
-	.super-menu {
-		$w: 500px;
-		$h: $w - 20;
-		$plw: 50%; //$w * 0.5;
-		$prw: 50%; //$w - $plw;
-		$fg: #fff; //lighten($colorBodyFg, 40%);
-		$bgHover: $colorKey; //$bg;
-		display: block;
-		width: $w;
-		height: $h;
-		.contents {
-			@include absPosDefault($interiorMargin);
-		}
-		.pane {
-			@include box-sizing(border-box);
-			&.left {
-				//@include test();
-				border-right: 1px solid rgba(white, 0.2);
-				left: 0;
-				padding-right: $interiorMargin;
-				right: auto;
-				width: $plw;
-				overflow-x: hidden;
-				overflow-y: auto;
-				ul {
-					li {
-						@include border-radius($controlCr);
-						padding-left: 30px;
-						border-top: none;
-					}
-				}
-			}
-			&.right {
-				//@include test(red);
-				left: auto;
-				right: 0;
-				padding: $interiorMargin * 5;
-				width: $prw;
-				.icon {
-					color: $fg;
-				}
-			}
-		}
-		.menu-item-description {
-			.desc-area {
-				&.icon {
-					$h: 150px;
-					position: relative;
-					font-size: 8em;
-					left: 0;
-					height: $h;
-					line-height: $h;
-					margin-bottom: $interiorMargin * 5;
-					text-align: center;
-				}
-				&.title {
-					color: $fg;
-					font-size: 1.2em;
-					margin-bottom: 0.5em;
-				}
-				&.description {
-					//color: lighten($bg, 30%);
-					color: $fg;
-					font-size: 0.8em;
-					line-height: 1.5em;
-				}
-			}
-		}
-	}
-	.context-menu {
-		font-size: 0.80rem;
-	}
 }
 
-.context-menu-holder {
-	pointer-events: none;
+/******************************************************** MENUS THEMSELVES */
+.menu-element {
+	cursor: pointer;
+	position: relative;
+}
+
+.s-menu {
+	@include border-radius($basicCr);
+	@include containerSubtle($colorMenuBg, $colorMenuFg);
+	@include boxShdw($shdwMenu);
+	@include txtShdw($shdwMenuText);
+	padding: $interiorMarginSm 0;
+}
+
+.menu {
+	@extend .s-menu;
+	display: block;
+	position: absolute;
+	z-index: 10;
+	ul {
+		@include menuUlReset();
+		li {
+			@include box-sizing(border-box);
+			border-top: 1px solid lighten($colorMenuBg, 20%);
+			color: pullForward($colorMenuBg, 60%);
+			line-height: $menuLineH;
+			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+			position: relative;
+			white-space: nowrap;
+			&:first-child {
+				border: none;
+			}
+			&:hover {
+				background: $colorMenuHovBg;
+				color: $colorMenuHovFg;
+				.icon {
+					color: $colorMenuHovIc;
+				}
+			}
+			.type-icon {
+				left: $interiorMargin * 2;
+			}
+		}
+	}
+}
+
+.menu,
+.context-menu,
+.super-menu {
+	pointer-events: auto;
+	ul li {
+		//padding-left: 25px;
+		a {
+			color: $colorMenuFg;
+		}
+		.icon {
+			color: $colorMenuIc;
+		}
+		.type-icon {
+			left: $interiorMargin;
+		}
+		&:hover .icon {
+			//color: lighten($colorMenuIc, 5%);
+		}
+	}
+}
+
+.checkbox-menu {
+	// Used in search dropdown in tree
+	@extend .context-menu;
+	ul li {
+		padding-left: 50px;
+		.checkbox {
+			$d: 0.7rem;
+			position: absolute;
+			left: $interiorMargin;
+			top: ($menuLineH - $d) / 1.5;
+			em {
+				height: $d;
+				width: $d;
+				&:before {
+					font-size: 7px !important;// $d/2;
+					height: $d;
+					width: $d;
+					line-height: $d;
+				}
+			}
+		}
+		.type-icon {
+			left: 25px;
+		}
+	}
+}
+
+.super-menu {
+	$w: 500px;
+	$h: $w - 20;
+	$plw: 50%;
+	$prw: 50%;
+	display: block;
+	width: $w;
+	height: $h;
+	.contents {
+		@include absPosDefault($interiorMargin);
+	}
+	.pane {
+		@include box-sizing(border-box);
+		&.left {
+			//@include test();
+			border-right: 1px solid pullForward($colorMenuBg, 10%);
+			left: 0;
+			padding-right: $interiorMargin;
+			right: auto;
+			width: $plw;
+			overflow-x: hidden;
+			overflow-y: auto;
+			ul {
+				li {
+					@include border-radius($controlCr);
+					padding-left: 30px;
+					border-top: none;
+				}
+			}
+		}
+		&.right {
+			//@include test(red);
+			left: auto;
+			right: 0;
+			padding: $interiorMargin * 5;
+			width: $prw;
+		}
+	}
+	.menu-item-description {
+		.desc-area {
+			&.icon {
+				$h: 150px;
+				color: $colorCreateMenuLgIcon;
+				position: relative;
+				font-size: 8em;
+				left: 0;
+				height: $h;
+				line-height: $h;
+				margin-bottom: $interiorMargin * 5;
+				text-align: center;
+			}
+			&.title {
+				color: $colorCreateMenuText;
+				font-size: 1.2em;
+				margin-bottom: 0.5em;
+			}
+			&.description {
+				//color: lighten($colorMenuBg, 30%);
+				color: $colorCreateMenuText;
+				font-size: 0.8em;
+				line-height: 1.5em;
+			}
+		}
+	}
+}
+.context-menu {
+	font-size: 0.80rem;
+}
+
+.context-menu-holder,
+.menu-holder {
 	position: absolute;
-	height: 200px;
-	width: 170px;
 	z-index: 70;
 	.context-menu-wrapper {
 		position: absolute;
 		height: 100%;
 		width: 100%;
-		.context-menu {
-		}
 	}
-	&.go-left .context-menu {
+	&.go-left .context-menu,
+	&.go-left .menu {
 		right: 0;
 	}
-	&.go-up .context-menu {
+	&.go-up .context-menu,
+	&.go-up .menu {
 		bottom: 0;
 	}
 }
 
+.context-menu-holder {
+	pointer-events: none;
+	height: 200px;
+	width: 170px;
+}
+
 .btn-bar.right .menu,
 .menus-to-left .menu {
 	left: auto;

platform/commonUI/general/res/sass/controls/_time-controller.scss

@@ -1,72 +1,155 @@
-.l-time-controller {
-	$inputTxtW: 90px;
-	$knobW: 9px;
-	$r1H: 20px;
-	$r2H: 30px;
-	$r3H: 10px;
+@mixin toiLineHovEffects() {
+	//@include pulse(.25s);
+	&:before,
+	&:after {
+		background-color: $timeControllerToiLineColorHov;
+	}
+}
 
-	position: relative;
-	margin: $interiorMarginLg 0;
-	min-width: 400px;
+.l-time-controller-visible {
+
+}
+
+mct-include.l-time-controller {
+	$minW: 500px;
+	$knobHOffset: 0px;
+	$knobM: ($sliderKnobW + $knobHOffset) * -1;
+	$rangeValPad: $interiorMargin;
+	$rangeValOffset: $sliderKnobW;
+	//$knobCr: $sliderKnobW;
+	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
+	$r1H: nth($ueTimeControlH,1);
+	$r2H: nth($ueTimeControlH,2);
+	$r3H: nth($ueTimeControlH,3);
+
+    @include absPosDefault();
+    //@include test();
+    display: block;
+    top: auto;
+	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
+    min-width: $minW;
+    font-size: 0.8rem;
 
 	.l-time-range-inputs-holder,
 	.l-time-range-slider {
-		font-size: 0.8em;
+		//font-size: 0.8em;
 	}
 
 	.l-time-range-inputs-holder,
 	.l-time-range-slider-holder,
 	.l-time-range-ticks-holder
 	{
-		margin-bottom: $interiorMargin;
-		position: relative;
+		//@include test();
+		@include absPosDefault(0, visible);
+		@include box-sizing(border-box);
+		top: auto;
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
 		//@include test(red, 0.1);
 		@include absPosDefault(0, visible);
+		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
 	}
 
 	.l-time-range-inputs-holder {
-		height: $r1H;
-	}
-
-	.l-time-range-slider,
-	.l-time-range-ticks {
-		left: $inputTxtW; right: $inputTxtW;
-
+		//@include test(red);
+		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
+		padding-top: $interiorMargin;
+		border-top: 1px solid $colorInteriorBorder;
+		.type-icon {
+			font-size: 120%;
+			vertical-align: middle;
+		}
+		.l-time-range-input,
+		.l-time-range-inputs-elem {
+			margin-right: $interiorMargin;
+			.lbl {
+				color: $colorPlotLabelFg;
+			}
+			.ui-symbol.icon {
+				font-size: 11px;
+				width: 11px;
+			}
+		}
 	}
 
 	.l-time-range-slider-holder {
-		height: $r2H;
+		//@include test(green);
+		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
 		.range-holder {
 			@include box-shadow(none);
 			background: none;
 			border: none;
-			height: 75%;
+			.range {
+				.toi-line {
+					$myC: $timeControllerToiLineColor;
+					$myW: 8px;
+					@include transform(translateX(50%));
+					position: absolute;
+					//@include test();
+					top: 0; right: 0; bottom: 0px; left: auto;
+					width: $myW;
+					height: auto;
+					z-index: 2;
+					&:before,
+					&:after {
+						background-color: $myC;
+						content: "";
+						position: absolute;
+					}
+					&:before {
+						// Vert line
+						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
+						width: 2px;
+						//top: 0; right: 3px; bottom: 0; left: 3px;
+					}
+					&:after {
+						// Circle element
+						@include border-radius($myW);
+						@include transform(translateY(-50%));
+						top: 50%; right: 0; bottom: auto; left: 0;
+						width: auto;
+						height: $myW;
+					}
+				}
+				&:hover .toi-line {
+					@include toiLineHovEffects;
+				}
+			}
+		}
+		&:not(:active) {
+			//@include test(#ff00cc);
+			.knob,
+			.range {
+				@include transition-property(left, right);
+				@include transition-duration(500ms);
+				@include transition-timing-function(ease-in-out);
+			}
 		}
 	}
 
 	.l-time-range-ticks-holder {
 		height: $r3H;
 		.l-time-range-ticks {
-			border-top: 1px solid $colorInteriorBorder;
+			border-top: 1px solid $colorTick;
 			.tick {
-				background-color: $colorInteriorBorder;
+				background-color: $colorTick;
 				border:none;
+				height: 5px;
 				width: 1px;
 				margin-left: -1px;
+				position: absolute;
 				&:first-child {
 					margin-left: 0;
 				}
 				.l-time-range-tick-label {
-					color: lighten($colorInteriorBorder, 20%);
-					font-size: 0.7em;
+					@include webkitProp(transform, translateX(-50%));
+					color: $colorPlotLabelFg;
+					display: inline-block;
+					font-size: 0.9em;
 					position: absolute;
-					margin-left: -0.5 * $tickLblW;
-					text-align: center;
-					top: $r3H;
-					width: $tickLblW;
+					top: 8px;
+					white-space: nowrap;
 					z-index: 2;
 				}
 			}
@@ -74,31 +157,47 @@
 	}
 
 	.knob {
-		width: $knobW;
+		z-index: 2;
 		.range-value {
-			$w: 75px;
-			//@include test();
+			//@include test($sliderColorRange);
+			@include trans-prop-nice-fade(.25s);
+			padding: 0 $rangeValOffset;
 			position: absolute;
-			top: 50%;
-			margin-top: -7px; // Label is 13px high
+			height: $r2H;
+			line-height: $r2H;
 			white-space: nowrap;
-			width: $w;
 		}
 		&:hover .range-value {
-			color: $colorKey;
+			color: $sliderColorKnobHov;
 		}
 		&.knob-l {
-			margin-left: $knobW / -2;
+			//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
+			margin-left: $knobM;
 			.range-value {
 				text-align: right;
-				right: $knobW + $interiorMargin;
+				right: $rangeValOffset;
 			}
 		}
 		&.knob-r {
-			margin-right: $knobW / -2;
+			//@include border-bottom-right-radius($knobCr);
+			margin-right: $knobM;
 			.range-value {
-				left: $knobW + $interiorMargin;
+				left: $rangeValOffset;
+			}
+			&:hover + .range-holder .range .toi-line {
+				@include toiLineHovEffects;
 			}
 		}
 	}
+}
+
+//.slot.range-holder {
+//	background-color: $sliderColorRangeHolder;
+//}
+
+.s-time-range-val {
+	//@include test();
+	@include border-radius($controlCr);
+	background-color: $colorInputBg;
+	padding: 1px 1px 0 $interiorMargin;
 }

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -1,8 +1,6 @@
 .l-image-main-wrapper,
 .l-image-main,
 .l-image-main-controlbar,
-.l-image-main-controlbar .left,
-.l-image-main-controlbar .right,
 .l-image-thumbs-wrapper {
 	@include absPosDefault(0, false);
 }
@@ -16,7 +14,7 @@
 	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
-		background-color: rgba(#fff, 0.1);
+		background-color: $colorPlotBg;
 		bottom: $imageMainControlBarH + $interiorMargin;
 	}
 	.l-image-main-controlbar {
@@ -61,17 +59,14 @@
 	.left {
 		//@include test(red);
 		text-align: left;
-		width: 75% !important;
 	}
 	.right {
 		//@include test(green);
-		min-width: 40px;
-		width: 25% !important;
 		z-index: 2;
 	}
 	.l-date,
 	.l-time {
-		color: #fff;
+		color: pullForward($colorBodyFg, 20%);
 	}
 	.l-mag {
 		direction: ltr;
@@ -82,7 +77,7 @@
 		}
 	}
 	.s-mag {
-		color: darken($colorBodyFg, 20%);
+		color: pushBack($colorBodyFg, 20%);
 	}
 	.l-btn.show-thumbs {
 		display: none;

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

@@ -1,37 +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.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
-@import "compass/utilities";
-
-@import "constants";
-@import "mixins";
-@import "forms/mixins";
-@import "forms/elems";
-@import "forms/textarea";
-@import "forms/text-input";
-@import "forms/selects";
-@import "forms/channel-selector";
-@import "forms/datetime";
-//@import "forms/filter";

platform/commonUI/general/res/sass/forms/_channel-selector.scss

@@ -36,11 +36,11 @@
 	.btns-add-remove {
 //		background: rgba(#ff0000, 0.3);;
 		margin-top: 150px;
-		.btn {
+		.s-btn {
 			display: block;
-			font-size: 1.5em;
+			//font-size: 1.5em;
 			margin-bottom: $interiorMargin;
-			padding: 10px;
+			//padding: 10px;
 			text-align: center;
 		}
 	}

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

@@ -19,39 +19,44 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@mixin complexFieldHolder($myW) {
+	width: $myW + $interiorMargin;
+	input[type="text"] {
+		width: $myW;
+	}
+}
+
 .complex.datetime {
 	span {
 		display: inline-block;
 		margin-right: $interiorMargin;
 	}
-	
+
+/*
 	.field-hints,
 	.fields {
 	}
+
 	
 	.field-hints {
-		
+
 	}
-	
+	*/
+
 	.fields {
 		margin-top: $interiorMarginSm 0;
 		padding: $interiorMarginSm 0;
 	}
 	
 	.date {
-		$myW: 80px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
-		
+		@include complexFieldHolder(80px);
+	}
+
+	.time.md {
+		@include complexFieldHolder(60px);
 	}
 	
 	.time.sm {
-		$myW: 40px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
+		@include complexFieldHolder(40px);
 	}
 }

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

@@ -20,54 +20,57 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
-	@include border-radius(3px);
-	background: rgba(white, 0.1);
+	@include border-radius($basicCr);
+	background: $colorFormSectionHeader;
+	$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);
+	color: $colorFormText;
 	.form-section {
 		position: relative;
+		margin-bottom: $interiorMarginLg * 2;
 	}
 
 	.form-row {
+		$m: $interiorMargin;
 		@include box-sizing(border-box);
 		@include clearfix;
-		border-top: 1px solid $colorInteriorBorder;
-		margin-top: $interiorMargin;
-		padding: $interiorMargin;
+		border-top: 1px solid $colorFormLines;
+		margin-top: $m;
+		padding: $formTBPad 0;
 		position: relative;
 		&.first {
 			border-top: none;
 		}
 
-		.label,
-		.controls {
-//			@include test(orange);
+		>.label,
+		>.controls {
 			@include box-sizing(border-box);
 			@include clearfix;
-			box-sizing: border-box;
-			font-size: 0.75rem;
+			font-size: 0.8rem;
 			line-height: $formInputH;
             min-height: $formInputH;
 		}
 
 		>.label {
 			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+			//@include test(orange, 0.05);
 			float: left;
+			min-width: 120px;
             position: relative;
 			white-space: nowrap;
 			width: $formLabelW;
 		}
 
 		.value {
-			color: lighten($colorBodyFg, 20%);
+			color: $colorInputFg; //lighten($colorBodyFg, 20%);
 		}
 
 		.controls {
@@ -109,18 +112,18 @@
 
 		.selector-list {
 			// Used in create overlay to display tree view
+			@include nice-input($colorInputBg, $colorInputFg);
 			$h: 150px;
-			@include border-radius($basicCr);
-			@include box-sizing(border-box);
-			background: rgba(black, 0.2);
-			padding: $interiorMargin;
+			//@include border-radius($basicCr);
+			//@include box-sizing(border-box);
+			//background: rgba(black, 0.2);
+			//padding: $interiorMargin;
 			position: relative;
 			height: $h;
-			overflow: auto;
 //			max-width: 50%;
-			.wrapper {
+			>.wrapper {
 				$p: $interiorMargin;
-				overflow-y: auto;
+				overflow: auto;
 				position: absolute;
 				top: $p;
 				right: $p;
@@ -157,4 +160,24 @@ label.form-control.checkbox {
 		color: lighten($colorFormInvalid, 30%);
 		padding: $interiorMargin;
 	}
+}
+
+input[type="text"] {
+	@include nice-input($colorInputBg, $colorInputFg);
+	&.filter {
+		&.ng-dirty {
+			//            background: red;
+		}
+	}
+	&.numeric {
+		text-align: right;
+	}
+}
+
+textarea {
+	@include nice-textarea($colorInputBg, $colorInputFg);
+	//	font-size: 0.9em;
+	position: absolute;
+	height: 100%;
+	width: 100%;
 }

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

@@ -19,32 +19,32 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.form-control.select {
-	@include btnSubtle($colorBodyBg);
-	cursor: pointer;
-	display: inline-block;
-	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
+.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);
 		@include box-sizing(border-box);
 		background: none;
-		color: $colorBodyFg;
-		border: none !important;
+		color: $colorSelectFg;
 		cursor: pointer;
-		padding: 4px 25px 2px 5px;
+		border: none !important;
+		padding: 4px 25px 2px 0px;
         width: 120%;
         option {
             margin: $interiorMargin 0; // Firefox
         }
 	}
 	&:after {
-		color: $colorKey;
-		content:"v";
-		display: block;
-		font-family: 'symbolsfont';
+		@include contextArrow();
 		pointer-events: none;
+		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}

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

@@ -1,28 +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.
- *****************************************************************************/
-.edit-main textarea {
-	@include nice-textarea();
-//	font-size: 0.9em;
-	position: absolute;
-	height: 100%;
-	width: 100%;
-}

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

@@ -21,22 +21,11 @@
  *****************************************************************************/
 .validates {
     > .label {
-        //        @include test(green, 0.1);
-        padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
+        padding-right: $reqSymbolM; // Keep room for validation element
         &::after {
-            //            @include test(yellow, 0.3);
-            display: block;
-            position: absolute;
-            top: 0;
-            right: $reqSymbolM;
-            bottom: 0;
-            left: auto;
-            height: auto;
-            width: $reqSymbolW;
+	        float: right;
             font-family: symbolsfont;
             font-size: $reqSymbolFontSize;
-            text-align: right;
-            vertical-align: middle;
         }
     }
     &.invalid,

platform/commonUI/general/res/sass/helpers/_bubbles.scss

@@ -75,15 +75,32 @@
 		margin-left: $bubbleArwSize*2;
 		.l-infobubble::before {
 			right: 100%;
-			@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
+            // Removes the triangle located on the info
+            // bubble for phones only, for tablets and
+            // desktops, triangle remains.
+            @include desktopandtablet {
+                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            }
 		}
 	}
 
 	&.arw-right {
-		margin-right: $bubbleArwSize*2;
+        // NOTE: [MOBILE] REMOVES RIGHT MARGIN
+        // Removes right margin made for the 
+        // triangle on mobile
+        @include desktopandtablet {
+		  margin-right: $bubbleArwSize*2;
+        }
 		.l-infobubble::before {
 			left: 100%;
-			@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
+            // Removes the triangle located on the info
+            // bubble for phones only, for tablets and
+            // desktops, triangle remains.
+            @include desktopandtablet {
+                @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            }
 		}
 	}
 
@@ -122,12 +139,12 @@
 //************************************************* LOOK AND FEEL
 
 .l-thumbsbubble-wrapper {
-	.arw-up {
-		@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
-	.arw-down {
-		@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
+    .arw-up {
+        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
+    .arw-down {
+        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
 }
 
 .s-infobubble {

platform/commonUI/general/res/sass/helpers/_splitter.scss

@@ -20,18 +20,20 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .split-layout {
-	$b: lighten($colorBodyBg, 5%);
-	$splitterD: 5px;
-	// TEMP VAlS - this will need to be redone when we implement a draggable splitter
-	$splitL: 85%;
-	$splitT: 70%;
+	$b: pullForward($colorBodyBg, $contrastRatioPercent);
 
 	.splitter {
 		background-color: $b;
-		@include box-shadow(rgba(black, 0.4) 0 0 3px);
+		@include border-radius($splitterEndCr);
+		@include boxShdw($splitterShdw);
 		overflow: hidden;
 		position: absolute;
 		z-index: 1;
+		//@if $colorSplitterHover != 'none' {
+			&:hover {
+				background-color: $colorSplitterHover;
+			}
+		//}
 	}
 	&.horizontal {
 		// Slides vertically up and down, splitting the element horizontally
@@ -41,21 +43,17 @@
 			right: 0;
 			&.top {
 				bottom: auto;
-//				height: $splitT;
 			}
 			&.bottom {
 				top: auto;
-//				height: 100% - $splitT;
 			}
 		}
 		>.splitter {
-			@include controlGrippy($b, horizontal);
+			@include controlGrippy($colorSplitterInterior, horizontal);
 			cursor: row-resize;
 			left: 0; right: 0;
 			width: auto;
-			height: $splitterD;
-//			margin-top: ($splitterD + 2) * -1;  // Controlled by splitter
-//			top: $splitT;  // Controlled by splitter
+			height: $splitterW;
 		}
 	}
 	&.vertical {
@@ -65,20 +63,16 @@
 			bottom: 0;
 			&.left {
 				right: auto;
-//				width: $splitL - 1%; // Controlled by splitter
 			}
 			&.right {
 				left: auto;
-//				width: 100% - $splitL; // Controlled by splitter
 			}
 		}
 		>.splitter {
-			@include controlGrippy($b, vertical);
+			@include controlGrippy($colorBodyBg, vertical);
 			bottom: 0;
 			cursor: col-resize;
-			width: $splitterD;
-//			margin-left: ($splitterD + 2) * -1;  // Controlled by splitter
-//			left: $splitL;  // Controlled by splitter
+			width: $splitterW;
 		}
 	}
 }

platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

@@ -19,24 +19,45 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@-webkit-keyframes rotation {
-	from {-webkit-transform: rotate(0deg);}
-	to {-webkit-transform: rotate(359deg);}
+@include keyframes(rotation) {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(359deg); }
 }
 
-@-moz-keyframes rotation {
-	from {-moz-transform: rotate(0deg);}
-	to {-moz-transform: rotate(359deg);}
+@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
+    @include keyframes(rotateCentered) {
+         0%   { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
+         100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
+     }
+    @include animation-name(rotateCentered);
+    @include animation-duration(0.5s);
+    @include animation-iteration-count(infinite);
+    @include animation-timing-function(linear);
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: 5px;
+    @include border-radius(100%);
+    @include box-sizing(border-box);
+    display: block;
+    position: absolute;
+    height: 0; width: 0;
+    padding: 7%;
+    left: 50%; top: 50%;
 }
 
-@-o-keyframes rotation {
-	from {-o-transform: rotate(0deg);}
-	to {-o-transform: rotate(359deg);}
-}
-
-@keyframes rotation {
-	from {transform: rotate(0deg);}
-	to {transform: rotate(359deg);}
+@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
+	display: block;
+	position: absolute;
+	-webkit-animation: rotation .6s infinite linear;
+	-moz-animation: rotation .6s infinite linear;
+	-o-animation: rotation .6s infinite linear;
+	animation: rotation .6s infinite linear;
+	border-color: rgba($c, 0.25);
+	border-top-color: rgba($c, 1.0);
+	border-style: solid;
+	border-width: $b;
+	@include border-radius(100%);
 }
 
 .t-wait-spinner,
@@ -96,4 +117,28 @@
 	margin-top: 0 !important;
 	padding: 0 !important;
 	top: 0; left: 0;
+}
+
+.loading {
+	// Can be applied to any block element with height and width
+    pointer-events: none;
+    &:before,
+    &:after {
+        content: '';
+    }
+	&:before {
+        @include wait-spinner2(5px, $colorLoadingFg);
+        z-index: 10;
+	}
+    &:after {
+        @include absPosDefault();
+        background: $colorLoadingBg;
+        display: block;
+        z-index: 9;
+    }
+    &.tree-item:before {
+        padding: $menuLineH / 4;
+        border-width: 2px;
+    }
+
 }

platform/commonUI/general/res/sass/items/_item.scss

@@ -29,11 +29,10 @@
         &.grid-item {
             //div { @include test() }
             $d: $ueBrowseGridItemLg;
-            //$iconD: 100px;
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            @include btnSubtle($colorItemBase);
+            @include btnSubtle($colorItemBg, $colorItemBgHov, $colorItemFg, $colorItemIc);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
@@ -44,24 +43,27 @@
             position: relative;
             &:hover .item-main {
 	            .item-type {
-		            color: $colorKey !important;
+		            color: lighten($colorKey, 10%);
                     .l-icon-link {
                         color: $colorIconLink;
                     }
                 }
 	            .item-open {
-		            //display: block;
                     opacity: 1;
 	            }
             }
 	        .contents {
-		        top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin;
+                //@include test(red);
+                $m: $interiorMarginLg;
+		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
             .bar {
-                &.top-bar.abs {
+                &.top-bar {
                     bottom: auto;
+	                color: $colorItemSubIcons;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
+                    text-align: right;
 	                z-index: 5;
 	                .left, .right {
 		                width: auto;
@@ -73,69 +75,64 @@
 		                }
 	                }
                 }
-                &.bottom-bar.abs {
+                &.bottom-bar {
                     top: auto;
-                    height: $ueBrowseGridItemBottomBarH;
-	                padding: $interiorMargin;
+                    line-height: 110%;
                 }
             }
             .item-main {
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
-                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;
+                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
                 line-height: $lh;
 	            z-index: 1;
                 .item-type {
                     //@include trans-prop-nice("color", $transTime);
                     @include absPosDefault($iconMargin, false);
                     //@include test(red);
-                    color: $colorItemFg;
+                    //color: $colorItemIc;
                     text-align: center;
                     font-size: $iconD * 0.95; //6em;
                     line-height: $iconD;
                     bottom: auto;
                     height: $iconD;
                     top: $iconMargin - 10;
-                    //line-height: $lh;
                     .l-icon-link {
-                        // When the link icon is in the item-type icon holder
-                        color: darken($colorIconLink, 25%);
-                        height: 36px;
-                        line-height: 36px;
+                        color: $colorIconLink;
+                        height: auto;
+                        line-height: 100%;
                         position: absolute;
-                        font-size: 32px;
+                        font-size: 0.3em;
                         left: 0px;
                         bottom: 10px;
                         z-index: 2;
                     }
                 }
                 .item-open {
-                    //@include test();
                     @include trans-prop-nice("opacity", $transTime);
                     opacity: 0;
-	                //display: none;
+	                color: $colorItemOpenIcon;
                     font-size: 3em;
-                    //line-height: $lh;
                     left: auto; width: 50px;
                     pointer-events: none;
                     text-align: right;
                 }
             }
             .title {
-	            @include txtShdwSubtle();
-                color: lighten($colorBodyFg, 20%);
-	            overflow: hidden;
-	            white-space: nowrap;
-	            text-overflow: ellipsis;
-//                font-weight: bold;
+	            @include txtShdw($shdwItemText);
+                @include ellipsize();
+                color: $colorItemFg;
             }
             .details {
+                @include txtShdw($shdwItemText);
+                @include ellipsize();
+	            color: $colorItemFgDetails;
                 font-size: 0.8em;
             }
 	        &.selected {
-		        $cfg: lighten($colorItemSelected, 35%);
+		        $cfg: lighten($colorItemBgSelected, 35%);
 		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($colorItemSelected);
+		        @include btnSubtle($colorItemBgSelected);
 		        color: $cfg;
 		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
 		        .item-main .item-open { color: $cfg }

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -29,30 +29,27 @@ table {
 	@include box-sizing(border-box);
 	border-spacing: 0;
 	border-collapse: collapse;
-	color: #fff;
 	display: table;
 	font-size: 0.75rem;
 	position: relative;
-	//height: 100%; MOVED
 	width: 100%;
 	thead, .thead,
 	tbody tr, .tbody .tr {
-		//display: table; MOVED
 		width: 100%;
-		//table-layout: fixed; MOVED
 	}
 	thead, .thead {
-		border-bottom: 1px solid $tabularColorHeaderBorder;
+		border-bottom: 1px solid $colorTabHeaderBorder;
 	}
+
+	&:not(.fixed-header) tr th {
+		background-color: $colorTabHeaderBg;
+	}
+
 	tbody, .tbody {
-		//@include absPosDefault(0); MOVED
-		//top: $tabularHeaderH; MOVED
-		//display: block; MOVED
-		//overflow-y: scroll; MOVED
 		display: table-row-group;
 		tr, .tr {
 			&:hover {
-				background: rgba(white, 0.1);
+				background: rgba($colorTabBodyFg, 0.1);
 			}
 		}
 	}
@@ -64,17 +61,16 @@ table {
 		&.group-header {
 			td, .td {
 				$d: 5%;
-				background-color: darken($tabularColorHeaderBg, $d);
-				color: darken($tabularColorHeaderFg, $d);
+				background-color: pushBack($colorTabHeaderBg, $d);
+				color: pushBack($colorTabHeaderFg, $d);
 			}
 		}
 		th, .th, td, .td {
 			display: table-cell;
 		}
 		th, .th {
-			background-color: $tabularColorHeaderBg;
-			border-left: 1px solid $tabularColorHeaderBorder;
-			color: $tabularColorHeaderFg;
+			border-left: 1px solid $colorTabHeaderBorder;
+			color: $colorTabHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
 			white-space: nowrap;
 			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
@@ -99,7 +95,7 @@ table {
 			}
 		}
 		td, .td {
-			border-bottom: 1px solid $tabularColorBorder;
+			border-bottom: 1px solid $colorTabBorder;
 			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;
@@ -151,7 +147,7 @@ table {
 				position: absolute;
 				width: 100%;
 				height: $tabularHeaderH;
-				background: rgba(#fff, 0.15);
+				background-color: $colorTabHeaderBg;
 			}
 		}
 		tbody, .tbody {

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

@@ -0,0 +1,83 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+$mobileListIconSize: 30px;
+$mobileTitleDescH: 35px;
+$mobileOverlayMargin: 10px;
+$phoneItemH: floor($ueBrowseGridItemLg/4);
+$tabletItemH: floor($ueBrowseGridItemLg/3);
+
+/************************** MOBILE TREE MENU DIMENSIONS */
+$mobileTreeItemH: 35px;
+$mobileTreeItemIndent: 20px;
+$mobileTreeRightArrowW: 30px;
+
+/************************** WINDOW DIMENSIONS FOR RWD */
+$phoMaxW: 514px;
+$phoMaxH: 740px;
+
+$tabMinW: 515px;
+$tabMaxW: 799px;
+
+$tabMinH: 741px;
+$tabMaxH: 1024px;
+
+$compMinW: 800px;
+$compMinH: 1025px;
+
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+$screenPortrait: "screen and (orientation: portrait)";
+$screenLandscape: "screen and (orientation: landscape)";
+
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
+
+$phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
+$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
+
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
+
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
+$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+$tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
+
+$desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$desktopLandscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
+
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+$phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
+$phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
+$phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
+
+$tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
+$tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
+$tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
+
+$desktopPortrait: "screen and #{$desktopPortraitCheck}";
+$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
+
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+$proporMenuOnly: 90%;
+$proporMenuWithView: 40%;

platform/commonUI/general/res/sass/mobile/_item.scss

@@ -0,0 +1,119 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// Sets the size of the items in the folder
+// representation. Instead of a grid,
+// a list is used.
+
+.items-holder {
+    .item {
+        &.grid-item {
+            $titleH: 30px;
+            @include phoneandtablet {
+                width: 100%;
+                >.contents {
+                    top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
+                }
+                .bar {
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        //@include test(blue);
+                        bottom: 0 !important; left: auto !important; right: 20px !important;
+                        width: 40px !important; height: auto !important;
+                        text-align: right;
+                    }
+                    &.bottom-bar {
+                        // Becomes the left side of the item
+                        left: $mobileListIconSize + $interiorMarginLg;
+                        right: 60px;
+                    }
+                    
+                }
+                .item-main {
+                    .item-type {
+                        //@include test(blue);
+                        font-size: $mobileListIconSize;
+                        right: auto;
+                        bottom: auto;
+                        left: 0;
+                        line-height: 100%;
+                        text-align: left;
+                        width: $mobileListIconSize;
+                        .l-icon-link {
+                            bottom: 0;
+                        }
+                    }
+                    .item-open {
+                        display: block;
+                        opacity: 1;
+                        font-size: 1em;
+                        width: auto;
+                    }
+                }
+            }
+
+            @include phone {
+                $dHei: $phoneItemH;
+                height: $dHei;
+                .bar {
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        line-height: $dHei !important;
+                    }
+                    &.bottom-bar {
+                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
+                    }
+                }
+                .item-main {
+                    .item-type {
+                        @include verticalCenterBlock($dHei, $mobileListIconSize);
+                    }
+                    .item-open {
+                        line-height: $dHei;
+                    }
+                }
+            }
+            
+            @include tablet {
+                $dHei: $tabletItemH;
+                height: $dHei;
+                .bar {
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        line-height: $dHei !important;
+                    }
+                    &.bottom-bar {
+                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
+                    }
+                }
+                .item-main {
+                    .item-type {
+                        @include verticalCenterBlock($dHei, $mobileListIconSize);
+                    }
+                    .item-open {
+                        line-height: $dHei;
+                    }
+                }
+            }
+        }
+    }
+}

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -0,0 +1,174 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+@include phoneandtablet {
+    // Wrapper of the entire 2 panes, only enacted on
+    // phone and tablet. Also for the panes
+    .browse-wrapper,
+    .pane {
+        top: 0 !important; right: 0; bottom: 0; left: 0;
+    }
+
+    .pane.left.treeview {
+        background-color: $colorMobilePaneLeft;
+    }
+
+    .pane.right-repr {
+        //@include test();
+        @include slMenuTransitions;
+        margin-left: 0 !important;
+        #content-area {
+            @include slMenuTransitions;
+            opacity: 1;
+        }
+    }
+
+    .user-environ .browse-area,
+    .user-environ .edit-area,
+    .user-environ .editor {
+        top: 0; left: 0; right: 0; bottom: $ueFooterH;
+    }
+
+    .holder.l-mobile {
+        top: $bodyMargin !important;
+        right: $bodyMargin !important;
+        bottom: $bodyMargin !important;
+        left: $bodyMargin !important;
+    }
+
+    // When the tree is hidden, these are the
+    // classes used for the left menu and the
+    // right representation.
+    .browse-hidetree {
+        @include user-select(none);
+        // Sets the left tree menu when the tree
+        // is hidden.
+        .pane.left.treeview {
+            opacity: 0;
+            right: 100% !important;
+            width: auto !important;
+            overflow-y: hidden;
+            overflow-x: hidden;
+        }
+        // Sets the right represenation when
+        // the tree is hidden.
+        .pane.right-repr {
+            left: 0 !important;
+        }
+    }
+    
+    .browse-showtree {
+        // NOTE: DISABLED SELECTION
+        // Selection disabled in both panes
+        // causing cut/copy/paste menu to
+        // not appear. Should me moved in
+        // future to properly work
+        @include user-select(none);
+
+        // Sets the left tree menu when the tree is shown.
+        .pane.left.treeview {
+            @include trans-prop-nice(opacity, .4s);
+            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
+            opacity: 1;
+            display: block !important;
+            //width: auto !important; // CH CO
+            right: auto !important;
+            width: $proporMenuWithView !important;
+        }
+        // Sets the right representation when the tree is shown.
+        .pane.right-repr {
+            left: $proporMenuWithView !important;
+            //width: auto !important;
+
+            //left: 0 !important;
+            //transform: translateX($proporMenuWithView);
+        }
+    }
+
+    .mobile-menu-icon {
+        font-size: 110%;
+        position: absolute;
+        top: $bodyMargin + 2;
+        left: $bodyMargin;
+    }
+
+    .object-browse-bar {
+        //@include test();
+        left: 30px !important;
+        .context-available {
+            opacity: 1 !important;
+        }
+        .view-switcher {
+            margin-right: 0 !important;
+            .title-label {
+                // Hide the name in mobile
+                display: none;
+            }
+        }
+    }
+
+    .tree-holder {
+        overflow-x: hidden !important;
+    }
+
+    .mobile-disable-select {
+        @include user-select(none);
+    }
+
+    // Hides objects on phone and tablet
+    .mobile-hide,
+    .mobile-hide-important {
+        display: none !important;
+    }
+
+    .mobile-back-hide {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+    .mobile-back-unhide {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
+}
+
+@include phonePortrait {
+    .browse-showtree {
+        .pane.left.treeview {
+            width: $proporMenuOnly !important;
+        }
+        .pane.right-repr {
+            left: 0 !important;
+	        @include webkitProp(transform, translateX($proporMenuOnly));
+            #content-area {
+                opacity: 0;
+            }
+        }
+    }
+}
+
+@include desktop {
+    .desktop-hide {
+        display: none;
+    }
+}

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

@@ -0,0 +1,107 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// Phones in any orientation
+@mixin phone {
+    @media #{$phonePortrait},
+           #{$phoneLandscape},
+           #{$phoneLandscapeEmu} {
+        @content
+    }
+}
+
+//Phones in portrait orientation
+@mixin phonePortrait {
+    @media #{$phonePortrait} {
+        @content
+    }
+}
+
+// Phones in landscape orientation
+@mixin phoneLandscape {
+    @media #{$phoneLandscape},
+           #{$phoneLandscapeEmu} {
+        @content
+    }
+}
+
+// Tablets in any orientation
+@mixin tablet {
+    @media #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+// Tablets in portrait orientation
+@mixin tabletPortrait {
+    @media #{$tabletPortrait} {
+        @content
+    }
+}
+
+// Tablets in landscape orientation
+@mixin tabletLandscape {
+    @media #{$tabletLandscape},
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+// Phones and tablets in any orientation
+@mixin phoneandtablet {
+    @media #{$phonePortrait},
+           #{$phoneLandscape},
+           #{$phoneLandscapeEmu},
+           #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+// Desktop monitors in any orientation
+@mixin desktopandtablet {
+    @media #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu},
+           #{$desktopPortrait},
+           #{$desktopLandscape} {
+        @content
+    }
+}
+
+// Desktop monitors in any orientation
+@mixin desktop {
+    @media #{$desktopPortrait},
+           #{$desktopLandscape} {
+        @content
+    }
+}
+
+// Transition used for the slide menu
+@mixin slMenuTransitions {
+    @include transition-duration(.35s);
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+}

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

@@ -19,20 +19,39 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@font-face {
-	/*
-	* Use https://www.web-font-generator.com/ to gen fonts
-	*/
-	font-family: 'symbolsfont';
-	src: url('../fonts/symbols/wtdsymbols.eot');
-	src: url('../fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
-	url('../fonts/symbols/wtdsymbols.woff') format('woff'),
-	url('../fonts/symbols/wtdsymbols.ttf') format('truetype'),
-	url('../fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
 
-.ui-symbol {
-	font-family: 'symbolsfont';
-}
+@include phoneandtablet {
+    ul.tree {
+        // Sets the margin on the left, which causes the
+        // running indentation after each folder is made
+        ul.tree {
+            margin-left: $mobileTreeItemIndent;
+        }
+    }
+	.tree-item,
+	.search-result-item {
+		height: $mobileTreeItemH;
+		line-height: $mobileTreeItemH;
+		margin-bottom: 0px;
+		.view-control {
+			//@include test(red);
+			position: absolute;
+			font-size: 1.1em;
+			right: 0px;
+			width: $mobileTreeRightArrowW;
+			text-align: center;
+		}
+
+		.label {
+			left: 0;
+			right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
+			line-height: $mobileTreeItemH;
+			//font-size: 1.1em; // CH CO
+			.type-icon {
+				@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
+			}
+			.title-label {
+			}
+		}
+	}
+}

platform/commonUI/general/res/sass/mobile/controls/_menus.scss

@@ -19,14 +19,25 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-input[type="text"] {
-	@include nice-input();
-    &.filter {
-        &.ng-dirty {
-//            background: red;
+
+// Override the Create menu for mobile
+@include phoneandtablet {
+    .menu-element {
+        .super-menu {
+            $d: 250px;
+            width: $d;
+            height: $d;
+
+            .pane {
+                &.left {
+                    border-right: none;
+                    padding-right: 0;
+                    width: 100%;
+                }
+                &.right {
+                    display: none;
+                }
+            }
         }
     }
-	&.numeric {
-		text-align: right;
-	}
-}
+}

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

@@ -0,0 +1,56 @@
+@include phoneandtablet {
+    .overlay {
+        $m: 0;
+        .clk-icon.close {
+            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
+        }
+
+        > .holder {
+            @include border-radius($m);
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
+            > .contents {
+                top: $mobileOverlayMargin;
+                right: $mobileOverlayMargin;
+                bottom: $mobileOverlayMargin;
+                left: $mobileOverlayMargin;
+
+                .top-bar {
+                    > .title {
+                        margin-right: 1.2em;
+                    }
+                }
+
+                .form.editor {
+                    border: none;
+
+                    .contents {
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        left: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include phone {
+    .overlay > .holder > .contents .form.editor .contents .form-row {
+        > .label,
+        > .controls {
+            //@include test(blue);
+            display: block;
+            float: none;
+            width: 100%;
+        }
+	    > .label {
+		    &:after {
+			    float: none;
+		    }
+	    }
+    }
+}

platform/commonUI/general/res/sass/mobile/search/_search.scss

@@ -0,0 +1,13 @@
+@include phone {
+	.search {
+		.search-bar {
+			// Hide menu-icon and adjust spacing when in phone mode
+			.menu-icon {
+				display: none;
+			}
+			.clear-icon {
+				right: $interiorMargin;
+			}
+		}
+	}
+}

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

@@ -24,32 +24,27 @@
 		background: $colorOvrBlocker;
 		z-index: 100;
 	}
-    .btn.close {
-	    @include border-radius($basicCr * 2);
-	    padding: 3px 6px;
+    .clk-icon.close {
+        font-size: 0.8rem;
         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%;
-		@include containerSubtle();
+		@include containerSubtle($colorOvrBg, $colorOvrFg);
 		@include border-radius($basicCr * 3);
 		color: $colorOvrFg;
 		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;
     }
     
@@ -69,8 +64,22 @@
         //font-size: 1em;
         height: $ovrFooterH;
         text-align: right;
-        .btn {
-            margin-left: 10px;
+        .s-btn {
+	        $bg: $colorOvrBtnBg;
+	        &:not(.major) {
+	            @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
+	        }
+	        font-size: 95%;
+	        height: $ovrFooterH;
+	        line-height: $ovrFooterH;
+            margin-left: $interiorMargin;
+	        padding: 0 $interiorMargin * 3;
+	        //&.major {
+		     //   @extend .s-btn.major;
+		     //   &:hover {
+			 //       @extend .s-btn.major:hover;
+		     //   }
+	        //}
         }
     }
     .contents.l-dialog {
@@ -80,5 +89,10 @@
 	    bottom: $myM;
 	    left: $myM;
         overflow: auto;
+	    .field.l-med {
+		    input[type='text'] {
+			    width: 100%;
+		    }
+	    }
     }
 }