[Gestures] Tests

Commented MCTPinch tests.

.gitignore

@@ -5,7 +5,6 @@
 *.DS_Store
 
 *.sass-cache
-*COMPILE.css
 
 # Intellij project configuration files
 *.idea

CONTRIBUTING.md

@@ -238,9 +238,6 @@ 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,26 +8,24 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
-    "platform/commonUI/mobile",
-    "platform/commonUI/themes/espresso",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
     "platform/features/imagery",
     "platform/features/layout",
     "platform/features/pages",
-    "platform/features/plot",
+    "platform/features/plot-reborn",
     "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"
 ]

example/localstorage/bundle.json

@@ -13,11 +13,6 @@
                 "key": "PERSISTENCE_SPACE",
                 "value": "mct"
             }
-        ],
-        "indicators": [
-            {
-                "implementation": "LocalStorageIndicator.js"
-            }
         ]
     }
-}
+}

example/localstorage/src/LocalStoragePersistenceProvider.js

@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * 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;
+    }
+);

ideas/cli/bundle.json

@@ -1,22 +0,0 @@
-{
-    "extensions": {
-        "routes": [
-            {
-                "when": "/cli",
-                "templateUrl": "templates/cli.html"
-            }
-        ],
-        "controllers": [
-            {
-                "key": "CLIController",
-                "implementation": "CLIController.js",
-                "depends": [ "$scope", "navigationService", "objectService" ]
-            }
-        ],
-        "stylesheets": [
-            {
-                "stylesheetUrl": "stylesheets/cli.css"
-            }
-        ]
-    }
-}

ideas/cli/res/stylesheets/cli.css

@@ -1,47 +0,0 @@
-.iw-container {
-    position: absolute;
-    bottom: 30px;
-    left: 0;
-    top: 0;
-    right: 0;
-}
-
-.iw-stdin {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 30px;
-    width: calc(100% - 8px);
-    margin: 4px;
-    font-family: monospace;
-    font-size: 16px;
-}
-
-.iw-stdout {
-    position: absolute;
-    left: 6px;
-    right: 6px;
-    top: 12px;
-    bottom: 44px;
-    border: 1px #211 solid;
-    border-radius: 12px;
-    padding: 8px;
-    background: #302;
-    overflow: auto;
-    box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0.5);
-}
-
-.iw-stdout span {
-    display: block;
-    font-family: monospace;
-    color: #FD9;
-    font-size: 16px;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    min-height: 1em;
-    white-space: pre;
-}
-
-.iw-stdout span.iw-user-input {
-    color: gray;
-}

ideas/cli/res/templates/cli.html

@@ -1,15 +0,0 @@
-<div class="abs holder-all browse-mode" ng-controller="CLIController">
-    <div class="iw-container">
-        <div class="iw-stdout" mct-scroll-y="stdoutScroll">
-            <span ng-repeat="line in stdout track by $index"
-                  class="{{line.cssClass}}"
-                  ng-bind="line.text">
-            </span>
-        </div>
-        <form ng-submit="enter(stdin)">
-            <input type="text" class="iw-stdin" ng-model="stdin" autofocus>
-        </form>
-    </div>
-    <mct-include key="'bottombar'"></mct-include>
-</div>
-

ideas/cli/src/CLIController.js

@@ -1,177 +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*/
-
-define(function () {
-    'use strict';
-    return function CLIController($scope, navigationService, objectService) {
-        var unlistenToMutation,
-            currentComposition = [];
-
-        function print(str, cssClass) {
-            $scope.stdout.push({
-                text: str,
-                cssClass: cssClass
-            });
-            $scope.stdoutScroll = Number.MAX_VALUE;
-        }
-
-        function pad(str, length) {
-            while (str.length < length) {
-                str += " ";
-            }
-            return str;
-        }
-
-        function summarize(domainObject) {
-            var type = domainObject.getCapability("type"),
-                typeName = type ? type.getName() : "Object",
-                location = domainObject.getCapability('location'),
-                isLink = (location && location.isLink()),
-                suffix = isLink ? " (link)" : "";
-            return "[" + typeName + "] " + domainObject.getModel().name + suffix;
-        }
-
-        function printComposition(domainObject) {
-            return domainObject.useCapability("composition").then(function (c) {
-                currentComposition = c;
-                c.forEach(function (childObject, i) {
-                    print(i + ") " + summarize(childObject));
-                });
-            });
-        }
-
-        function printObject(domainObject, callback) {
-            // Exclude the root object; nobody wants to see that
-            if (domainObject.hasCapability("context")) {
-                print(summarize(domainObject));
-            }
-            if (domainObject.hasCapability('composition')) {
-                printComposition(domainObject).then(callback);
-            } else {
-                callback();
-            }
-        }
-
-        function unlisten() {
-            if (unlistenToMutation) {
-                unlistenToMutation();
-                unlistenToMutation = undefined;
-            }
-        }
-
-        function navChange(domainObject) {
-            unlisten();
-            unlistenToMutation = domainObject.getCapability("mutation")
-                .listen(function () { printObject(domainObject); });
-            printObject(domainObject);
-        }
-
-        function findTarget(id) {
-            if (id === "this") {
-                return navigationService.getNavigation();
-            } else {
-                return currentComposition[parseInt(id, 10)];
-            }
-        }
-
-        function listActions(domainObject, index) {
-            // Don't show actions for the root
-            if (!domainObject.hasCapability('context')) {
-                return;
-            }
-
-            domainObject.getCapability('action').getActions().forEach(function (a) {
-                var metadata = a.getMetadata(),
-                    desc = metadata.description,
-                    suffix = index !== undefined ? (" " + index) : "";
-                print(pad(metadata.key + suffix, 32) + (desc || ""));
-            });
-        }
-
-        function performAction(domainObject, action) {
-            domainObject.getCapability('action').perform(action);
-        }
-
-        function handleInput(input) {
-            var parts = input.split(" "),
-                targetObject;
-
-            if (input.length === 0) {
-                targetObject = navigationService.getNavigation();
-                if (targetObject) {
-                    printObject(targetObject, function () {
-                        print("");
-                        listActions(targetObject);
-                    });
-                }
-                return;
-            } else if (parts.length === 1) {
-                if (isNaN(parseInt(parts[0], 10))) {
-                    targetObject = navigationService.getNavigation();
-                    performAction(targetObject, parts[0]);
-                    return;
-                }
-                targetObject = findTarget(parts[0]);
-                if (targetObject) {
-                    listActions(targetObject, parts[0]);
-                    return;
-                }
-            } else if (parts.length === 2) {
-                targetObject = findTarget(parts[1]);
-                if (targetObject) {
-                    performAction(targetObject, parts[0]);
-                    return;
-                }
-            }
-
-            // Any parse-able input should have returned already.
-            print("SYNTAX ERROR. READY.");
-        }
-
-        if (!navigationService.getNavigation()) {
-            objectService.getObjects(["ROOT"]).then(function (objects) {
-                navigationService.setNavigation(objects.ROOT);
-            });
-        }
-
-        navigationService.addListener(navChange);
-
-        $scope.stdout = [];
-        $scope.stdin = "";
-        $scope.stdoutScroll = 0;
-
-        $scope.enter = function (input) {
-            $scope.stdin = "";
-            print("");
-            print(input, "iw-user-input");
-            print("");
-
-            handleInput(input);
-        };
-
-        $scope.$on("$destroy", function () {
-            navigationService.removeListener(navChange);
-            unlisten();
-        });
-    };
-});

platform/commonUI/browse/bundle.json

@@ -16,20 +16,7 @@
             {
                 "key": "BrowseController",
                 "implementation": "BrowseController.js",
-                "depends": [
-                    "$scope",
-                    "$route",
-                    "$location",
-                    "objectService",
-                    "navigationService",
-                    "urlService"
-                ]
-            },
-            {
-                "key": "BrowseTreeController",
-                "implementation": "BrowseTreeController.js",
-                "priority": "preferred",
-                "depends": [ "$scope", "agentService" ]
+                "depends": [ "$scope", "$route", "$location", "objectService", "navigationService", "urlService" ]
             },
             {
                 "key": "BrowseObjectController",
@@ -38,17 +25,17 @@
             },
             {
                 "key": "CreateMenuController",
-                "implementation": "creation/CreateMenuController.js",
+                "implementation": "creation/CreateMenuController",
                 "depends": [ "$scope" ]
             },
             {
                 "key": "LocatorController",
-                "implementation": "creation/LocatorController.js",
-                "depends": [ "$scope", "$timeout" ]
+                "implementation": "creation/LocatorController",
+                "depends": [ "$scope" ]
             },
             {
                 "key": "MenuArrowController",
-                "implementation": "MenuArrowController.js",
+                "implementation": "MenuArrowController",
                 "depends": [ "$scope" ]
             }
         ],
@@ -58,6 +45,12 @@
                 "templateUrl": "templates/create/locator.html"
             }
         ],
+        "templates": [
+            {
+                "key": "topbar-browse",
+                "templateUrl": "templates/topbar-browse.html"
+            }
+        ],
         "representations": [
             {
                 "key": "browse-object",
@@ -92,7 +85,7 @@
             },
             {
                 "key": "back-arrow",
-                "uses": [ "context" ],
+                "uses": [ "type", "action" ],
                 "templateUrl": "templates/back-arrow.html"
             }
         ],
