[Build] Remove SNAPSHOT status

Remove SNAPSHOT status to tag end of sprint,
WTD-827.

.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.

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/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;
-    }
-);

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,7 +16,20 @@
             {
                 "key": "BrowseController",
                 "implementation": "BrowseController.js",
-                "depends": [ "$scope", "$route", "$location", "objectService", "navigationService", "urlService" ]
+                "depends": [
+                    "$scope",
+                    "$route",
+                    "$location",
+                    "objectService",
+                    "navigationService",
+                    "urlService"
+                ]
+            },
+            {
+                "key": "BrowseTreeController",
+                "implementation": "BrowseTreeController.js",
+                "priority": "preferred",
+                "depends": [ "$scope", "agentService" ]
             },
             {
                 "key": "BrowseObjectController",
@@ -25,17 +38,17 @@
             },
             {
                 "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,12 +58,6 @@
                 "templateUrl": "templates/create/locator.html"
             }
         ],
-        "templates": [
-            {
-                "key": "topbar-browse",
-                "templateUrl": "templates/topbar-browse.html"
-            }
-        ],
         "representations": [
             {
                 "key": "browse-object",
@@ -82,17 +89,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 +117,7 @@
                 "depends": [ "urlService", "$window" ],
                 "group": "windowing",
                 "glyph": "y",
-			  	"priority": "preferred"
+                "priority": "preferred"
             },
             {
                 "key": "fullscreen",
@@ -118,7 +125,7 @@
                 "category": "view-control",
                 "group": "windowing",
                 "glyph": "z",
-			  	"priority": "default"
+                "priority": "default"
             }
         ],
         "views": [
@@ -141,6 +148,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

@@ -20,22 +20,25 @@
  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 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>
 

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

@@ -19,38 +19,49 @@
  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-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 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

@@ -55,7 +55,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,7 +65,7 @@ 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

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/res/templates/edit-action-buttons.html

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

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

@@ -81,7 +81,7 @@ define(
                 var persistence = domainObject.getCapability('persistence');
                 return persistence && persistence.persist();
             }
-            
+
             /*
              * Checks current object and ascendants of current
              * object with object being removed, if the current
@@ -90,11 +90,11 @@ define(
              */
             function checkObjectNavigation(object, parentObject) {
                 // Traverse object starts at current location
-                var traverseObject = (navigationService).getNavigation();
-                
+                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()) {
@@ -103,7 +103,8 @@ define(
                     }
                     // Traverses to parent of current object, moving
                     // up the ascendant path
-                    traverseObject = traverseObject.getCapability('context').getParent();
+                    context = traverseObject.getCapability('context');
+                    traverseObject = context && context.getParent();
                 }
             }
 
