Merge pull request #1479 from nasa/open1233a

Review and publish Open MCT Style Guide v1
2017-05-02 12:01:25 -07:00
parent 1f250dd8e7 281559e84b
commit 4e15d8fa1f
35 changed files with 1475 additions and 111 deletions
--- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
@@ -1,8 +1,8 @@
 {
  "metadata": {
    "name": "openmct-symbols-16px",
-    "lastOpened": 1481575258437,
-    "created": 1481575255265
+    "lastOpened": 1487197651675,
+    "created": 1487194069058
  },
  "iconSets": [
    {
@@ -540,13 +540,21 @@
          "code": 921654,
          "tempChar": ""
        },
+        {
+          "order": 120,
+          "id": 105,
+          "name": "icon-reset",
+          "prevSize": 24,
+          "code": 921655,
+          "tempChar": ""
+        },
        {
          "order": 121,
          "id": 103,
          "name": "icon-x-in-circle",
          "prevSize": 24,
          "code": 921656,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 118,
@@ -554,7 +562,7 @@
          "name": "icon-brightness",
          "prevSize": 24,
          "code": 921657,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 119,
@@ -562,15 +570,15 @@
          "name": "icon-contrast",
          "prevSize": 24,
          "code": 921664,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
-          "order": 120,
-          "id": 105,
-          "name": "icon-reset",
+          "order": 122,
+          "id": 106,
+          "name": "icon-expand",
          "prevSize": 24,
-          "code": 921655,
-          "tempChar": ""
+          "code": 921665,
+          "tempChar": ""
        },
        {
          "order": 37,
@@ -578,7 +586,7 @@
          "name": "icon-activity",
          "id": 32,
          "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 36,
@@ -586,7 +594,7 @@
          "name": "icon-activity-mode",
          "id": 31,
          "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 52,
@@ -594,7 +602,7 @@
          "name": "icon-autoflow-tabular",
          "id": 47,
          "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 55,
@@ -602,7 +610,7 @@
          "name": "icon-clock",
          "id": 50,
          "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 58,
@@ -610,7 +618,7 @@
          "name": "icon-database",
          "id": 53,
          "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 57,
@@ -618,7 +626,7 @@
          "name": "icon-database-query",
          "id": 52,
          "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 17,
@@ -626,7 +634,7 @@
          "name": "icon-dataset",
          "id": 12,
          "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 22,
@@ -634,7 +642,7 @@
          "name": "icon-datatable",
          "id": 17,
          "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 59,
@@ -642,7 +650,7 @@
          "name": "icon-dictionary",
          "id": 54,
          "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 62,
@@ -650,7 +658,7 @@
          "name": "icon-folder",
          "id": 57,
          "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 66,
@@ -658,7 +666,7 @@
          "name": "icon-image",
          "id": 61,
          "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 68,
@@ -666,7 +674,7 @@
          "name": "icon-layout",
          "id": 63,
          "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 77,
@@ -674,7 +682,7 @@
          "name": "icon-object",
          "id": 72,
          "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 78,
@@ -682,7 +690,7 @@
          "name": "icon-object-unknown",
          "id": 73,
          "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 79,
@@ -690,7 +698,7 @@
          "name": "icon-packet",
          "id": 74,
          "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 80,
@@ -698,7 +706,7 @@
          "name": "icon-page",
          "id": 75,
          "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 114,
@@ -706,7 +714,7 @@
          "name": "icon-plot-overlay",
          "prevSize": 24,
          "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 113,
@@ -714,7 +722,7 @@
          "name": "icon-plot-stacked",
          "prevSize": 24,
          "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 10,
@@ -722,7 +730,7 @@
          "name": "icon-session",
          "id": 5,
          "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 24,
@@ -730,7 +738,7 @@
          "name": "icon-tabular",
          "id": 19,
          "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 7,
@@ -738,7 +746,7 @@
          "name": "icon-tabular-lad",
          "id": 2,
          "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 6,
@@ -746,7 +754,7 @@
          "name": "icon-tabular-lad-set",
          "id": 1,
          "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 8,
@@ -754,7 +762,7 @@
          "name": "icon-tabular-realtime",
          "id": 3,
          "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 23,
@@ -762,7 +770,7 @@
          "name": "icon-tabular-scrolling",
          "id": 18,
          "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 112,
@@ -770,7 +778,7 @@
          "name": "icon-telemetry",
          "id": 86,
          "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 90,
@@ -778,7 +786,7 @@
          "name": "icon-telemetry-panel",
          "id": 85,
          "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 93,
@@ -786,7 +794,7 @@
          "name": "icon-timeline",
          "id": 88,
          "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 116,
@@ -794,7 +802,7 @@
          "name": "icon-timer-v1.5",
          "prevSize": 24,
          "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 11,
@@ -802,7 +810,7 @@
          "name": "icon-topic",
          "id": 6,
          "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 115,
@@ -810,7 +818,7 @@
          "name": "icon-box-with-dashed-lines",
          "id": 29,
          "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
        }
      ],
      "metadata": {
@@ -2183,6 +2191,30 @@
            ]
          }
        },