@@ -105,15 +98,9 @@
         "actions": [
             {
                 "key": "navigate",
-                "description": "Browse to this object.",
                 "implementation": "navigation/NavigateAction.js",
                 "depends": [ "navigationService", "$q" ]
             },
-            {
-                "key": "back",
-                "implementation": "navigation/BackAction.js",
-                "description": "Navigate to the parent of this object."
-            },
             {
                 "key": "window",
                 "name": "Open In New Tab",
@@ -160,7 +147,7 @@
                 "provides": "creationService",
                 "type": "provider",
                 "implementation": "creation/CreationService.js",
-                "depends": [ "persistenceService", "now", "$q", "$log" ]
+                "depends": [ "persistenceService", "$q", "$log" ]
             }
         ],
         "runs": [

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

@@ -21,10 +21,8 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<a
-   class='type-icon icon ui-symbol s-back'
-   ng-show="context.getPath().length > 2"
-   ng-click="domainObject.getCapability('action').perform('back')">
-    {
+<a ng-controller="BrowseController"
+      class='type-icon icon ui-symbol s-back'
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''"
+      ng-click='backArrow()'>{
 </a>
-

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

@@ -22,9 +22,7 @@
 <span ng-controller="BrowseObjectController">
     <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="'back-arrow'" class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>

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

@@ -22,46 +22,39 @@
 
 <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 browse-wrapper"
-         ng-controller="BrowseTreeController as tree"
-         ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
+    <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <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 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"
+	                                        ng-model="treeModel">
+	                    </mct-representation>
+	                </div>
+	            </div>
             </div>
 
             <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 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 class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
             </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
 </div>
-

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

@@ -0,0 +1,27 @@
+<!--
+ 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='object-holder abs vscroll'>
+    <mct-representation key="representation.selected.key"
+                        mct-object="representation.selected.key && domainObject">
+    </mct-representation>
+</div>

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

@@ -20,11 +20,10 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <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 class="btn btn-menu create-btn major" ng-click="createController.toggle()">
+	    Create
     </div>
-    <div class="menu super-menu" ng-show="createController.isActive()">
+    <div class="menu dropdown 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 class="wrapper">
+    <div>
         <mct-representation key="'tree'"
                             mct-object="rootObject"
                             ng-model="treeModel">

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

@@ -0,0 +1,36 @@
+<!--
+ 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,6 @@ 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
@@ -128,6 +127,78 @@ define(
                     navigateTo(domainObject);
                 }
             }
+            
+            // Uses the current navigation to get the 
+            // current ContextCapability, then the
+            // parent is gotten from that. If the parent
+            // is not the root, then user is navigated to
+            // parent
+            function navigateToParent() {
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parentContext,
+                    parent,
+                    grandparentId;
+                
+                // Checks if the current object has a context
+                if (context) {
+                    
+                    // Sets the parent and the parent context
+                    // which is checked
+                    parent = context.getParent();
+                    parentContext = parent.getCapability('context');
+                    
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        // Gets the grandparent id
+                        grandparentId = parentContext.getParent().getId();
+                        
+                        // Navigates to the parent
+                        navigateTo(parent);
+                        
+                        // Checks after navigation if the user is located at the 
+                        // root (grandparent of original selected object, after
+                        // navigation, user is at parent of original object and
+                        // child of grandparent)
+                        if (grandparentId && grandparentId !== ROOT_ID) {
+                            $scope.atRoot = false;
+                            return;
+                        }
+                        
+                        // Set at root if no grandparent exists and
+                        // if grandparent is ROOT, after navigation
+                        $scope.atRoot = true;
+                    }
+                }
+            }
+            
+            function checkRoot() {
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parentContext,
+                    parent,
+                    grandparent;
+                
+                // Checks if the current object has a context
+                if (context) {
+                    parent = context.getParent();
+                    parentContext = parent.getCapability('context');
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        grandparent = parentContext.getParent();
+                        
+                        // Checks if the grandparent exists
+                        // if it does not exist (for example in search),
+                        // than do not show the back button
+                        if (grandparent) {
+                            $scope.atRoot = false;
+                            return;
+                        }
+                    }
+                }
+                
+                // In any other situation where the context or parent
+                // context does not exist or the user is at ROOT, than
+                // hide the back arrow
+                $scope.atRoot = true;
+               
+            }
 
             // Load the root object, put it in the scope.
             // Also, load its immediate children, and (possibly)
@@ -142,7 +213,13 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
-
+            
+            // SlideMenu boolean used to hide and show
+            // tree menu
+            $scope.treeSlide = function () {
+                $scope.treeClass = !$scope.treeClass;
+            };
+            
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -153,6 +230,16 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
+            
+            // If the user has selected an object (and is portrait
+            // on a phone), then hide the tree menu
+            $scope.$on("select-obj", function () {
+                $scope.treeSlide();
+            });
+            
+            $scope.backArrow = navigateToParent;
+            
+            $scope.checkRoot = checkRoot;
 
         }
 

platform/commonUI/browse/src/BrowseTreeController.js

@@ -1,78 +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,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/CreateAction.js

@@ -53,12 +53,11 @@ define(
          */
         function CreateAction(type, parent, context, dialogService, creationService, policyService) {
             this.metadata = {
-                key: 'create.' + type.getKey(),
+                key: 'create',
                 glyph: type.getGlyph(),
                 name: type.getName(),
                 type: type.getKey(),
                 description: type.getDescription(),
-                category: [ 'creation' ],
                 context: context
             };
 

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

@@ -63,10 +63,7 @@ define(
             // domain object to serve as the container for the
             // newly-created object (although the user may later
             // make a different selection)
-            if (!destination) {
-                return [];
-            }
-            if (context.category && context.category !== "creation") {
+            if (key !== 'create' || !destination) {
                 return [];
             }
 

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

@@ -41,7 +41,7 @@ define(
             // Update the set of Create actions
             function refreshActions() {
                 $scope.createActions = $scope.action ?
-                        $scope.action.getActions({ category: "creation" }) :
+                        $scope.action.getActions('create') :
                         [];
             }
 

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

@@ -42,11 +42,10 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreationService(persistenceService, now, $q, $log) {
+        function CreationService(persistenceService, $q, $log) {
             this.persistenceService = persistenceService;
             this.$q = $q;
             this.$log = $log;
-            this.now = now;
         }
 
         /**
@@ -87,18 +86,37 @@ define(
             // composition, so that it will subsequently appear
             // as a child contained by that parent.
             function addToComposition(id, parent, parentPersistence) {
-                var compositionCapability = parent.getCapability('composition'),
-                    addResult = compositionCapability &&
-                        compositionCapability.add(id);
+                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
+                    }
+                });
 
-                return self.$q.when(addResult).then(function (result) {
+                return self.$q.when(mutatationResult).then(function (result) {
                     if (!result) {
-                        self.$log.error("Could not modify " + parent.getId());
+                        self.$log.error("Could not mutate " + parent.getId());
                         return undefined;
                     }
 
                     return parentPersistence.persist().then(function () {
-                        return result;
+                        // 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];
+                                    }
+                                }
+                            });
                     });
                 });
             }
@@ -115,7 +133,6 @@ 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.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, $timeout) {
+        function LocatorController($scope) {
             // Populate values needed by the locator control. These are:
             // * rootObject: The top-level object, since we want to show
             //               the full tree
@@ -41,19 +41,9 @@ define(
             //              used for bi-directional object selection.
             function setLocatingObject(domainObject, priorObject) {
                 var context = domainObject &&
-                    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);
-                }
+                    domainObject.getCapability("context");
 
+                $scope.rootObject = (context && context.getRoot()) || $scope.rootObject;
                 $scope.treeModel.selectedObject = domainObject;
                 $scope.ngModel[$scope.field] = domainObject;
 
@@ -62,7 +52,10 @@ define(
                         $scope.structure &&
                             $scope.structure.validate) {
                     if (!$scope.structure.validate(domainObject)) {
-                        setLocatingObject(priorObject, undefined);
+                        setLocatingObject(
+                            $scope.structure.validate(priorObject) ?
+                                    priorObject : undefined
+                        );
                         return;
                     }
                 }

platform/commonUI/browse/src/navigation/BackAction.js

@@ -1,68 +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,Promise*/
-
-/**
- * Module defining NavigateAction. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * The `back` action navigates to the contextual parent of a
-         * specific domain object.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         * @implements {Action}
-         */
-        function BackAction(context) {
-            this.domainObject = context.domainObject;
-        }
-
-        /**
-         * Navigate to the object described in the context.
-         * @returns {Promise} a promise that is resolved once the
-         *          navigation has been updated
-         */
-        BackAction.prototype.perform = function () {
-            var parent = this.domainObject.getCapability("context")
-                    .getParent();
-            return parent.getCapability("action").perform("navigate");
-        };
-
-        /**
-         * Navigate as an action is only applicable when a domain object
-         * is described in the action context.
-         * @param {ActionContext} context the context in which the action
-         *        will be performed
-         * @returns {boolean} true if applicable
-         */
-        BackAction.appliesTo = function (context) {
-            return context.domainObject !== undefined &&
-                    context.domainObject.hasCapability("context");
-        };
-
-        return BackAction;
-    }
-);

platform/commonUI/browse/src/windowing/FullscreenAction.js

@@ -53,10 +53,9 @@ define(
             // based on whether or not we are currently
             // full screen.
             var metadata = Object.create(FullscreenAction);
-            metadata.key = "fullscreen";
             metadata.glyph = screenfull.isFullscreen ? "_" : "z";
             metadata.description = screenfull.isFullscreen ?
-                    EXIT_FULLSCREEN : ENTER_FULLSCREEN;
+                EXIT_FULLSCREEN : ENTER_FULLSCREEN;
             metadata.group = "windowing";
             metadata.context = this.context;
             return metadata;

platform/commonUI/browse/test/BrowseControllerSpec.js

@@ -39,6 +39,9 @@ define(
                 mockUrlService,
                 mockDomainObject,
                 mockNextObject,
+                mockParentContext,
+                mockParent,
+                mockGrandparent,
                 controller;
 
             function mockPromise(value) {
@@ -52,7 +55,7 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    [ "$on", "$watch" ]
+                    [ "$on", "$watch", "treeSlide", "backArrow" ]
                 );
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
@@ -88,6 +91,17 @@ define(
                     "nextObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
+                
+
+                mockParentContext = jasmine.createSpyObj('context', ['getParent']);
+                mockParent  = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
+                mockGrandparent  = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
 
                 mockObjectService.getObjects.andReturn(mockPromise({
                     ROOT: mockRootObject
@@ -145,15 +159,26 @@ define(
                 );
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
-
+            
+            // Mocks the tree slide call that
+            // lets the html code know if the
+            // tree menu is open.
+            it("calls the treeSlide function", function () {
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    "select-obj",
+                    jasmine.any(Function)
+                );
+                
+                mockScope.$on.calls[1].args[1]();
+            });
 
             it("releases its navigation listener when its scope is destroyed", function () {
                 expect(mockScope.$on).toHaveBeenCalledWith(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                mockScope.$on.mostRecentCall.args[1]();
-
+                
+                mockScope.$on.calls[0].args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
                     mockNavigationService.addListener.mostRecentCall.args[0]
@@ -224,22 +249,132 @@ 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)
                 );
             });
-
+            
+            it("checks if the user is current navigated to the root", function () {
+                var mockContext = jasmine.createSpyObj('context', ['getParent']);
+                
+                mockRoute.current.params.ids = "ROOT/mine";
+                mockParent.getId.andReturn("ROOT");
+                
+                mockDomainObject.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockContext;
+                });
+                
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockContext.getParent.andReturn(mockParent);
+                mockParent.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockParentContext;
+                });
+                mockParentContext.getParent.andReturn(mockGrandparent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
+                
+                mockRoute.current.params.ids = "mine/junk";
+                mockParent.getId.andReturn("mine");
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
+                
+                mockDomainObject.getCapability.andReturn(undefined);
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
+            });
+            
+            // Mocks the back arrow call that
+            // lets the html code know the back
+            // arrow navigation needs to be done
+            it("calls the backArrow function", function () {
+                var mockContext = jasmine.createSpyObj('context', ['getParent']);
+                
+                mockRoute.current.params.ids = "mine/junk";
+                mockParent.getId.andReturn("mine");
+                
+                mockDomainObject.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockContext;
+                });
+                
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockContext.getParent.andReturn(mockParent);
+                mockParent.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockParentContext;
+                });
+                mockParentContext.getParent.andReturn(mockGrandparent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.backArrow();
+                
+                mockRoute.current.params.ids = "mine/lessjunk/morejunk";
+                mockGrandparent.getId.andReturn("mine");
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.backArrow();
+                
+                mockRoute.current.params.ids = "ROOT/mine";
+                mockParent.getId.andReturn("ROOT");
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.backArrow();
+            });
         });
     }
 );