@@ -115,11 +116,11 @@ define(
             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 () {

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/general/bundle.json

@@ -6,7 +6,7 @@
         "services": [
             {
                 "key": "urlService",
-                "implementation": "/services/UrlService.js",
+                "implementation": "services/UrlService.js",
                 "depends": [ "$location" ]
             }
         ],
@@ -20,18 +20,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": [
@@ -135,7 +123,7 @@
             {
                 "key": "mctSplitPane",
                 "implementation": "directives/MCTSplitPane.js",
-                "depends": [ "$parse", "$log" ]
+                "depends": [ "$parse", "$log", "$interval" ]
             },
             {
                 "key": "mctSplitter",

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,498 +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 {
-        display: none;
-        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 299, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 302, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 305, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
-          color: #33ccff; }
-    /* line 313, ../sass/search/_search.scss */
-    .search .search-scroll .load-icon {
-      position: relative; }
-      /* line 315, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon.loading {
-        pointer-events: none;
-        margin-left: 6px; }
-        /* line 319, ../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 329, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .wait-spinner {
-          margin-left: 6px; }
-      /* line 334, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon:not(.loading) {
-        cursor: pointer; }
-    /* line 339, ../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,19 +1,32 @@
 {
 	"metadata": {
-		"name": "WTD Symbols v2.2",
-		"lastOpened": 1439948744240,
-		"created": 1439948734037
+		"name": "WTD Symbols v24",
+		"lastOpened": 1441992412958,
+		"created": 1441992410384
 	},
 	"iconSets": [
 		{
 			"selection": [
+				{
+					"order": 86,
+					"id": 85,
+					"prevSize": 32,
+					"code": 58888,
+					"codes": [
+						58888,
+						58889,
+						58890
+					],
+					"name": "icon-info-v15",
+					"tempChar": ""
+				},
 				{
 					"order": 82,
 					"id": 84,
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 77,
@@ -21,7 +34,7 @@
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 78,
@@ -29,7 +42,7 @@
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 79,
@@ -37,7 +50,7 @@
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 80,
@@ -45,15 +58,15 @@
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 81,
+					"order": 83,
 					"id": 78,
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 1,
@@ -61,7 +74,7 @@
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 3,
@@ -69,7 +82,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 4,
@@ -77,7 +90,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 5,
@@ -85,7 +98,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 6,
@@ -93,7 +106,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 7,
@@ -101,7 +114,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 8,
@@ -109,7 +122,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 9,
@@ -117,7 +130,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -125,7 +138,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -133,7 +146,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -141,7 +154,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 13,
@@ -149,7 +162,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -157,7 +170,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -165,7 +178,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -173,7 +186,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -181,7 +194,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -189,7 +202,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -197,7 +210,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -205,7 +218,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -213,7 +226,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -221,7 +234,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -229,7 +242,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -237,7 +250,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -245,7 +258,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -253,7 +266,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -261,15 +274,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 +290,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -285,7 +298,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -293,7 +306,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -301,7 +314,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -309,7 +322,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -317,7 +330,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -325,7 +338,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -333,7 +346,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -341,7 +354,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -349,7 +362,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -357,7 +370,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -365,7 +378,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -373,7 +386,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -381,7 +394,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -389,7 +402,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -397,7 +410,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -405,7 +418,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -413,7 +426,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -421,7 +434,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -429,7 +442,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -437,7 +450,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -445,7 +458,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -453,7 +466,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -461,7 +474,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -469,7 +482,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -477,7 +490,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -485,7 +498,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -493,7 +506,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -501,7 +514,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -509,7 +522,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -517,7 +530,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -525,7 +538,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -533,7 +546,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -541,7 +554,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -549,7 +562,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -557,7 +570,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -565,7 +578,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -573,7 +586,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -581,7 +594,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -589,7 +602,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -597,7 +610,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -605,7 +618,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -613,7 +626,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -621,7 +634,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -629,7 +642,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -637,7 +650,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -652,6 +665,27 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
+				{
+					"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": [
@@ -840,17 +874,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,
@@ -861,9 +897,6 @@
 					"colorPermutations": {
 						"16161751": [
 							1,
-							1
-						],
-						"125525525516161751": [
 							1,
 							1
 						]
@@ -1290,16 +1323,23 @@
 				{
 					"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
+						]
+					}
 				},
 				{
 					"id": 48,
@@ -2046,6 +2086,12 @@
 						161,
 						75,
 						1
+					],
+					[
+						255,
+						255,
+						255,
+						1
 					]
 				]
 			],
@@ -14807,5 +14853,6 @@
 		"gridSize": 16,
 		"showLiga": false
 	},
-	"uid": -1
+	"uid": -1,
+	"time": 1441993324496
 }

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" />
@@ -82,8 +82,9 @@
 <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="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <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;
@@ -103,7 +47,8 @@ $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 // Overlay
 $ovrTopBarH: 60px;
-$ovrFooterH: 40px;
+$ovrFooterH: 30px;
+$overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
@@ -111,17 +56,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 +87,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; }
 }
 

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/_fonts.scss

@@ -1,38 +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.
- *****************************************************************************/
-@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';
-}

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

@@ -19,6 +19,26 @@
  * 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;
 	cursor: pointer;
@@ -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;
 }
 
@@ -116,10 +129,6 @@ mct-container {
 	margin: 0;
 }
 
-.colorKey {
-	color: $colorKey;
-}
-
 .ds {
 	@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
 }
@@ -129,13 +138,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,8 @@
 }
 
 .ui-symbol {
-	$c: $colorKey;
 	&.icon {
-		color: $c;
-		@include txtShdwSubtle();
+		color: $colorKey;
 		&.alert {
 			color: $colorAlert;
 			&:hover {
@@ -45,7 +43,7 @@
 	}
 }
 
-.bar .icon {
+.bar .ui-symbol {
 	display: inline-block;
 }
 
@@ -54,7 +52,7 @@
 	display: inline-block;
 }
 
-.btn-menu .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
@@ -65,9 +63,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,279 @@
  * 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-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 +303,65 @@
 	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%;
+    -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) {
@@ -338,21 +375,26 @@
 }
 
 @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%;
+    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);
+    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 +415,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/controls/_buttons.scss

@@ -22,139 +22,102 @@
 $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;
+
+    .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 {
+
+    }
+
+    &.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 {
@@ -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 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,16 +291,6 @@ label.checkbox.custom {
 	}
 }
 
-.top-bar,
-.object-browse-bar {
-	.object-header {
-		font-size: 1.1em;
-		span {
-			display: inline-block;
-		}
-	}
-}
-
 /******************************************************** SLIDERS */
 
 .slider {
@@ -449,24 +344,31 @@ label.checkbox.custom {
 
 /******************************************************** 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,17 +19,59 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************** MENUS */
+/******************************************************** MENU BUTTONS */
+.s-menu {
+	// 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 {
+		left: 0;
+		text-align: left;
+		.ui-symbol.icon {
+			width: 12px;
+		}
+	}
+}
+
+/******************************************************** MENUS THEMSELVES */
 .menu-element {
-	$bg: lighten($colorBodyBg, 5%);
-	$bgHover: lighten($bg, 20%);
-	$iconColor: $colorKey;
+	$bg: $colorMenuBg;
+	$fg: $colorMenuFg;
+	$ic: $colorMenuIc;
 	cursor: pointer;
 	position: relative;
 	.menu {
 		@include border-radius($basicCr);
-		@include containerSubtle($bg);
-		@include txtShdwSubtle(0.2);
+		@include containerSubtle($bg, $fg);
+		@include boxShdw($shdwMenu);
+		@include txtShdw($shdwMenuText);
 		display: block; // set to block via jQuery
 		padding: $interiorMarginSm 0;
 		position: absolute;
@@ -39,7 +81,7 @@
 			li {
 				@include box-sizing(border-box);
 				border-top: 1px solid lighten($bg, 20%);
-				color: lighten($bg, 60%);
+				color: pullForward($bg, 60%);
 				line-height: $menuLineH;
 				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
 				position: relative;
@@ -48,19 +90,12 @@
 					border: none;
 				}
 				&:hover {
-					background: $bgHover;
-					color: $colorKeyFg;
-					//a {
-					//	color: $colorKeyFg;
-					//}
+					background: $colorMenuHovBg;
+					color: $colorMenuHovFg;
 					.icon {
-						color: lighten($iconColor, 20%);
+						color: $colorMenuHovIc;
 					}
 				}
-				//a {
-				//	color: lighten($bg, 60%);
-				//	display: block;
-				//}
 				.type-icon {
 					left: $interiorMargin * 2;
 				}
@@ -68,16 +103,12 @@
 		}
 	}
 
+	.menu,
 	.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;
+			//padding-left: 25px;
 			a {
 				color: $fg;
 			}
@@ -88,7 +119,7 @@
 				left: $interiorMargin;
 			}
 			&:hover .icon {
-				color: lighten($ic, 5%);
+				//color: lighten($ic, 5%);
 			}
 		}
 	}