+        {
+          "id": 104,
+          "paths": [
+            "M460.8 460.8l-187.8-187.8c57.2-42.8 128-68.2 204.8-68.2 188.2 0 341.6 153.2 341.6 341.4s-153.2 341.2-341.4 341.2c-165 0-302.8-117.6-334.6-273h-138.4c14.2 101.8 61 195.6 135 269.6 90.2 90.2 210.4 140 338 140s247.6-49.8 338-140 140-210.4 140-338-49.8-247.6-140-338-210.4-140-338-140c-111.4 0-217 38-302 107.6l-176-175.6v460.8h460.8z"
+          ],
+          "attrs": [
+            {
+              "fill": "rgb(0, 161, 75)"
+            }
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-reset"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {
+                "f": 1
+              }
+            ]
+          }
+        },
        {
          "paths": [
            "M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM832 704l-128 128-192-192-192 192-128-128 192-192-192-192 128-128 192 192 192-192 128 128-192 192 192 192z"
@@ -2303,26 +2335,31 @@
          }
        },
        {
-          "id": 104,
+          "id": 106,
          "paths": [
-            "M460.8 460.8l-187.8-187.8c57.2-42.8 128-68.2 204.8-68.2 188.2 0 341.6 153.2 341.6 341.4s-153.2 341.2-341.4 341.2c-165 0-302.8-117.6-334.6-273h-138.4c14.2 101.8 61 195.6 135 269.6 90.2 90.2 210.4 140 338 140s247.6-49.8 338-140 140-210.4 140-338-49.8-247.6-140-338-210.4-140-338-140c-111.4 0-217 38-302 107.6l-176-175.6v460.8h460.8z"
+            "M960 0c0 0 0 0 0 0h-320v128h165.4l-210.6 210.8c-25 25-25 65.6 0 90.6 12.4 12.4 28.8 18.8 45.2 18.8s32.8-6.2 45.2-18.8l210.8-210.8v165.4h128v-384h-64z",
+            "M896 805.4l-210.8-210.6c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l210.8 210.6h-165.4v128h384v-384h-128v165.4z",
+            "M218.6 128h165.4v-128h-320c0 0 0 0 0 0h-64v384h128v-165.4l210.8 210.8c12.4 12.4 28.8 18.8 45.2 18.8s32.8-6.2 45.2-18.8c25-25 25-65.6 0-90.6l-210.6-210.8z",
+            "M338.8 594.8l-210.8 210.6v-165.4h-128v384h384v-128h-165.4l210.8-210.8c25-25 25-65.6 0-90.6-25.2-24.8-65.6-24.8-90.6 0.2z"
          ],
          "attrs": [
-            {
-              "fill": "rgb(0, 161, 75)"
-            }
+            {},
+            {},
+            {},
+            {}
+          ],
+          "grid": 16,
+          "tags": [
+            "icon-expand"
          ],
          "isMulticolor": false,
          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-reset"
-          ],
          "colorPermutations": {
            "1161751207457516161751": [
-              {
-                "f": 1
-              }
+              {},
+              {},
+              {},
+              {}
            ]
          }
        },
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
@@ -77,6 +77,7 @@
 <glyph unicode="&#xe1038;" 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="&#xe1039;" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
 <glyph unicode="&#xe1040;" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
+<glyph unicode="&#xe1041;" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
--- a/platform/commonUI/general/res/sass/_about.scss
+++ b/platform/commonUI/general/res/sass/_about.scss
@@ -42,6 +42,27 @@
 	a {
 		color: $colorAboutLink;
 	}