platform/commonUI/browse/test/BrowseTreeControllerSpec.js

@@ -1,90 +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,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/CreationServiceSpec.js

@@ -31,7 +31,6 @@ define(
 
         describe("The creation service", function () {
             var mockPersistenceService,
-                mockNow,
                 mockQ,
                 mockLog,
                 mockParentObject,
@@ -64,7 +63,6 @@ define(
                     "persistenceService",
                     [ "createObject" ]
                 );
-                mockNow = jasmine.createSpy('now');
                 mockQ = { when: mockPromise, reject: mockReject };
                 mockLog = jasmine.createSpyObj(
                     "$log",
@@ -88,7 +86,7 @@ define(
                 );
                 mockCompositionCapability = jasmine.createSpyObj(
                     "composition",
-                    ["invoke", "add"]
+                    ["invoke"]
                 );
                 mockContextCapability = jasmine.createSpyObj(
                     "context",
@@ -105,8 +103,6 @@ define(
                     mockPromise(true)
                 );
 
-                mockNow.andReturn(12321);
-
                 mockParentObject.getCapability.andCallFake(function (key) {
                     return mockCapabilities[key];
                 });
@@ -124,11 +120,9 @@ define(
                 mockCompositionCapability.invoke.andReturn(
                     mockPromise([mockNewObject])
                 );
-                mockCompositionCapability.add.andReturn(mockPromise(true));
 
                 creationService = new CreationService(
                     mockPersistenceService,
-                    mockNow,
                     mockQ,
                     mockLog
                 );
@@ -149,34 +143,33 @@ define(
                     parentModel = { composition: ["notAnyUUID"] };
                 creationService.createObject(model, mockParentObject);
 
-                // Verify that a new ID was added
-                expect(mockCompositionCapability.add)
-                    .toHaveBeenCalledWith(jasmine.any(String));
+                // 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);
             });
 
-            it("provides the newly-created object", function () {
-                var mockDomainObject = jasmine.createSpyObj(
-                        'newDomainObject',
-                        ['getId', 'getModel', 'getCapability']
-                    ),
-                    mockCallback = jasmine.createSpy('callback');
+            it("warns if parent has no composition", function () {
+                var model = { someKey: "some value" },
+                    parentModel = { };
+                creationService.createObject(model, mockParentObject);
 
-                // 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);
-                });
+                // Verify precondition; no prior warnings
+                expect(mockLog.warn).not.toHaveBeenCalled();
 
-                // Should find it in the composition
-                creationService.createObject({}, mockParentObject)
-                    .then(mockCallback);
-
-                expect(mockCallback).toHaveBeenCalledWith(mockDomainObject);
+                // 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(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"),
@@ -192,6 +185,7 @@ define(
                 expect(mockLog.warn).toHaveBeenCalled();
                 expect(success).not.toHaveBeenCalled();
                 expect(failure).toHaveBeenCalled();
+
             });
 
             it("logs an error when mutaton fails", function () {
@@ -200,19 +194,13 @@ define(
                 var model = { someKey: "some value" },
                     parentModel = { composition: ["notAnyUUID"] };
 
-                mockCompositionCapability.add.andReturn(mockPromise(false));
+                mockMutationCapability.invoke.andReturn(mockPromise(false));
 
                 creationService.createObject(model, mockParentObject);
 
                 expect(mockLog.error).toHaveBeenCalled();
             });
 
-            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,7 +31,6 @@ define(
 
         describe("The locator controller", function () {
             var mockScope,
-                mockTimeout,
                 mockDomainObject,
                 mockRootObject,
                 mockContext,
@@ -42,7 +41,6 @@ define(
                     "$scope",
                     [ "$watch" ]
                 );
-                mockTimeout = jasmine.createSpy("$timeout");
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
                     [ "getCapability" ]
@@ -62,7 +60,7 @@ define(
                 mockScope.ngModel = {};
                 mockScope.field = "someField";
 
-                controller = new LocatorController(mockScope, mockTimeout);
+                controller = new LocatorController(mockScope);
             });
 
             it("adds a treeModel to scope", function () {
@@ -82,7 +80,6 @@ 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);
 
@@ -98,7 +95,6 @@ define(
 
                 // Pass selection change
                 mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                mockTimeout.mostRecentCall.args[0]();
 
                 expect(mockScope.structure.validate).toHaveBeenCalled();
                 // Change should have been rejected
@@ -112,16 +108,14 @@ 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,7 +1,6 @@
 [
     "BrowseController",
     "BrowseObjectController",
-    "BrowseTreeController",
     "MenuArrowController",
     "creation/CreateAction",
     "creation/CreateActionProvider",

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

@@ -34,13 +34,13 @@
     </div>
 </div>
 <div class="abs bottom-bar">
-    <a class='s-btn major'
+    <a class='btn lg major'
+       href=''
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='s-btn'
-       ng-click="ngModel.cancel()">
+    <a class='btn lg subtle' href='' 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="s-btn lg"
+           class="btn lg"
            title="{{option.description}}"
            ng-click="ngModel.confirm(option.key)"
            ng-class="{ major: $first, subtle: !$first }">

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='s-btn'
+        <a class='btn'
            ng-click="currentAction.perform()"
            ng-class="{ major: $index === 0, subtle: $index !== 0 }">
             {{currentAction.getMetadata().name}}

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

@@ -36,11 +36,20 @@ 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 =
@@ -50,13 +59,11 @@ define(
 
             // Link these objects
             function doLink() {
-                var composition = self.domainObject &&
-                        self.domainObject.getCapability('composition');
-                return composition && composition.add(self.selectedObject)
-                        .then(doPersist);
+                return self.domainObject.useCapability("mutation", addId)
+                    .then(doPersist);
             }
 
-            return this.selectedObject && doLink();
+            return this.selectedId && doLink();
         };
 
         return LinkAction;

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

@@ -54,9 +54,6 @@ 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(),
-                    context;
-
+                var traverseObject = (navigationService).getNavigation();
+                
                 // Stop when object is not defined (above ROOT)
-                while (traverseObject) {
+                while (traverseObject && traverseObject.getCapability('context')) {
+                    
                     // 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,8 +103,7 @@ define(
                     }
                     // Traverses to parent of current object, moving
                     // up the ascendant path
-                    context = traverseObject.getCapability('context');
-                    traverseObject = context && context.getParent();
+                    traverseObject = traverseObject.getCapability('context').getParent();
                 }
             }
 
@@ -116,11 +115,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,
-                mockComposition,
+                mockMutation,
                 mockPersistence,
                 mockType,
                 actionContext,
@@ -67,7 +67,7 @@ define(
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
-                mockComposition = jasmine.createSpyObj("composition", [ "invoke", "add" ]);
+                mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 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);
-                mockComposition.invoke.andReturn(mockPromise(true));
-                mockComposition.add.andReturn(mockPromise(true));
+                mockMutation.invoke.andReturn(mockPromise(true));
+
 
                 capabilities = {
-                    composition: mockComposition,
+                    mutation: mockMutation,
                     persistence: mockPersistence,
                     type: mockType
                 };
@@ -96,17 +96,33 @@ define(
             });
 
 
-            it("adds to the parent's composition when performed", function () {
+            it("mutates the parent when performed", function () {
                 action.perform();
-                expect(mockComposition.add)
-                    .toHaveBeenCalledWith(mockDomainObject);
+                expect(mockMutation.invoke)
+                    .toHaveBeenCalledWith(jasmine.any(Function));
             });
 
-            it("persists changes afterward", function () {
+            it("changes composition from its mutation function", function () {
+                var mutator, result;
                 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 { control: 'textfield '}; }
+                        getDefinition: function () { return {}; }
                     };
                 });
 

platform/commonUI/general/bundle.json

@@ -6,8 +6,12 @@
         "services": [
             {
                 "key": "urlService",
-                "implementation": "services/UrlService.js",
+                "implementation": "/services/UrlService.js",
                 "depends": [ "$location" ]
+            },
+            {
+                "key": "agentService",
+                "implementation": "/services/AgentService.js"
             }
         ],
         "runs": [
@@ -20,6 +24,18 @@
             {
                 "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": [
@@ -48,7 +64,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout" ]
+                "depends": [ "$scope", "$timeout", "agentService" ]
             },
             {
                 "key": "ActionGroupController",
@@ -123,7 +139,7 @@
             {
                 "key": "mctSplitPane",
                 "implementation": "directives/MCTSplitPane.js",
-                "depends": [ "$parse", "$log", "$interval" ]
+                "depends": [ "$parse", "$log" ]
             },
             {
                 "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

@@ -0,0 +1,581 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** STYLE */
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+/************************** MOBILE TREE MENU DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #cccccc;
+  font-size: 0.8em;
+  padding: 5px 5px;
+  text-transform: uppercase; }
+
+/* line 35, ../sass/forms/_elems.scss */
+.form .form-section {
+  position: relative;
+  margin-bottom: 20px; }
+/* line 40, ../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 rgba(255, 255, 255, 0.1);
+  margin-top: 5px;
+  padding: 5px 0;
+  position: relative; }
+  /* line 48, ../sass/forms/_elems.scss */
+  .form .form-row.first {
+    border-top: none; }
+  /* line 52, ../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;
+    font-size: 0.8rem;
+    line-height: 22px;
+    min-height: 22px; }
+  /* line 61, ../sass/forms/_elems.scss */
+  .form .form-row > .label {
+    float: left;
+    min-width: 120px;
+    position: relative;
+    white-space: nowrap;
+    width: 30%; }
+  /* line 71, ../sass/forms/_elems.scss */
+  .form .form-row .value {
+    color: #cccccc; }
+  /* line 75, ../sass/forms/_elems.scss */
+  .form .form-row .controls {
+    float: left;
+    position: relative;
+    width: 69.9%; }
+    /* line 82, ../sass/forms/_elems.scss */
+    .form .form-row .controls .l-composite-control.l-checkbox {
+      display: inline-block;
+      line-height: 14px;
+      margin-right: 5px; }
+    /* line 91, ../sass/forms/_elems.scss */
+    .form .form-row .controls .l-med input[type="text"] {
+      width: 200px; }
+    /* line 95, ../sass/forms/_elems.scss */
+    .form .form-row .controls .l-small input[type="text"] {
+      width: 50px; }
+    /* line 99, ../sass/forms/_elems.scss */
+    .form .form-row .controls .l-numeric input[type="text"] {
+      text-align: right; }
+    /* line 103, ../sass/forms/_elems.scss */
+    .form .form-row .controls .select {
+      margin-right: 5px; }
+  /* line 108, ../sass/forms/_elems.scss */
+  .form .form-row .field-hints {
+    color: #666666; }
+  /* line 112, ../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 123, ../sass/forms/_elems.scss */
+    .form .form-row .selector-list .wrapper {
+      overflow-y: auto;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      bottom: 5px;
+      left: 5px; }
+
+/* line 137, ../sass/forms/_elems.scss */
+label.form-control.checkbox input {
+  margin-right: 5px;
+  vertical-align: top; }
+
+/* line 143, ../sass/forms/_elems.scss */
+.hint,
+.s-hint {
+  font-size: 0.9em; }
+
+/* line 148, ../sass/forms/_elems.scss */
+.l-result {
+  display: inline-block;
+  min-width: 32px;
+  min-height: 32px;
+  position: relative;
+  vertical-align: top; }
+  /* line 155, ../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 167, ../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 170, ../sass/_mixins.scss */
+    .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
+      color: #878787; }
+  /* line 175, ../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

@@ -0,0 +1,452 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** STYLE */
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+/************************** MOBILE TREE MENU DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+/*****************************************************************************
+ * 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/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 167, ../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 170, ../sass/_mixins.scss */
+      .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
+        color: #949494; }
+    /* line 175, ../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: deepskyblue !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: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+    /* line 63, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: auto;
+      height: 20px;
+      line-height: 20px;
+      text-align: right;
+      z-index: 5; }
+      /* line 69, ../sass/items/_item.scss */
+      .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
+        width: auto; }
+        /* line 71, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
+          margin-left: 3px; }
+          /* line 73, ../sass/items/_item.scss */
+          .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
+            color: #49dedb; }
+    /* line 79, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: auto;
+      line-height: 110%; }
+    /* line 85, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .item-main {
+      line-height: 160px;
+      z-index: 1; }
+      /* line 91, ../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;
+        text-align: center;
+        font-size: 96.9px;
+        line-height: 102px;
+        bottom: auto;
+        height: 102px;
+        top: 30px; }
+        /* line 103, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+          color: #49dedb;
+          height: auto;
+          line-height: 100%;
+          position: absolute;
+          font-size: 0.3em;
+          left: 0px;
+          bottom: 10px;
+          z-index: 2; }
+      /* line 116, ../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 128, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #cccccc; }
+    /* line 133, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .details {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 0.8em; }
+    /* line 137, ../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 167, ../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 170, ../sass/_mixins.scss */
+        .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
+          color: #75ddff; }
+      /* line 175, ../sass/_mixins.scss */
+      .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
+        color: #52d4ff; }
+      /* line 142, ../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 143, ../sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .item-main .item-open {
+        color: #80dfff; }
+      /* line 144, ../sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .title {
+        color: white; }
+      /* line 146, ../sass/items/_item.scss */
+      .items-holder .item.grid-item.selected:hover .item-main .item-type {
+        color: white !important; }
+
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%; }
+    /* line 33, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item > .contents {
+      top: 0px;
+      right: 10px;
+      bottom: 0px;
+      left: 10px; }
+    /* line 37, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: 0 !important;
+      left: auto !important;
+      right: 20px !important;
+      width: 40px !important;
+      height: auto !important;
+      text-align: right; }
+    /* line 44, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      left: 40px;
+      right: 60px; }
+    /* line 52, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      line-height: 100%;
+      text-align: left;
+      width: 30px; }
+      /* line 61, ../sass/mobile/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+        bottom: 0; }
+    /* line 65, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: block;
+      opacity: 1;
+      font-size: 1em;
+      width: auto; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    height: 50px; }
+    /* line 78, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 50px !important; }
+    /* line 82, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 7px;
+      bottom: auto;
+      height: 35px; }
+    /* line 87, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      top: 10px;
+      bottom: auto;
+      height: 30px; }
+    /* line 90, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 50px; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    height: 66px; }
+    /* line 100, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 66px !important; }
+    /* line 104, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 15px;
+      bottom: auto;
+      height: 35px; }
+    /* line 109, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      top: 18px;
+      bottom: auto;
+      height: 30px; }
+    /* line 112, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 66px; } }

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

@@ -0,0 +1,120 @@
+/*****************************************************************************
+ * 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

@@ -0,0 +1,385 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** STYLE */
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+/************************** MOBILE TREE MENU DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+/*****************************************************************************
+ * 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 23, ../sass/tree/_tree.scss */
+ul.tree {
+  margin: 0;
+  padding: 0; }
+  /* line 314, ../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 29, ../sass/tree/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 15px; }
+
+/* line 34, ../sass/tree/_tree.scss */
+.tree-item,
+.search-result-item {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -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.8rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-bottom: 3px;
+  position: relative; }
+  /* line 47, ../sass/tree/_tree.scss */
+  .tree-item .view-control,
+  .search-result-item .view-control {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 0.75em;
+    width: 10px; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 55, ../sass/tree/_tree.scss */
+      .tree-item .view-control:hover,
+      .search-result-item .view-control:hover {
+        color: #ffc700; } }
+  /* line 61, ../sass/tree/_tree.scss */
+  .tree-item .label,
+  .search-result-item .label {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    line-height: 1.5rem; }
+    /* line 69, ../sass/tree/_tree.scss */
+    .tree-item .label .type-icon,
+    .search-result-item .label .type-icon {
+      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+      font-size: 16px;
+      color: #0099cc;
+      left: 5px;
+      position: absolute;
+      top: 4px;
+      bottom: auto;
+      height: 16px;
+      line-height: 100%;
+      right: auto;
+      width: 16px; }
+      /* line 82, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        text-shadow: black 0 1px 2px;
+        position: absolute;
+        z-index: 2; }
+      /* line 88, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-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 94, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-link {
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        left: -3px;
+        bottom: 0px; }
+    /* line 102, ../sass/tree/_tree.scss */
+    .tree-item .label .title-label,
+    .search-result-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 113, ../sass/tree/_tree.scss */
+  .tree-item.loading,
+  .search-result-item.loading {
+    pointer-events: none; }
+    /* line 115, ../sass/tree/_tree.scss */
+    .tree-item.loading .label,
+    .search-result-item.loading .label {
+      opacity: 0.5; }
+      /* line 117, ../sass/tree/_tree.scss */
+      .tree-item.loading .label .title-label,
+      .search-result-item.loading .label .title-label {
+        font-style: italic; }
+    /* line 121, ../sass/tree/_tree.scss */
+    .tree-item.loading .wait-spinner,
+    .search-result-item.loading .wait-spinner {
+      margin-left: 14px; }
+  /* line 126, ../sass/tree/_tree.scss */
+  .tree-item.selected,
+  .search-result-item.selected {
+    background: #005177;
+    color: #fff; }
+    /* line 130, ../sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: #0099cc; }
+    /* line 133, ../sass/tree/_tree.scss */
+    .tree-item.selected .label .type-icon,
+    .search-result-item.selected .label .type-icon {
+      color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 141, ../sass/tree/_tree.scss */
+    .tree-item:not(.selected):hover,
+    .search-result-item:not(.selected):hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #cccccc; }
+      /* line 144, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .context-trigger,
+      .search-result-item:not(.selected):hover .context-trigger {
+        display: block; }
+      /* line 147, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .icon,
+      .search-result-item:not(.selected):hover .icon {
+        color: #33ccff; } }
+  /* line 154, ../sass/tree/_tree.scss */
+  .tree-item:not(.loading),
+  .search-result-item:not(.loading) {
+    cursor: pointer; }
+  /* line 158, ../sass/tree/_tree.scss */
+  .tree-item .context-trigger,
+  .search-result-item .context-trigger {
+    top: -1px;
+    position: absolute;
+    right: 3px; }
+    /* line 164, ../sass/tree/_tree.scss */
+    .tree-item .context-trigger .invoke-menu,
+    .search-result-item .context-trigger .invoke-menu {
+      font-size: 0.75em;
+      height: 0.9rem;
+      line-height: 0.9rem; }
+
+/* line 173, ../sass/tree/_tree.scss */
+.tree-item .label {
+  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.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 27, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; }
+
+  /* line 31, ../sass/mobile/_tree.scss */
+  .tree-item,
+  .search-result-item {
+    height: 35px;
+    line-height: 35px;
+    margin-bottom: 0px; }
+    /* line 36, ../sass/mobile/_tree.scss */
+    .tree-item .view-control,
+    .search-result-item .view-control {
+      position: absolute;
+      font-size: 1.1em;
+      right: 0px;
+      width: 30px;
+      text-align: center; }
+    /* line 45, ../sass/mobile/_tree.scss */
+    .tree-item .label,
+    .search-result-item .label {
+      left: 0;
+      right: 35px;
+      line-height: 35px; }
+      /* line 50, ../sass/mobile/_tree.scss */
+      .tree-item .label .type-icon,
+      .search-result-item .label .type-icon {
+        top: 9px;
+        bottom: auto;
+        height: 16px; } }

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

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

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

@@ -55,7 +55,7 @@
 <glyph unicode="&#x7a;" glyph-name="icon-fullscreen-expand" d="M192.344 128c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 767.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 960h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 128.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
 <glyph unicode="&#x7b;" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
 <glyph unicode="&#x7d;" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
-<glyph unicode="&#xe0;" glyph-name="icon-box" d="M0 960h1024v-1024h-1024v1024z" />
+<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="&#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,9 +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="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="&#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="&#xe607;" glyph-name="icon-x-in-circle-heavy" 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" 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-384v128h128v128h-128v128h320v-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: $colorAboutLink;
+		color: #84b3ff;
 	}
 	.s-description,
 	.s-info {
@@ -89,7 +89,7 @@
 				border-top: none;
 			}
 			em {
-				color: pushBack($colorBodyFg, 20%);
+				color: darken($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 .s-btn.change-column-width {
+		.l-autoflow-header .l-btn.change-column-width {
 			@include trans-prop-nice-fade(50ms);
 			opacity: 1;
 		}
@@ -45,7 +45,7 @@
 		span {
 			vertical-align: middle;
 		}
-		.s-btn.change-column-width {
+		.l-btn.change-column-width {
 			@include trans-prop-nice-fade(500ms);
 			opacity: 0;
 		}

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

@@ -28,8 +28,66 @@ $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);
+$colorFormLines: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.2);
+// 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;
@@ -47,7 +105,7 @@ $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 // Overlay
 $ovrTopBarH: 60px;
-$ovrFooterH: 30px;
+$ovrFooterH: 40px;
 $overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
@@ -59,12 +117,15 @@ $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: 25px;
+$imageMainControlBarH: 22px;
 $imageThumbsD: 120px;
 $imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;
@@ -94,14 +155,14 @@ $formTBPad: $interiorMargin;
 $formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
+$scrollbarTrackSize: 10px;
+$scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
-$btnFrameH: 16px;
 
 /************************** PATHS */
-// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
-$dirCommonRes: '../../../../general/res/';
-$dirImgs: $dirCommonRes + 'images/';
+$dirImgs: '../images/'; // Relative to platform/css/ directory
 
 /************************** TIMINGS */
 $controlFadeMs: 100ms;
+

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

@@ -52,7 +52,7 @@ a.disabled {
 }
 
 @include keyframes(pulse) {
-	0%   { opacity: 0.5; }
+	0%   { opacity: 0.2; }
 	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

@@ -0,0 +1,38 @@
+/*****************************************************************************
+ * 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,26 +19,6 @@
  * 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;
@@ -62,6 +42,7 @@ body, html {
 }
 
 em {
+//	color: rgba(white, 0.2); Removed this as a global setting
 	font-style: normal;
 }
 
@@ -113,7 +94,7 @@ mct-container {
 
 .codehilite {
 	@extend .code;
-	background-color: rgba($colorBodyFg, 0.1);
+	background-color: rgba(#fff, 0.1);
 	padding: 1em;
 }
 
@@ -129,6 +110,10 @@ mct-container {
 	margin: 0;
 }
 
+.colorKey {
+	color: $colorKey;
+}
+
 .ds {
 	@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
 }
@@ -138,6 +123,13 @@ 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,8 +29,10 @@
 }
 
 .ui-symbol {
+	$c: $colorKey;
 	&.icon {
-		color: $colorKey;
+		color: $c;
+		@include txtShdwSubtle();
 		&.alert {
 			color: $colorAlert;
 			&:hover {
@@ -52,7 +54,7 @@
 	display: inline-block;
 }
 
-.s-menu .invoke-menu,
+.btn-menu .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }

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

@@ -0,0 +1,20 @@
+// 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,26 +1,52 @@
-@mixin limit($bg, $ic, $glyph) {
-	background: $bg !important;
-	//color: $fg !important;
+@mixin limit($c, $glyph) {
+	background: $c;
 	&:before {
-		//@include pulse(1000ms);
-		color: $ic;
+		//@include pulse(500ms);
+		color: lighten($c, 30%);
 		content: $glyph;
 	}
 }
 
-[class*="s-limit"] {
-	//white-space: nowrap;
+/*.s-limit-upr,
+.s-limit-lwr {
+	$a: 0.5;
+	$l: 30%;
+	white-space: nowrap;
 	&:before {
 		display: inline-block;
 		font-family: symbolsfont;
-		font-size: 0.75em;
+		font-size: 0.85em;
 		font-style: normal !important;
 		margin-right: $interiorMarginSm;
 		vertical-align: middle;
 	}
 }
 
-.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"); };
+.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;
+	&:before {
+		display: inline-block;
+		font-family: symbolsfont;
+		font-size: 0.85em;
+		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"); };

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

@@ -19,64 +19,63 @@
  * 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 "mobile/mixins";
+
 @import "effects";
 @import "global";
+@import "fonts";
+@import "user-environ/layout";
+@import "mobile/layout";
+@import "fixed-position";
 @import "about";
 @import "text";
 @import "icons";
 @import "limits";
 @import "data-status";
-@import "helpers/bubbles";
-@import "helpers/splitter";
-@import "helpers/wait-spinner";
-@import "messages";
-@import "properties";
-
-/********************************* CONTROLS */
+@import "lists/tabular";
 @import "controls/breadcrumb";
 @import "controls/buttons";
 @import "controls/color-palette";
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-@import "controls/time-controller";
 @import "mobile/controls/menus";
-
-/********************************* FORMS */
+@import "controls/time-controller";
+@import "edit/editor";
+@import "features/imagery";
+@import "features/time-display";
 @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";
-
-/********************************* USER ENVIRON */
-@import "user-environ/layout";
-@import "mobile/layout";
-@import "edit/editor";
+@import "plots/plots-main";
 @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";
-
-/********************************* VIEWS */
-@import "fixed-position";
-@import "lists/tabular";
-@import "plots/plots-main";
+@import "helpers/bubbles";
+@import "helpers/splitter";
+@import "helpers/wait-spinner";
+@import "properties";
+@import "autoflow";
 @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

@@ -145,14 +145,46 @@
     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;
+    }
+}
+
 @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) {
@@ -179,35 +211,38 @@
         }
     }
     &:not(.disabled):hover:before {
-        @include trans-prop-nice("border-color", 25ms);
-        border-color: $colorGrippyInteriorHover;
+        @include trans-prop-nice("border-color", 50ms);
+        border-color: $colorKey;
     }
 }
 
-@mixin boxIncised($sVal: 0.6, $inset: 5px) {
-    @include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
+@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 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) {
-	@if $sVal != 'none' {
-		@include box-shadow(rgba(black, $sVal) 0 1px 2px);
-	}
+    @include box-shadow(rgba(black, $sVal) 0 1px 2px);
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
-	@if $sVal != 'none' {
-		@include box-shadow(rgba(black, $sVal) 0 3px 10px);
-	}
+    @include box-shadow(rgba(black, $sVal) 0 3px 10px);
 }
 
 @mixin outerGlow($color: #fff, $sVal: 0.3) {
@@ -222,94 +257,34 @@
     @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) {
-	@if $sVal != 'none' {
-	    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
-	}
+    @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.4) 0 1px 3px);
-	background: $bg;
-	border: none;
-	color: $fg;
-	outline: none;
-	&.error {
-		background: rgba(red, 0.5);
-	}
+    @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);
+    border: none;
+    //border-bottom: 1px solid rgba(#fff, 0.1);
+    color: lighten($fg, 20%);
+    outline: none;
+    &.error {
+        background: rgba(red, 0.5);
+    }
 }
 
 @mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: 0 $interiorMarginSm;
-}
-
-@mixin contextArrow() {
-	@include text-shadow(none);
-	content: '\76';
-	display: inline-block;
-	font-family: 'symbolsfont';
-	margin-left: $interiorMarginSm;
-	vertical-align: top;
+    @include input-base($bg, $fg);
+    padding: 0 $interiorMarginSm;
 }
 
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
@@ -323,6 +298,16 @@
     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;
@@ -393,7 +378,7 @@
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
-    @include box-sizing(border-box);
+    @inlude box-sizing(border-box);
     border: 1px dotted rgba($c, $a);
 }
 
@@ -417,4 +402,4 @@
 @mixin s-stale($a: 0.5) {
     color: rgba($colorTelemFresh, $a) !important;
     font-style: italic;
-}
+}

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

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

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

@@ -22,102 +22,140 @@
 $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;
 
+/******* LAYOUT AND SIZING */
+.btn,
+.l-btn {
+	@include user-select(none);
+	//line-height: 1.5em; // Was 1.25em
+	line-height: 150%;
+	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 {
-    @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;
+	$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";
+			}
+		}
+	}
+}
 
-    .icon {
-        font-size: 0.8rem;
-        color: $colorKey;
-    }
-
-    .title-label {
-        vertical-align: top;
-    }
-
-	&.lg {
-		font-size: 1rem;
+.icon-btn,
+.s-icon-btn {
+	@extend .s-btn;
+	font-size: 1em;
+	.icon {
+		color: $colorKey;
+	}
+	&.paused {
+		.icon {
+			color: $colorPausedFg;
+		}
 	}
 
-    &.sm {
-        padding: 0 $pad / $baseRatio;
-    }
+	&:not(.disabled) {
+		&:not(.paused) {
+			&:hover {
+				.icon {
+					color: lighten($colorKey, $ltGamma);
+				}
+			}
+		}
+	}
 
-    &.vsm {
-        padding: 0 ($pad / $baseRatio) / 2;
-    }
+	&.labeled {
+		padding: 0 $pad/2;
+		.icon {
+			//font-size: 1.5em;
+		}
+		.title-label {
+			margin-left: $interiorMargin;
+		}
+	}
 
-    &.major {
-        $bg: $colorBtnMajorBg;
-        $hc: lighten($bg, 10%);
-        @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
-    }
+	&.pause-play {
+/*		&.paused {
+			.icon {
+				@include pulse(500ms);
+			}
+		}*/
+		.icon:before {
+			content:"\0000F1";
+		}
+	}
 
-    &: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";
-        }
-    }
-}
-
-.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
-
-    .s-btn {
-        @include border-radius(0);
-        margin-left: 1px;
-    }
-
-    .first {
-        .s-btn {
-            @include border-left-radius($controlCr);
-            margin-left: 0;
-        }
-    }
-
-    .last {
-        .s-btn {
-            @include border-right-radius($controlCr);
-        }
-    }
-}
-
-.paused {
-    &:not(.s-btn) {
-        border-color: $colorPausedBg !important;
-        color: $colorPausedBg !important;
-    }
+	&.show-thumbs {
+		.icon:before {
+			content:"\000039";
+		}
+	}
 }
 
+/*********************************** 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,6 +100,22 @@
 	}
 }
 
+.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 {
@@ -137,8 +153,44 @@
 	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,
+.object-browse-bar .view-switcher,
+.top-bar .buttons-main .btn,
+.top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
+.tool-bar .btn,
+.tool-bar .t-btn {
+	$h: $btnToolbarH;
+	display: inline-block;
+	font-size: $h * $btnFontSizeToH;
+	line-height: 200%;
+	vertical-align: top;
+}
+
 label.checkbox.custom {
-	$bg: pullForward($colorBodyBg, 10%);
+	$bg: lighten($colorBodyBg, $ltGamma);
 	$d: $formRowCtrlsH;
 	cursor: pointer;
 	display: inline-block;
@@ -155,8 +207,7 @@ label.checkbox.custom {
 		&:before {
 			@include border-radius($basicCr * .75);
 			background: $bg;
-			//border-bottom: 1px solid lighten($bg, 10%);
-			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
+			border-bottom: 1px solid lighten($bg, 10%);
 			box-sizing: border-box;
 			content: " ";
 			font-family: 'symbolsfont';
@@ -205,7 +256,7 @@ label.checkbox.custom {
 	}
 }
 
-.s-menu label.checkbox.custom {
+.btn-menu label.checkbox.custom {
 	margin-left: 5px;
 }
 
@@ -216,6 +267,84 @@ 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;
@@ -226,6 +355,9 @@ label.checkbox.custom {
 
 .view-switcher {
 	@include trans-prop-nice-fade($controlFadeMs);
+	.type-icon {
+		//vertical-align: top;
+	}
 }
 
 /******************************************************** OBJECT-HEADER */
@@ -241,7 +373,6 @@ label.checkbox.custom {
 	//}
 
 	> .type-icon {
-		color: $colorObjHdrIc;
 		font-size: 120%;
 		float: left;
 		margin-right: $interiorMargin;
@@ -264,9 +395,8 @@ label.checkbox.custom {
 
 	.title-label {
 		//@include test(green, 0.9);
-		color: $colorObjHdrTxt;
 		@include ellipsize();
-		//color: pushBack($colorBodyFg, 40%);
+		color: lighten($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;
@@ -346,29 +476,24 @@ label.checkbox.custom {
 
 @include desktop {
 	::-webkit-scrollbar {
-		@include border-radius(2px);
-		@include box-sizing(border-box);
-		@include box-shadow(inset $scrollbarTrackShdw);
-		background-color: $scrollbarTrackColorBg;
+		@include sliderTrack();
 		height: $scrollbarTrackSize;
 		width: $scrollbarTrackSize;
 	}
 
 	::-webkit-scrollbar-thumb {
-		$bg: $scrollbarThumbColor;
-		$hc: $scrollbarThumbColorHov;
-		$gr: 5%;
-		@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
-		@include border-radius(2px);
+		$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%);
+		@include boxShdwSubtle();
+		border-top: 1px solid lighten($bg, 20%);
 		&:hover {
-			@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
+			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
 		}
 	}
 
 	::-webkit-scrollbar-corner {
-		background: $scrollbarTrackColorBg;
+		background: rgba(#000, 0.4);
 	}
 }

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

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

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

@@ -14,7 +14,7 @@
 	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
-		background-color: $colorPlotBg;
+		background-color: rgba(#fff, 0.1);
 		bottom: $imageMainControlBarH + $interiorMargin;
 	}
 	.l-image-main-controlbar {
@@ -66,7 +66,7 @@
 	}
 	.l-date,
 	.l-time {
-		color: pullForward($colorBodyFg, 20%);
+		color: #fff;
 	}
 	.l-mag {
 		direction: ltr;
@@ -77,7 +77,7 @@
 		}
 	}
 	.s-mag {
-		color: pushBack($colorBodyFg, 20%);
+		color: darken($colorBodyFg, 20%);
 	}
 	.l-btn.show-thumbs {
 		display: none;

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

@@ -0,0 +1,39 @@
+/*****************************************************************************
+ * 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 "mobile/constants";
+@import "mixins";
+@import "forms/mixins";
+@import "mobile/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;
-		.s-btn {
+		.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

@@ -21,7 +21,7 @@
  *****************************************************************************/
 .section-header {
 	@include border-radius($basicCr);
-	background: $colorFormSectionHeader;
+	background: rgba(#fff, 0.1);
 	$c: lighten($colorBodyFg, 20%);
 	//border-bottom: 1px solid rgba(#fff, 0.3);
 	color: $c;
@@ -32,7 +32,6 @@
 
 .form {
 //	@include test(orange);
-	color: $colorFormText;
 	.form-section {
 		position: relative;
 		margin-bottom: $interiorMarginLg * 2;
@@ -70,7 +69,7 @@
 		}
 
 		.value {
-			color: $colorInputFg; //lighten($colorBodyFg, 20%);
+			color: lighten($colorBodyFg, 20%);
 		}
 
 		.controls {
@@ -112,18 +111,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: auto;
+				overflow-y: auto;
 				position: absolute;
 				top: $p;
 				right: $p;
@@ -160,24 +159,4 @@ 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/_mixins.scss

@@ -0,0 +1,52 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+@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);
+	border: none;
+	//border-bottom: 1px solid rgba(#fff, 0.1);
+	color: lighten($fg, 20%);
+	outline: none;
+	&.error {
+		background: rgba(red, 0.5);
+	}
+}
+
+@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	@include input-base($bg, $fg);
+	padding: 0 $interiorMarginSm;
+}
+
+@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	@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%);
+}

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.
  *****************************************************************************/
-.select {
-	@include btnSubtle($colorSelectBg);
+.form-control.select {
+	@include btnSubtle($colorBodyBg);
+	cursor: pointer;
+	display: inline-block;
 	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
-	padding: 0 $interiorMargin;
     overflow: hidden;
 	position: relative;
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
 		background: none;
-		color: $colorSelectFg;
-		cursor: pointer;
+		color: $colorBodyFg;
 		border: none !important;
-		padding: 4px 25px 2px 0px;
+		cursor: pointer;
+		padding: 4px 25px 2px 5px;
         width: 120%;
         option {
             margin: $interiorMargin 0; // Firefox
         }
 	}
 	&:after {
-		@include contextArrow();
-		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
-		//content:"v";
-		//display: block;
-		//font-family: 'symbolsfont';
-		//pointer-events: none;
+		color: $colorKey;
+		content:"v";
+		display: block;
+		font-family: 'symbolsfont';
+		pointer-events: none;
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}

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

@@ -19,42 +19,14 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,window*/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        var LOCAL_STORAGE_WARNING = [
-            "Using browser local storage for persistence.",
-            "Anything you create or change will be visible only",
-            "in this browser on this machine."
-        ].join(' ');
-
-        /**
-         * Indicator for local storage persistence. Provides a minimum
-         * level of feedback indicating that local storage is in use.
-         * @constructor
-         * @memberof platform/persistence/local
-         * @implements {Indicator}
-         */
-        function LocalStorageIndicator() {
+input[type="text"] {
+	@include nice-input();
+    &.filter {
+        &.ng-dirty {
+//            background: red;
         }
-
-        LocalStorageIndicator.prototype.getGlyph = function () {
-            return "D";
-        };
-        LocalStorageIndicator.prototype.getGlyphClass = function () {
-            return 'caution';
-        };
-        LocalStorageIndicator.prototype.getText = function () {
-            return "Off-line storage";
-        };
-        LocalStorageIndicator.prototype.getDescription = function () {
-            return LOCAL_STORAGE_WARNING;
-        };
-
-        return LocalStorageIndicator;
     }
-);
+	&.numeric {
+		text-align: right;
+	}
+}

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

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

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

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

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

@@ -19,28 +19,15 @@
  * 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/border-radius";
+@import "compass/css3/opacity";
 @import "compass/utilities";
 
-@import "../../../../general/res/sass/_mixins";
-@import "../../../../general/res/sass/mobile/mixins";
-@import "mixins";
-
-@import "../../../../general/res/sass/constants";
-@import "../../../../general/res/sass/mobile/constants";
 @import "constants";
-
-@import "../../../../general/res/sass/main"; //
-@import "controls";
-
-
-
-
-
-
-
-
-
+@import "mobile/constants";
+@import "mixins";
+@import "mobile/mixins";
+@import "items/item";
+@import "mobile/item";

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

@@ -29,10 +29,11 @@
         &.grid-item {
             //div { @include test() }
             $d: $ueBrowseGridItemLg;
+            //$iconD: 100px;
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            @include btnSubtle($colorItemBg, $colorItemBgHov, $colorItemFg, $colorItemIc);
+            @include btnSubtle($colorItemBase);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
@@ -43,12 +44,13 @@
             position: relative;
             &:hover .item-main {
 	            .item-type {
-		            color: lighten($colorKey, 10%);
+		            color: lighten($colorKey, 10%) !important;
                     .l-icon-link {
                         color: $colorIconLink;
                     }
                 }
 	            .item-open {
+		            //display: block;
                     opacity: 1;
 	            }
             }
@@ -60,7 +62,6 @@
             .bar {
                 &.top-bar {
                     bottom: auto;
-	                color: $colorItemSubIcons;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
                     text-align: right;
@@ -77,27 +78,31 @@
                 }
                 &.bottom-bar {
                     top: auto;
+                    //height: $ueBrowseGridItemBottomBarH;
                     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: $colorItemIc;
+                    //color: $colorItemFg;
                     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%);
                         color: $colorIconLink;
                         height: auto;
                         line-height: 100%;
@@ -109,30 +114,30 @@
                     }
                 }
                 .item-open {
+                    //@include test();
                     @include trans-prop-nice("opacity", $transTime);
                     opacity: 0;
-	                color: $colorItemOpenIcon;
+	                //display: none;
                     font-size: 3em;
+                    //line-height: $lh;
                     left: auto; width: 50px;
                     pointer-events: none;
                     text-align: right;
                 }
             }
             .title {
-	            @include txtShdw($shdwItemText);
+	            @include txtShdwSubtle();
                 @include ellipsize();
-                color: $colorItemFg;
+                color: lighten($colorBodyFg, 20%);
             }
             .details {
-                @include txtShdw($shdwItemText);
                 @include ellipsize();
-	            color: $colorItemFgDetails;
                 font-size: 0.8em;
             }
 	        &.selected {
-		        $cfg: lighten($colorItemBgSelected, 35%);
+		        $cfg: lighten($colorItemSelected, 35%);
 		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($colorItemBgSelected);
+		        @include btnSubtle($colorItemSelected);
 		        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,22 +29,30 @@ 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 $colorTabHeaderBorder;
+		border-bottom: 1px solid $tabularColorHeaderBorder;
 	}
 	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($colorTabBodyFg, 0.1);
+				background: rgba(white, 0.1);
 			}
 		}
 	}
@@ -56,17 +64,17 @@ table {
 		&.group-header {
 			td, .td {
 				$d: 5%;
-				background-color: pushBack($colorTabHeaderBg, $d);
-				color: pushBack($colorTabHeaderFg, $d);
+				background-color: darken($tabularColorHeaderBg, $d);
+				color: darken($tabularColorHeaderFg, $d);
 			}
 		}
 		th, .th, td, .td {
 			display: table-cell;
 		}
 		th, .th {
-			background-color: $colorTabHeaderBg;
-			border-left: 1px solid $colorTabHeaderBorder;
-			color: $colorTabHeaderFg;
+			background-color: $tabularColorHeaderBg;
+			border-left: 1px solid $tabularColorHeaderBorder;
+			color: $tabularColorHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
 			white-space: nowrap;
 			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
@@ -91,7 +99,7 @@ table {
 			}
 		}
 		td, .td {
-			border-bottom: 1px solid $colorTabBorder;
+			border-bottom: 1px solid $tabularColorBorder;
 			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;

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

@@ -20,6 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** STYLE */
+$colorMobilePaneLeft: #222;
+
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;

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

@@ -119,7 +119,7 @@
         }
         .view-switcher {
             margin-right: 0 !important;
-            .title-label {
+            .name {
                 // Hide the name in mobile
                 display: none;
             }

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

@@ -47,10 +47,5 @@
             float: none;
             width: 100%;
         }
-	    > .label {
-		    &:after {
-			    float: none;
-		    }
-	    }
     }
 }

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

@@ -25,14 +25,13 @@
 		z-index: 100;
 	}
     .clk-icon.close {
-        font-size: 0.8rem;
         position: absolute;
         top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
 	    z-index: 100;
     }
 	>.holder {
 		$i: 15%;
-		@include containerSubtle($colorOvrBg, $colorOvrFg);
+		@include containerSubtle();
 		@include border-radius($basicCr * 3);
 		color: $colorOvrFg;
 		top: $i; right: $i; bottom: $i; left: $i;
@@ -64,22 +63,8 @@
         //font-size: 1em;
         height: $ovrFooterH;
         text-align: right;
-        .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;
-		     //   }
-	        //}
+        .btn {
+            margin-left: 10px;
         }
     }
     .contents.l-dialog {
@@ -89,10 +74,5 @@
 	    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); // MOVED INTO CONSTANTS
-//$styleHash: dashed; // MOVED INTO CONSTANTS
+$colorHash: rgba(white, 0.3);
+$styleHash: dashed;
 $swatchD: 8px;
 $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
 
 .gl-plot {
-	color: $colorPlotFg;
+	color: $colorBodyFg;
 	font-size: 0.7rem;
 	position: relative;
 	width: 100%;
@@ -74,16 +74,13 @@ $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 $colorPlotAreaBorder;
+		border: 1px solid $colorInteriorBorder;
 	}
 
 	.gl-plot-label,
@@ -133,7 +130,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 	.gl-plot-hash {
 		position: absolute;
-		border: 0 $colorPlotHash $stylePlotHash;
+		border: 0 $colorHash $styleHash;
 		&.hash-v {
 			border-right-width: 1px;
 			height: 100%;
@@ -173,8 +170,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 		height: auto;
 		z-index: 0;
-		&.s-limit-yellow { @include limitBg($colorLimitYellowBg); }
-		&.s-limit-red { @include limitBg($colorLimitRedBg); }
+		&.s-limit-yellow { @include limitBg($colorLimitYellow); }
+		&.s-limit-red { @include limitBg($colorLimitRed); }
 	}
 
 	.l-oob-data {
@@ -216,11 +213,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 			width: $swatchD;
 			//margin-right: $interiorMarginSm;
 		}
-		&[class*='s-limit'] {
-			.title-label {
-				//color: #fff;
-			}
-		}
+		.title-label {}
 	}
 }
 
@@ -228,7 +221,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 {
@@ -241,7 +234,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 .tick {
 	position: absolute;
-	border: 0 $colorPlotHash solid;
+	border: 0 $colorHash 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

@@ -69,7 +69,7 @@
 		.menu-icon {
 			//@include test(#008800);
 			@include box-sizing(border-box);
-			color: $colorInputIcon;
+			color: $colorItemFg;
 			height: $iconD; width: $iconD;
 			line-height: $iconD;
 			position: absolute;
@@ -80,7 +80,7 @@
 		.clear-icon,
 		.menu-icon {
 			cursor: pointer;
-			@include transition(color, .25s);
+			transition: color .25s;
 		}
 
 
@@ -97,7 +97,7 @@
 		}
 
 		.search-icon {
-			//color: $colorItemFg;
+			color: $colorItemFg;
 			left: $interiorMarginSm;
 			transition: visibility .15s, opacity .15s, color .2s;
 			pointer-events: none;
@@ -117,7 +117,7 @@
 
 		// Make icon lighten when hovering over search bar
 		.search-input:hover + div.search-icon {
-			color: pullForward($colorInputIcon, 10%);
+			color: lighten($colorItemFg, 20%);
 		}
 
 		.clear-icon {
@@ -135,7 +135,7 @@
 			}
 
 			&:hover {
-				color: pullForward($colorInputIcon, 10%);
+				color: lighten($colorItemFg, 20%);
 			}
 		}
 
@@ -146,7 +146,7 @@
 			text-align: right;
 
 			&:hover {
-				color: pullForward($colorInputIcon, 10%);
+				color: lighten($colorItemFg, 20%);
 			}
 		}
 
@@ -191,8 +191,7 @@
 
 
 		.clear-filters-icon {
-			color: $colorInputIcon;
-			opacity: 1;
+			opacity: 0.4;
 			font-size: 0.8em;
 			position: absolute;
 			left: 1px;

platform/commonUI/general/res/sass/theme-espresso.scss

@@ -19,18 +19,7 @@
  * 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/utilities";
-
-@import "../../../../general/res/sass/_mixins";
-@import "../../../../general/res/sass/mobile/mixins";
-@import "mixins";
-
-@import "../../../../general/res/sass/constants";
-@import "../../../../general/res/sass/mobile/constants";
 @import "constants";
-
-@import "../../../../general/res/sass/main";
+@import "mobile/constants";
+@import "themes/theme-espresso";
+@import "main";

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

@@ -0,0 +1,24 @@
+/*****************************************************************************
+ * 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 */
+//$colorBodyBg: #fff;
+//$colorBodyFg: #666;

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

@@ -0,0 +1,31 @@
+/*****************************************************************************
+ * 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/utilities";
+
+@import "constants";
+@import "mobile/constants";
+@import "mixins";
+@import "mobile/mixins";
+@import "tree/tree";
+@import "mobile/tree";

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

@@ -22,7 +22,6 @@
 
 ul.tree {
 	@include menuUlReset();
-	@include user-select(none);
 	li {
 		display: block;
 		position: relative;
@@ -46,7 +45,6 @@ ul.tree {
 	position: relative;
 
 	.view-control {
-		color: $colorItemTreeVC;
 		display: inline-block;
 		margin-left: $interiorMargin;
 		font-size: 0.75em;
@@ -55,7 +53,7 @@ ul.tree {
 		// NOTE: [Mobile] Removed Hover on Mobile
 		@include desktop {
 			&:hover {
-				color: $colorItemTreeVCHover !important;
+				color: $colorItemTreeVCHover;
 			}
 		}
 	}
@@ -71,7 +69,7 @@ ul.tree {
 		.type-icon {
 			//@include absPosDefault(0, false);
 			$d: $treeTypeIconH; // 16px is crisp size
-			@include txtShdwSubtle($shdwItemTreeIcon);
+			@include txtShdwSubtle(0.6);
 			font-size: $d;
 			color: $colorItemTreeIcon;
 			left: $interiorMargin;
@@ -83,7 +81,7 @@ ul.tree {
 			.icon {
 				&.l-icon-link,
 				&.l-icon-alert {
-					//@include txtShdw($shdwItemTreeIcon);
+					@include txtShdwSubtle(1);
 					position: absolute;
 					z-index: 2;
 				}
@@ -126,13 +124,14 @@ ul.tree {
 	}
 
 	&.selected {
-		background: $colorItemTreeSelectedBg;
-		color: $colorItemTreeSelectedFg;
+		$c: #fff;
+		background: $colorKeySelectedBg;
+		color: $c;
 		.view-control {
-			color: $colorItemTreeSelectedVC;
+			color: $colorItemTreeIcon;
 		}
 		.label .type-icon {
-			color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
+			color: #fff; //$colorItemTreeIconHover;
 		}
 	}
 
@@ -140,11 +139,11 @@ ul.tree {
 		// 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;
-				//}
+				background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
+				color: lighten($colorBodyFg, 20%);
+				.context-trigger {
+					display: block;
+				}
 				.icon {
 					color: $colorItemTreeIconHover;
 				}

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: $interiorMarginLg;
+	margin-right: $interiorMargin * 2;
 	.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,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .frame {
-	$ohH: $btnFrameH;
+	$ohH: 16px;
 	$bc: $colorInteriorBorder;
 	&.child-frame.panel {
 		background: $colorBodyBg;
@@ -46,21 +46,8 @@
 		left: $myM;
 	}
 	&.frame-template {
-		.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 {
+			line-height: $ohH;
 			z-index: 10;
 		}
 		// Hide the view switcher by default when it's in an element that's in a frame context
@@ -77,7 +64,7 @@
 	}
 	.view-switcher {
 		// Hide the name when the view switcher is in a frame context
-		.title-label {
+		.name {
 			display: none;
 		}
 	}

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

@@ -216,17 +216,16 @@
 .edit-mode {
     .split-layout {
         .split-pane-component.pane.right {
-            width: 15%;
-            .pane.bottom {
+            //min-width: 150px;
+            //max-width: 50%;
+            .split-pane-component.pane.bottom {
                 min-height: 50px;
-                height: 30%;
+                max-height: 80%;
             }
         }
     }
 }
 
-
-
 .pane {
     position: absolute;
     &.treeview.left {
@@ -299,15 +298,19 @@
 	}
 }
 
-.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 .btn,
+.object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
+.top-bar .buttons-main .btn,
+.top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
+.tool-bar .btn,
+.tool-bar .t-btn {
+    $h: $btnToolbarH;
+    display: inline-block;
+    font-size: $h * $btnFontSizeToH;
+    line-height: 200%;
+    vertical-align: top;
 }
 
 .object-browse-bar,
@@ -341,7 +344,6 @@
 	.left {
 		//@include test(red);
 		@include webkitProp(flex, '1 1 0');
-		padding-right: $interiorMarginLg;
 	}
 }
 

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

@@ -28,9 +28,9 @@
 		line-height: $ueTopBarH;
     }
 	
-/*	.title {
+	.title {
 		color: #fff;
-	}*/
+	}
 	
 	.buttons-main {
 		font-size: 0.8em;

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="s-btn key-{{parameters.action.getMetadata().key}}"
+<a class="btn s-btn s-icon-btn s-very-subtle 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,16 +20,17 @@
  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="l-btn-set" ng-repeat="group in groups">
+
+    <span class="btn-set" ng-repeat="group in groups">
         <span ng-repeat="action in group">
-            <mct-include key="'action-button'"
-                         parameters="{ action: action }"
-                         ng-class="{ first:$index == 0, last:$index == group.length - 1 }"
-	            >
+            <mct-include key="'action-button'" parameters="{ action: action }">
             </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='s-btn major'
+            <a class='btn major'
                ng-click="selector.select(selector.treeModel.selectedObject)">
                 <span class='ui-symbol'>&gt;</span>
             </a>
-            <a class='s-btn major'
+            <a class='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 s-menu"
+	    class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
@@ -33,9 +33,11 @@
 	        ></span>
 
         <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
-        <span class="title-label">{{ngModel.selected.name}}</span>
+        <span class="name">{{ngModel.selected.name}}</span>
+        <span class='ui-symbol invoke-menu'>v</span>
 
-        <div class="menu" ng-show="toggle.isActive()">
+
+        <div class="menu dropdown" 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,8 +22,7 @@
 <div class='status block'
      title="{{ngModel.getDescription()}}"
      ng-click='ngModel.configure()'
-     ng-class='ngModel.getClass()'
-     ng-show="ngModel.getText().length > 0">
+     ng-class='ngModel.getClass()'>
     <span class="ui-symbol status-indicator"
           ng-class='ngModel.getGlyphClass()'>
         {{ngModel.getGlyph()}}
@@ -32,9 +31,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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
-    <div class="menu context-menu">
+    <div class="menu context-menu dropdown">
         <ul>
 
             <li ng-repeat="menuAction in menuActions"