@@ -123,10 +154,8 @@
 	.super-menu {
 		$w: 500px;
 		$h: $w - 20;
-		$plw: 50%; //$w * 0.5;
-		$prw: 50%; //$w - $plw;
-		$fg: #fff; //lighten($colorBodyFg, 40%);
-		$bgHover: $colorKey; //$bg;
+		$plw: 50%;
+		$prw: 50%;
 		display: block;
 		width: $w;
 		height: $h;
@@ -137,7 +166,7 @@
 			@include box-sizing(border-box);
 			&.left {
 				//@include test();
-				border-right: 1px solid rgba(white, 0.2);
+				border-right: 1px solid pullForward($colorMenuBg, 10%);
 				left: 0;
 				padding-right: $interiorMargin;
 				right: auto;
@@ -158,15 +187,13 @@
 				right: 0;
 				padding: $interiorMargin * 5;
 				width: $prw;
-				.icon {
-					color: $fg;
-				}
 			}
 		}
 		.menu-item-description {
 			.desc-area {
 				&.icon {
 					$h: 150px;
+					color: $colorCreateMenuLgIcon;
 					position: relative;
 					font-size: 8em;
 					left: 0;
@@ -176,13 +203,13 @@
 					text-align: center;
 				}
 				&.title {
-					color: $fg;
+					color: $colorCreateMenuText;
 					font-size: 1.2em;
 					margin-bottom: 0.5em;
 				}
 				&.description {
 					//color: lighten($bg, 30%);
-					color: $fg;
+					color: $colorCreateMenuText;
 					font-size: 0.8em;
 					line-height: 1.5em;
 				}

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/_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;
+.select {
+	@include btnSubtle($colorSelectBg);
 	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
+	padding: 0 $interiorMargin;
     overflow: hidden;
 	position: relative;
 	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';
-		pointer-events: none;
+		@include contextArrow();
+		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+		//content:"v";
+		//display: block;
+		//font-family: 'symbolsfont';
+		//pointer-events: none;
 		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/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,22 @@ 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;
 	}
 	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 +56,17 @@ 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;
+			background-color: $colorTabHeaderBg;
+			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 +91,7 @@ table {
 			}
 		}
 		td, .td {
-			border-bottom: 1px solid $tabularColorBorder;
+			border-bottom: 1px solid $colorTabBorder;
 			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;

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

@@ -20,12 +20,38 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Overrides some styling in user-environ/_layout.scss
-.pane {
-    &.treeview.left {
-	    .tree-holder {
-            // Want tree holder to start right below the search bar.
-		    top: 60px;
-	    }
+@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,12 +19,25 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.object-browse-bar {
-    height: $ueTopBarH;
-    line-height: $ueTopBarH;
-    .items-select {
-        .btn-menu {
-            margin-right: $interiorMargin * 3;
+
+// 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;
+                }
+            }
         }
     }
-}
+}

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%;
+		    }
+	    }
     }
 }

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -23,13 +23,13 @@ $yBarW: 60px;
 $yLabelW: auto;
 $xBarH: 32px;
 $legendH: 20px;