+
+    h1, h2, h3 {
+        color: pullForward($colorBodyFg, 20%);
+        margin-bottom: 1em;
+    }
+
+    h1 {
+        font-size: 2.25em;
+    }
+
+    h2 {
+        border-top: 1px solid $colorInteriorBorder;
+        font-size: 1.5em;
+        margin-top: 2em;
+        padding-top: 1em;
+    }
+
+    h3 {
+        margin-top: 2em;
+    }
+
 	.s-description,
 	.s-button {
 		line-height: 2em;
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -21,7 +21,7 @@
 *****************************************************************************/

 /********************************************* COLUMN LAYOUTS STYLES */
-@mixin cols($totalCols, $span) {
+/*@mixin cols($totalCols, $span) {
    $cw: 100% / $totalCols;
    min-width: (500px / $totalCols) * $span;
    @if ($totalCols != $span) {
@@ -89,7 +89,7 @@
        @include clearfix;
        padding: $interiorMargin 0;
    }
-}
+}*/

 /********************************************* FLEX STYLES */
 .l-flex-row,
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -66,7 +66,7 @@ body, html {
    color: $colorBodyFg;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
-    font-weight: 200;
+    font-weight: normal;
    height: 100%;
    width: 100%;
 }
@@ -76,7 +76,9 @@ em {
 }

 input, textarea {
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
 }

 input[type="text"],
@@ -86,12 +88,14 @@ input[type="search"] {
 }

 h1, h2, h3 {
+    letter-spacing: 0.04em;
    margin: 0;
 }

 h1 {
    font-size: 1.7em;
    font-weight: normal !important;
+    letter-spacing: 0.04em;
    line-height: 120%;
    margin-bottom: 20px;
    margin-top: 0;
--- a/platform/commonUI/general/res/sass/_glyphs.scss
+++ b/platform/commonUI/general/res/sass/_glyphs.scss
@@ -73,10 +73,11 @@ $glyph-icon-thumbs-strip: '\e1033';
 $glyph-icon-two-parts-both: '\e1034';
 $glyph-icon-two-parts-one-only: '\e1035';
 $glyph-icon-resync: '\e1036';
+$glyph-icon-reset: '\e1037';
 $glyph-icon-x-in-circle: '\e1038';
 $glyph-icon-brightness: '\e1039';
 $glyph-icon-contrast: '\e1040';
-$glyph-icon-reset: '\e1037';
+$glyph-icon-expand: '\e1041';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -175,11 +176,12 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
 .icon-thumbs-strip {  @include glyph($glyph-icon-thumbs-strip); }
 .icon-two-parts-both {  @include glyph($glyph-icon-two-parts-both); }
 .icon-two-parts-one-only {  @include glyph($glyph-icon-two-parts-one-only); }
+.icon-resync {  @include glyph($glyph-icon-resync); }
+.icon-reset {  @include glyph($glyph-icon-reset); }
 .icon-x-in-circle {  @include glyph($glyph-icon-x-in-circle); }
 .icon-brightness {  @include glyph($glyph-icon-brightness); }
 .icon-contrast {  @include glyph($glyph-icon-contrast); }
-.icon-reset {  @include glyph($glyph-icon-reset); }
-.icon-resync {  @include glyph($glyph-icon-resync); }
+.icon-expand {  @include glyph($glyph-icon-expand); }
 .icon-activity {  @include glyph($glyph-icon-activity); }
 .icon-activity-mode {  @include glyph($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyph($glyph-icon-autoflow-tabular); }
--- a/platform/commonUI/general/res/sass/_text.scss
+++ b/platform/commonUI/general/res/sass/_text.scss
@@ -37,20 +37,13 @@
 	}

 	h1, h2, h3 {
-		color: pullForward($colorBodyFg, 20%);
-		font-weight: normal !important;
-		margin-bottom: 1em;
-	}
-
-	h2 {
-		border-top: 1px solid $colorInteriorBorder;
-		font-size: 1.5em;
-		margin-top: 2em;
-		padding-top: 1em;
-	}
-
-	h3 {
-		margin-top: 2em;
-	}
+        font-weight: 200 !important;
+    }

+    table {
+        td { font-size: inherit; }
+        tr.header {
+            background-color: rgba($colorBodyFg, 0.2);
+        }
+    }
 }
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -212,6 +212,16 @@ label.form-control.checkbox {
    }
 }

+/******************************************************** PLACEHOLDERS */
+input[type="text"],
+input[type="search"],
+textarea {
+    @include placeholder {
+        color: rgba($colorInputFg, 0.4);
+        font-style: italic;
+    }
+}
+
 /******************************************************** INPUTS */
 input[type="text"],
 input[type="search"] {
@@ -221,11 +231,21 @@ input[type="search"] {
    }
 }

-.l-input-lg input[type="text"] {  width: 100% !important; }
-.l-input-med input[type="text"] { width: 200px !important; }
-.l-input-sm input[type="text"] {  width: 50px !important; }
-.l-textarea-sm textarea { position: relative; height: 50px; }
-.l-numeric input[type="text"] { text-align: right; }
+.l-input-lg input[type="text"],
+input[type="text"].lg {  width: 100% !important; }
+.l-input-med input[type="text"],
+input[type="text"].med { width: 200px !important; }
+.l-input-sm input[type="text"],
+input[type="text"].sm {  width: 50px !important; }
+.l-numeric input[type="text"],
+input[type="text"].numeric { text-align: right; }
+
+.l-textarea-sm textarea,
+textarea.sm { position: relative; height: 50px; }
+.l-textarea-med textarea,
+textarea.med { position: relative; height: 150px; }
+.l-textarea-lg textarea,
+textarea.lg { position: relative; height: 300px; }

 .input-labeled {
    // Used in toolbar
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -26,20 +26,20 @@
 		top: 0;
 	}
    .item {
+        $d: $ueBrowseGridItemLg;
+        $iconMargin: 40px;
+        $iconD: ($d - ($iconMargin * 2)) * 0.85;
+        box-sizing: border-box;
+        float: left;
+        height: $d;
+        width: $d;
+        margin-bottom: $interiorMarginSm;
+        margin-right: $interiorMarginSm;
+        position: relative;
        &.grid-item {
-            $d: $ueBrowseGridItemLg;
-            $iconMargin: 40px;
-            $iconD: ($d - ($iconMargin * 2)) * 0.85;
            $transTime: 200ms;
            @include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
-            box-sizing: border-box;
            cursor: pointer;
-            float: left;
-            height: $d;
-            width: $d;
-            margin-bottom: $interiorMarginSm;
-            margin-right: $interiorMarginSm;
-            position: relative;
            &:hover .item-main {
 	            .item-type {
 		            color: lighten($colorKey, 10%);
@@ -51,7 +51,7 @@
                    opacity: 1;
 	            }
            }
-	        .contents {
+	        .abs.contents {
                $m: $interiorMarginLg;
 		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -32,20 +32,6 @@
 	height: 100%;
    min-height: $plotMinH;

-    .gl-plot-local-controls {
-        @include trans-prop-nice(opacity, 150ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    .gl-plot-display-area,
-    .gl-plot-axis-area {
-        &:hover .gl-plot-local-controls {
-            opacity: 1;
-            pointer-events: inherit;
-        }
-    }
-
    .gl-plot-wrapper-display-area-and-x-axis {
        // Holds the plot area and the X-axis only
        position: absolute;
@@ -55,17 +41,11 @@
        left: nth($plotDisplayArea, 4);

        .gl-plot-display-area {
-            //@include test(yellow);
-            @if $colorPlotBg != none {
-                background-color: $colorPlotBg;
-            }
            position: absolute;
            top: 0;
            right: 0;
            bottom: nth($plotDisplayArea, 3);
            left: 0;
-            cursor: crosshair;
-            border: 1px solid $colorPlotAreaBorder;
        }

        .gl-plot-axis-area.gl-plot-x {
@@ -232,6 +212,29 @@
 	}
 }

+.gl-plot-display-area,
+.plot-display-area,
+.gl-plot-axis-area {
+    .gl-plot-local-controls,
+    .l-local-controls {
+        @include trans-prop-nice(opacity, 150ms);
+        opacity: 0;
+        pointer-events: none;
+    }
+    &:hover .gl-plot-local-controls,
+    &:hover .l-local-controls {
+        opacity: 1;
+        pointer-events: inherit;
+    }
+}
+
+.gl-plot-display-area,
+.plot-display-area {
+    @if $colorPlotBg != none { background-color: $colorPlotBg; }
+    cursor: crosshair;
+    border: 1px solid $colorPlotAreaBorder;
+}
+
 .gl-plot-legend,
 .legend {
 	.plot-legend-item,
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -92,6 +92,7 @@ $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#fff, 0.1);
 $colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
 $colorFieldHint: pullForward($colorBodyFg, 20%);
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -92,6 +92,7 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);