-$colorHash: rgba(white, 0.3);
-$styleHash: dashed;
+//$colorHash: rgba(white, 0.3); // MOVED INTO CONSTANTS
+//$styleHash: dashed; // MOVED INTO CONSTANTS
 $swatchD: 8px;
 $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
 
 .gl-plot {
-	color: $colorBodyFg;
+	color: $colorPlotFg;
 	font-size: 0.7rem;
 	position: relative;
 	width: 100%;
@@ -74,13 +74,16 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	}
 
 	.gl-plot-display-area {
+		@if $colorPlotBg != none {
+			background-color: $colorPlotBg;
+		}
 		position: absolute;
 		top: nth($plotDisplayArea, 1);
 		right: nth($plotDisplayArea, 2);
 		bottom: nth($plotDisplayArea, 3);
 		left: nth($plotDisplayArea, 4);
 		cursor: crosshair;
-		border: 1px solid $colorInteriorBorder;
+		border: 1px solid $colorPlotAreaBorder;
 	}
 
 	.gl-plot-label,
@@ -130,7 +133,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 	.gl-plot-hash {
 		position: absolute;
-		border: 0 $colorHash $styleHash;
+		border: 0 $colorPlotHash $stylePlotHash;
 		&.hash-v {
 			border-right-width: 1px;
 			height: 100%;
@@ -170,8 +173,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 		height: auto;
 		z-index: 0;
-		&.s-limit-yellow { @include limitBg($colorLimitYellow); }
-		&.s-limit-red { @include limitBg($colorLimitRed); }
+		&.s-limit-yellow { @include limitBg($colorLimitYellowBg); }
+		&.s-limit-red { @include limitBg($colorLimitRedBg); }
 	}
 
 	.l-oob-data {
@@ -213,7 +216,11 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 			width: $swatchD;
 			//margin-right: $interiorMarginSm;
 		}
-		.title-label {}
+		&[class*='s-limit'] {
+			.title-label {
+				//color: #fff;
+			}
+		}
 	}
 }
 
@@ -221,7 +228,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.plot-legend-item {
 		//@include test();
 		@include border-radius($smallCr);
-		color: #fff;
+		//color: #fff;
 		line-height: 1.5em;
 		padding: 0px $itemPadLR;
 		.plot-color-swatch {
@@ -234,7 +241,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 .tick {
 	position: absolute;
-	border: 0 $colorHash solid;
+	border: 0 $colorPlotHash solid;
 	&.tick-x {
 		border-right-width: 1px;
 		height: 100%; // Assumption is that the tick will be in a holder that will set it's height;

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

@@ -28,7 +28,7 @@
 		height: auto;
 		bottom: 0;
 	}
-	//top: 23px;
+	top: 23px;
 
 	// Align with the top of the divider bar, below create button
 	//margin-top: 10px; // CH comment out
@@ -39,26 +39,20 @@
 	$iconWidth: 20px;
 	$leftMargin: 6px;
 	$rightPadding: 5px;
-
-	//padding-right: $rightPadding;
-	//@include test();
-	display: flex; //block;
-	flex-direction: column;
+	@include webkitVal(display, flex);
+	//display: flex;
+	@include webkitProp(flex-direction, column);
+	//flex-direction: column;
 	height: 100%;
 
 	.search-bar {
-		//$heightAdjust: 4px;
 		$textInputHeight: 19px; // This is equal to the default value, 19px
 		$iconEdgeM: 4px;
 		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 		font-size: 0.8em;
-
-		//order: 1;
-
+		max-width: 250px;
 		position: relative;
 		width: 100%;
-		//height: $textInputHeight;
-		//margin-top: $heightAdjust;
 		.search-input,
 		.search-icon {
 		}
@@ -75,7 +69,7 @@
 		.menu-icon {
 			//@include test(#008800);
 			@include box-sizing(border-box);
-			color: $colorItemFg;
+			color: $colorInputIcon;
 			height: $iconD; width: $iconD;
 			line-height: $iconD;
 			position: absolute;
@@ -86,7 +80,7 @@
 		.clear-icon,
 		.menu-icon {
 			cursor: pointer;
-			transition: color .25s;
+			@include transition(color, .25s);
 		}
 
 
@@ -103,7 +97,7 @@
 		}
 
 		.search-icon {
-			color: $colorItemFg;
+			//color: $colorItemFg;
 			left: $interiorMarginSm;
 			transition: visibility .15s, opacity .15s, color .2s;
 			pointer-events: none;
@@ -123,7 +117,7 @@
 
 		// Make icon lighten when hovering over search bar
 		.search-input:hover + div.search-icon {
-			color: lighten($colorItemFg, 20%);
+			color: pullForward($colorInputIcon, 10%);
 		}
 
 		.clear-icon {
@@ -141,7 +135,7 @@
 			}
 
 			&:hover {
-				color: lighten($colorItemFg, 20%);
+				color: pullForward($colorInputIcon, 10%);
 			}
 		}
 
@@ -152,7 +146,7 @@
 			text-align: right;
 
 			&:hover {
-				color: lighten($colorItemFg, 20%);
+				color: pullForward($colorInputIcon, 10%);
 			}
 		}
 
@@ -197,7 +191,8 @@
 
 
 		.clear-filters-icon {
-			opacity: 0.4;
+			color: $colorInputIcon;
+			opacity: 1;
 			font-size: 0.8em;
 			position: absolute;
 			left: 1px;
@@ -230,86 +225,6 @@
 		max-height: 100%;
 		position: relative;
 
-		.results {
-
-			.search-result-item {
-				// Include transitions (for the highlights)
-				@include single-transition(background-color, 0.25s);
-
-				// Space the results from each other
-				margin-bottom: 2px;
-
-				// Make the highlights the right color and shape.
-				// Attempting to match the style in the tree, but
-				//   while having these be compact.
-				border-radius: 2px;
-				padding-top: 4px;
-				padding-bottom: 2px;
-
-				.label {
-					// Give some padding away from the left side
-					margin-left: $leftMargin;
-
-					.title-label {
-						display: inline-block;
-						position: absolute;
-
-						// Give some padding away from the left side
-						left: $leftMargin + 3px + $iconWidth;
-						// and the right side
-						right: $rightPadding;
-
-						// Size and position the text
-						font-size: .8em;
-						line-height: 17px;
-
-						// Hide overflow text
-						width: auto;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-
-				// Change styling when it's selected
-				&.selected {
-					$c: #fff;
-					background: $colorKeySelectedBg;
-					color: $c;
-					.view-control {
-						color: $colorItemTreeIcon;
-					}
-					.label .type-icon {
-						color: #fff;
-					}
-				}
-                
-                .label .type-icon .l-icon-link {
-                    // Hide links for now. See GitHub issue #84.
-                    display: none;
-                    
-                    @include txtShdwSubtle(1);
-                    z-index: 2;
-                    @include ancillaryIcon(8px, $colorIconLink);
-                    margin-left: -25px;
-                }
-
-				// Change styling when it's being hovered over
-				&:not(.selected) {
-					&:hover {
-						background: lighten($colorBodyBg, 5%);
-						color: lighten($colorBodyFg, 20%);
-						.context-trigger {
-							display: block;
-						}
-						.icon {
-							color: $colorItemTreeIconHover;
-						}
-					}
-				}
-			}
-		}
-
 		.load-icon {
 			position: relative;
 			&.loading {

platform/commonUI/general/res/sass/themes/_theme-espresso.scss

@@ -1,22 +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.
- *****************************************************************************/
-/* CONSTANTS */

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

@@ -1,31 +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 "tree/tree";
-@import "search/search";

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

@@ -22,136 +22,156 @@
 
 ul.tree {
 	@include menuUlReset();
+	@include user-select(none);
 	li {
 		display: block;
 		position: relative;
-		span.tree-item {
-			$runningItemW: 0;
-			@include border-radius($basicCr);
-			@include single-transition(background-color, 0.25s);
+	}
+	ul.tree {
+		margin-left: $treeVCW + $interiorMargin;
+	}
+}
+
+.tree-item,
+.search-result-item {
+	$runningItemW: 0;
+	@include box-sizing(border-box);
+	@include border-radius($basicCr);
+	@include single-transition(background-color, 0.25s);
+	display: block;
+	font-size: 0.8rem;
+	height: $menuLineH;
+	line-height: $menuLineH;
+	margin-bottom: $interiorMarginSm;
+	position: relative;
+
+	.view-control {
+		color: $colorItemTreeVC;
+		display: inline-block;
+		margin-left: $interiorMargin;
+		font-size: 0.75em;
+		width: $treeVCW;
+		$runningItemW: $interiorMargin + $treeVCW;
+		// NOTE: [Mobile] Removed Hover on Mobile
+		@include desktop {
+			&:hover {
+				color: $colorItemTreeVCHover !important;
+			}
+		}
+	}
+
+	.label {
+		display: block;
+		//				@include test(orange);
+		@include absPosDefault();
+		//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
+		line-height: $menuLineH;
+		//left: $runningItemW;
+
+		.type-icon {
+			//@include absPosDefault(0, false);
+			$d: $treeTypeIconH; // 16px is crisp size
+			@include txtShdwSubtle($shdwItemTreeIcon);
+			font-size: $d;
+			color: $colorItemTreeIcon;
+			left: $interiorMargin;
+			position: absolute;
+			@include verticalCenterBlock($menuLineHPx, $d);
+			line-height: 100%;
+			right: auto; width: $d;
+
+			.icon {
+				&.l-icon-link,
+				&.l-icon-alert {
+					//@include txtShdw($shdwItemTreeIcon);
+					position: absolute;
+					z-index: 2;
+				}
+				&.l-icon-alert {
+					$d: 8px;
+					@include ancillaryIcon($d, $colorAlert);
+					top: 1px;
+					right: -2px;
+				}
+				&.l-icon-link {
+					$d: 8px;
+					@include ancillaryIcon($d, $colorIconLink);
+					left: -3px;
+					bottom: 0px;
+				}
+			}
+		}
+		.title-label {
+			@include absPosDefault();
 			display: block;
-			font-size: 0.8em;
-			height: $menuLineH;
-			line-height: $menuLineH;
-			margin-bottom: $interiorMarginSm;
-			position: relative;
+			left: $runningItemW + ($interiorMargin * 3);
+			//right: $treeContextTriggerW + $interiorMargin;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
 
-			.view-control {
-				display: inline-block;
-                margin-left: $interiorMargin;
-				font-size: 0.75em;
-				width: $treeVCW;
-				$runningItemW: $interiorMargin + $treeVCW;
-				&:hover {
-					color: $colorItemTreeVCHover;
-				}
+	&.loading {
+		pointer-events: none;
+		.label {
+			opacity: 0.5;
+			.title-label {
+				font-style: italic;
 			}
+		}
+		.wait-spinner {
+			margin-left: 14px;
+		}
+	}
 
-			.label {
-				display: block;
-//				@include test(orange);
-				@include absPosDefault();
-				//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
-				left: $runningItemW;
+	&.selected {
+		background: $colorItemTreeSelectedBg;
+		color: $colorItemTreeSelectedFg;
+		.view-control {
+			color: $colorItemTreeSelectedVC;
+		}
+		.label .type-icon {
+			color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
+		}
+	}
 
-				.type-icon {
-					@include absPosDefault(0, false);
-					@include txtShdwSubtle(0.6);
-					color: $colorItemTreeIcon;
-					left: $interiorMargin;
-                    right: auto; width: 1em;
-
-					.icon {
-						&.l-icon-link,
-						&.l-icon-alert {
-							@include txtShdwSubtle(1);
-							position: absolute;
-							z-index: 2;
-						}
-						&.l-icon-alert {
-							$d: 8px;
-							@include ancillaryIcon($d, $colorAlert);
-							top: 1px;
-							right: -2px;
-						}
-						&.l-icon-link {
-							$d: 8px;
-							@include ancillaryIcon($d, $colorIconLink);
-							left: -3px;
-							bottom: 5px;
-
-						}
-					}
-				}
-				.title-label {
-					@include absPosDefault();
-					display: block;
-					left: $runningItemW + ($interiorMargin * 3);
-	                //right: $treeContextTriggerW + $interiorMargin;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-
-			&.loading {
-				pointer-events: none;
-				.label {
-					opacity: 0.5;
-					.title-label {
-						font-style: italic;
-					}
-				}
-				.wait-spinner {
-					margin-left: 14px;
-				}
-			}
-
-			&.selected {
-				$c: #fff;
-				background: $colorKeySelectedBg;
-				color: $c;
-				.view-control {
-					color: $colorItemTreeIcon;
-				}
-				.label .type-icon {
-					color: #fff; //$colorItemTreeIconHover;
-				}
-			}
-
-			&:not(.selected) {
-				&:hover {
-					background: lighten($colorBodyBg, 5%);
-					color: lighten($colorBodyFg, 20%);
-					.context-trigger {
-						display: block;
-					}
-					.icon {
-						color: $colorItemTreeIconHover;
-					}
-				}
-			}
-
-			&:not(.loading) {
-				cursor: pointer;
-			}
-
-			.context-trigger {
-				$h: 0.9rem;
-				//display: none;
-				top: -1px;
-				position: absolute;
-				right: $interiorMarginSm;
-				.invoke-menu {
-					font-size: 0.75em;
-					height: $h;
-					line-height: $h;
+	&:not(.selected) {
+		// NOTE: [Mobile] Removed Hover on Mobile
+		@include desktop {
+			&:hover {
+				background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
+				color: pullForward($colorBodyFg, 20%);
+				//.context-trigger {
+				//	display: block;
+				//}
+				.icon {
+					color: $colorItemTreeIconHover;
 				}
 			}
 		}
 	}
 
-	ul.tree {
-		margin-left: $treeVCW + $interiorMargin;
+	&:not(.loading) {
+		cursor: pointer;
+	}
+
+	.context-trigger {
+		$h: 0.9rem;
+		//display: none;
+		top: -1px;
+		position: absolute;
+		right: $interiorMarginSm;
+		.invoke-menu {
+			font-size: 0.75em;
+			height: $h;
+			line-height: $h;
+		}
+	}
+}
+
+.tree-item {
+	.label {
+		left: $interiorMargin + $treeVCW;
 	}
 }

platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss

@@ -54,7 +54,7 @@
 .status.block {
 	//display: inline-block;
 	display: inline;  // New status bar design. Inline to support ellipsis overflow
-	margin-right: $interiorMargin * 2;
+	margin-right: $interiorMarginLg;
 	.status-indicator {
 		//@include border-radius($controlCr * 0.9);
 		//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -20,25 +20,23 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .frame {
-	$ohH: 20px;
+	$ohH: $btnFrameH;
 	$bc: $colorInteriorBorder;
 	&.child-frame.panel {
 		background: $colorBodyBg;
 		border: 1px solid $bc;
 		&:hover {
 			border-color: lighten($bc, 10%);
-			//z-index: 2;
-		}
-		.contents {
-//			overflow: hidden;
 		}
 	}
 	>.object-header.abs {
+		//@include test(red);
 		font-size: 0.75em;
 		height: $ohH;
+		line-height: $ohH;
 	}
 	>.object-holder.abs {
-		top: $ohH + $interiorMarginSm;
+		top: $ohH + $interiorMargin;
 	}
 	.contents {
 		$myM: $interiorMargin;
@@ -48,21 +46,38 @@
 		left: $myM;
 	}
 	&.frame-template {
-		// Hide the view switcher by default when it's in an element that's in a frame context
-		// Frame template is used because we need to target the lowest nested frame
+		.s-btn,
+		.s-menu {
+			height: $ohH;
+			line-height: $ohH;
+			padding: 0 $interiorMargin;
+			> span {
+				font-size: 0.65rem;
+			}
+		}
+
+		.s-menu:after {
+			font-size: 8px;
+		}
+
 		.view-switcher {
-			opacity: 0;
 			z-index: 10;
 		}
-		&:hover .view-switcher {
-			// Show the view switcher on frame hover
-			//display: inline-block !important;
-			opacity: 1;
+		// Hide the view switcher by default when it's in an element that's in a frame context
+		// Frame template is used because we need to target the lowest nested frame
+		@include desktop {
+			.view-switcher {
+				opacity: 0;
+			}
+			&:hover .view-switcher {
+				// Show the view switcher on frame hover
+				opacity: 1;
+			}
 		}
 	}
 	.view-switcher {
 		// Hide the name when the view switcher is in a frame context
-		.name {
+		.title-label {
 			display: none;
 		}
 	}

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -70,19 +70,26 @@
     &.abs {
 	    text-wrap: none;
 	    white-space: nowrap;
-    }
-    &.left,
-    .left {
-        width: 45% !important;
-        right: auto !important;
-    }
-    &.right,
-    .right {
-        width: 45% !important;
-        left: auto !important;
-        text-align: right;
-        .icon.major {
-            margin-left: $interiorMargin * 3;
+        &.left,
+        .left {
+            width: 45%;
+            right: auto;
+        }
+        &.right,
+        .right {
+            width: 45%;
+            left: auto;
+            text-align: right;
+            .icon.major {
+                margin-left: $interiorMargin * 3;
+            }
+        }
+        .l-flex,
+        &.l-flex {
+            .left,
+            .right {
+                width: auto;
+            }
         }
     }
 }
@@ -118,7 +125,7 @@
 		}
 	}
 
-	.bottom-bar {
+	.ue-bottom-bar {
         //@include absPosDefault($bodyMargin);
 		@include absPosDefault(0);// New status bar design
 		top: auto;
@@ -200,7 +207,8 @@
     .split-layout {
         .split-pane-component.pane.left {
             min-width: 150px;
-            max-width: 50%;
+            max-width: 800px;
+            width: $ueBrowseLeftPaneW;
         }
     }
 }
@@ -208,16 +216,17 @@
 .edit-mode {
     .split-layout {
         .split-pane-component.pane.right {
-            min-width: 150px;
-            max-width: 50%;
-            .split-pane-component.pane.bottom {
+            width: 15%;
+            .pane.bottom {
                 min-height: 50px;
-                max-height: 80%;
+                height: 30%;
             }
         }
     }
 }
 
+
+
 .pane {
     position: absolute;
     &.treeview.left {
@@ -243,6 +252,12 @@
 	        .right.abs {
 		        top: auto;
 	        }
+            //.left.abs {
+            //    @include tmpBorder(green);
+            //}
+            //.right.abs {
+            //    @include tmpBorder(red);
+            //}
         }
         .object-holder {
             top: $ueTopBarH + $interiorMarginLg;
@@ -267,6 +282,7 @@
 	&.vertical {
 		// Slides left and right
 		>.pane {
+//            @include test();
 			margin-left: $interiorMargin;
 			>.holder {
 				left: 0;
@@ -283,6 +299,52 @@
 	}
 }
 
+.object-browse-bar .s-btn,
+.top-bar .buttons-main .s-btn,
+.top-bar .s-menu,
+.tool-bar .s-btn,
+.tool-bar .s-menu {
+	$h: $btnToolbarH;
+	height: $h;
+	line-height: $h;
+	vertical-align: top;
+}
+
+.object-browse-bar,
+.top-bar {
+    .view-switcher {
+        margin-right: $interiorMarginLg * 2;
+    }
+}
+
+.object-browse-bar {
+	//@include test(blue);
+	@include absPosDefault(0, visible);
+	@include box-sizing(border-box);
+	height: $ueTopBarH;
+	line-height: $ueTopBarH;
+	white-space: nowrap;
+
+	.left {
+		padding-right: $interiorMarginLg * 2;
+		.l-back {
+			display: inline-block;
+			float: left;
+			margin-right: $interiorMarginLg;
+		}
+	}
+}
+
+.l-flex {
+	@include webkitVal('display', 'flex');
+	@include webkitProp('flex-flow', 'row nowrap');
+	.left {
+		//@include test(red);
+		@include webkitProp(flex, '1 1 0');
+		padding-right: $interiorMarginLg;
+	}
+}
+
 .vscroll {
     overflow-y: auto;
 }

platform/commonUI/general/res/sass/user-environ/_top-bar.scss

@@ -20,33 +20,26 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .top-bar {
-//	$h: $ueTopBarH - 5px;
-//	background: rgba(#ff0000, 0.2);
-//	line-height: $ueTopBarBtnH;
-
     &.browse,
     &.edit {
 	    border-bottom: 1px solid $colorInteriorBorder;
         top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
         height: $ueTopBarEditH;
+		line-height: $ueTopBarH;
     }
 	
-	.action {
-	}
-	
-	.title {
+/*	.title {
 		color: #fff;
-//		font-weight: bold;
-	}
+	}*/
 	
 	.buttons-main {
 		font-size: 0.8em;
 		left: auto;
 		text-align: right;
 //		width: 200px;
-		.btn {
-			margin-left: $interiorMargin;
-		}
+//		.btn {
+//			margin-left: $interiorMargin;
+//		}
 	}
 }
 

platform/commonUI/general/res/templates/bottombar.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar' ng-controller="BottomBarController as bar">
+<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
     <div id='status' class='status-holder'>
         <mct-include ng-repeat="indicator in bar.getIndicators()"
                      ng-model="indicator.ngModel"

platform/commonUI/general/res/templates/controls/action-button.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
+<a class="s-btn key-{{parameters.action.getMetadata().key}}"
    ng-class="{ labeled: parameters.labeled }"
    title="{{parameters.action.getMetadata().description}}"
    ng-click="parameters.action.perform()">

platform/commonUI/general/res/templates/controls/action-group.html

@@ -20,17 +20,16 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ActionGroupController">
-
     <span ng-repeat="action in ungrouped">
-        <mct-include key="'action-button'" parameters="{ action: action }">
-        </mct-include>
+        <mct-include key="'action-button'" parameters="{ action: action }"></mct-include>
     </span>
-
-    <span class="btn-set" ng-repeat="group in groups">
+    <span class="l-btn-set" ng-repeat="group in groups">
         <span ng-repeat="action in group">
-            <mct-include key="'action-button'" parameters="{ action: action }">
+            <mct-include key="'action-button'"
+                         parameters="{ action: action }"
+                         ng-class="{ first:$index == 0, last:$index == group.length - 1 }"
+	            >
             </mct-include>
         </span>
     </span>
-
 </span>

platform/commonUI/general/res/templates/controls/selector.html

@@ -43,11 +43,11 @@
     </div>
     <div class='col col-2'>
         <div class='btn-holder valign-mid btns-add-remove'>
-            <a class='btn major'
+            <a class='s-btn major'
                ng-click="selector.select(selector.treeModel.selectedObject)">
                 <span class='ui-symbol'>&gt;</span>
             </a>
-            <a class='btn major'
+            <a class='s-btn major'
                ng-click="selector.deselect(selector.listModel.selectedObject)">
                 <span class='ui-symbol'>&lt;</span>
             </a>

platform/commonUI/general/res/templates/controls/switcher.html

@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
     <div
-	    class="view-switcher menu-element btn btn-menu dropdown click-invoke"
+	    class="view-switcher menu-element s-menu"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
@@ -33,11 +33,9 @@
 	        ></span>
 
         <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
-        <span class="name">{{ngModel.selected.name}}</span>
-        <span class='ui-symbol invoke-menu'>v</span>
+        <span class="title-label">{{ngModel.selected.name}}</span>
 
-
-        <div class="menu dropdown" ng-show="toggle.isActive()">
+        <div class="menu" ng-show="toggle.isActive()">
             <ul>
                 <li ng-repeat="option in view"
                     ng-click="ngModel.selected = option; toggle.setState(false)">

platform/commonUI/general/res/templates/indicator.html

@@ -22,7 +22,8 @@
 <div class='status block'
      title="{{ngModel.getDescription()}}"
      ng-click='ngModel.configure()'
-     ng-class='ngModel.getClass()'>
+     ng-class='ngModel.getClass()'
+     ng-show="ngModel.getText().length > 0">
     <span class="ui-symbol status-indicator"
           ng-class='ngModel.getGlyphClass()'>
         {{ngModel.getGlyph()}}
@@ -31,9 +32,9 @@
           ng-class='ngModel.getTextClass()'>
         {{ngModel.getText()}}
     </span>
-    <a href=''
-       class="ui-symbol"
-       ng-if="ngModel.configure">
-        G
-    </a>
+	<a href=''
+	   class="ui-symbol"
+	   ng-if="ngModel.configure">
+		G
+	</a>
 </div>

platform/commonUI/general/res/templates/menu/context-menu.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="menu-element context-menu-wrapper" ng-controller="ContextMenuController">
-    <div class="menu context-menu dropdown">
+<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
+    <div class="menu context-menu">
         <ul>
 
             <li ng-repeat="menuAction in menuActions"