[Frontend] CSS and font updates ONLY from open1423

WTD-1404
CSS has error at this point due to missing $colorIconLink in _constants.scss;
(cherry picked from commit 2a032bf)

platform/commonUI/general/res/fonts/symbols/iconmoon.io-WTD-Symbols-v2.0.json

@@ -1,8 +1,8 @@
 {
 	"metadata": {
 		"name": "WTD Symbols v2.",
-		"lastOpened": 1435266597671,
+		"lastOpened": 1435765696898,
-		"created": 1435266594435
+		"created": 1435764071891
 	},
 	"iconSets": [
 		{
@@ -10,7 +10,7 @@
 				{
 					"order": 1,
 					"id": 75,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
 					"tempChar": ""
@@ -18,7 +18,7 @@
 				{
 					"order": 3,
 					"id": 74,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
 					"tempChar": ""
@@ -26,7 +26,7 @@
 				{
 					"order": 4,
 					"id": 73,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
 					"tempChar": ""
@@ -34,7 +34,7 @@
 				{
 					"order": 5,
 					"id": 72,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
 					"tempChar": ""
@@ -42,7 +42,7 @@
 				{
 					"order": 6,
 					"id": 71,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
 					"tempChar": ""
@@ -50,7 +50,7 @@
 				{
 					"order": 7,
 					"id": 70,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
 					"tempChar": ""
@@ -58,7 +58,7 @@
 				{
 					"order": 8,
 					"id": 69,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
 					"tempChar": ""
@@ -66,7 +66,7 @@
 				{
 					"order": 9,
 					"id": 68,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
 					"tempChar": ""
@@ -74,7 +74,7 @@
 				{
 					"order": 10,
 					"id": 67,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
 					"tempChar": ""
@@ -82,7 +82,7 @@
 				{
 					"order": 11,
 					"id": 66,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
 					"tempChar": ""
@@ -90,7 +90,7 @@
 				{
 					"order": 12,
 					"id": 65,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
 					"tempChar": ""
@@ -98,7 +98,7 @@
 				{
 					"order": 13,
 					"id": 64,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
 					"tempChar": ""
@@ -106,7 +106,7 @@
 				{
 					"order": 14,
 					"id": 63,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
 					"tempChar": ""
@@ -114,7 +114,7 @@
 				{
 					"order": 15,
 					"id": 62,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
 					"tempChar": ""
@@ -122,7 +122,7 @@
 				{
 					"order": 16,
 					"id": 61,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
 					"tempChar": ""
@@ -130,7 +130,7 @@
 				{
 					"order": 2,
 					"id": 60,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
 					"tempChar": ""
@@ -138,7 +138,7 @@
 				{
 					"order": 19,
 					"id": 59,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
 					"tempChar": ""
@@ -146,7 +146,7 @@
 				{
 					"order": 20,
 					"id": 58,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
 					"tempChar": ""
@@ -154,7 +154,7 @@
 				{
 					"order": 21,
 					"id": 57,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
 					"tempChar": ""
@@ -162,7 +162,7 @@
 				{
 					"order": 22,
 					"id": 56,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
 					"tempChar": ""
@@ -170,7 +170,7 @@
 				{
 					"order": 23,
 					"id": 55,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
 					"tempChar": ""
@@ -178,7 +178,7 @@
 				{
 					"order": 24,
 					"id": 54,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
 					"tempChar": ""
@@ -186,7 +186,7 @@
 				{
 					"order": 25,
 					"id": 53,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
 					"tempChar": ""
@@ -194,7 +194,7 @@
 				{
 					"order": 33,
 					"id": 52,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
 					"tempChar": ""
@@ -202,7 +202,7 @@
 				{
 					"order": 26,
 					"id": 51,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
 					"tempChar": ""
@@ -210,7 +210,7 @@
 				{
 					"order": 27,
 					"id": 50,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
 					"tempChar": ""
@@ -218,7 +218,7 @@
 				{
 					"order": 28,
 					"id": 49,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box-round-corners",
 					"tempChar": ""
@@ -226,7 +226,7 @@
 				{
 					"order": 29,
 					"id": 48,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
 					"tempChar": ""
@@ -234,7 +234,7 @@
 				{
 					"order": 30,
 					"id": 47,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
 					"tempChar": ""
@@ -242,7 +242,7 @@
 				{
 					"order": 31,
 					"id": 46,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
 					"tempChar": ""
@@ -250,7 +250,7 @@
 				{
 					"order": 32,
 					"id": 45,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
 					"tempChar": ""
@@ -258,7 +258,7 @@
 				{
 					"order": 17,
 					"id": 44,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
 					"tempChar": ""
@@ -266,7 +266,7 @@
 				{
 					"order": 35,
 					"id": 43,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
 					"tempChar": ""
@@ -274,7 +274,7 @@
 				{
 					"order": 36,
 					"id": 42,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
 					"tempChar": ""
@@ -282,7 +282,7 @@
 				{
 					"order": 37,
 					"id": 41,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
 					"tempChar": ""
@@ -290,7 +290,7 @@
 				{
 					"order": 38,
 					"id": 40,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
 					"tempChar": ""
@@ -298,7 +298,7 @@
 				{
 					"order": 39,
 					"id": 39,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
 					"tempChar": ""
@@ -306,7 +306,7 @@
 				{
 					"order": 40,
 					"id": 38,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
 					"tempChar": ""
@@ -314,7 +314,7 @@
 				{
 					"order": 41,
 					"id": 37,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
 					"tempChar": ""
@@ -322,7 +322,7 @@
 				{
 					"order": 49,
 					"id": 34,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
 					"tempChar": ""
@@ -330,7 +330,7 @@
 				{
 					"order": 42,
 					"id": 33,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
 					"tempChar": ""
@@ -338,7 +338,7 @@
 				{
 					"order": 43,
 					"id": 32,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
 					"tempChar": ""
@@ -346,15 +346,15 @@
 				{
 					"order": 44,
 					"id": 31,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
 					"tempChar": ""
 				},
 				{
-					"order": 45,
+					"order": 75,
 					"id": 30,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
 					"tempChar": ""
@@ -362,7 +362,7 @@
 				{
 					"order": 46,
 					"id": 29,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
 					"tempChar": ""
@@ -370,7 +370,7 @@
 				{
 					"order": 47,
 					"id": 28,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
 					"tempChar": ""
@@ -378,7 +378,7 @@
 				{
 					"order": 48,
 					"id": 27,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
 					"tempChar": ""
@@ -386,7 +386,7 @@
 				{
 					"order": 34,
 					"id": 26,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
 					"tempChar": ""
@@ -394,7 +394,7 @@
 				{
 					"order": 50,
 					"id": 25,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
 					"tempChar": ""
@@ -402,7 +402,7 @@
 				{
 					"order": 51,
 					"id": 24,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
 					"tempChar": ""
@@ -410,7 +410,7 @@
 				{
 					"order": 52,
 					"id": 23,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
 					"tempChar": ""
@@ -418,7 +418,7 @@
 				{
 					"order": 73,
 					"id": 77,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
 					"tempChar": ""
@@ -426,7 +426,7 @@
 				{
 					"order": 53,
 					"id": 22,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
 					"tempChar": ""
@@ -434,7 +434,7 @@
 				{
 					"order": 54,
 					"id": 21,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
 					"tempChar": ""
@@ -442,7 +442,7 @@
 				{
 					"order": 55,
 					"id": 20,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
 					"tempChar": ""
@@ -450,7 +450,7 @@
 				{
 					"order": 56,
 					"id": 19,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
 					"tempChar": ""
@@ -458,7 +458,7 @@
 				{
 					"order": 65,
 					"id": 18,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
 					"tempChar": ""
@@ -466,7 +466,7 @@
 				{
 					"order": 57,
 					"id": 17,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
 					"tempChar": ""
@@ -474,7 +474,7 @@
 				{
 					"order": 58,
 					"id": 16,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
 					"tempChar": ""
@@ -482,7 +482,7 @@
 				{
 					"order": 59,
 					"id": 15,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
 					"tempChar": ""
@@ -490,7 +490,7 @@
 				{
 					"order": 60,
 					"id": 76,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
 					"tempChar": ""
@@ -498,7 +498,7 @@
 				{
 					"order": 61,
 					"id": 11,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
 					"tempChar": ""
@@ -506,7 +506,7 @@
 				{
 					"order": 62,
 					"id": 10,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
 					"tempChar": ""
@@ -514,7 +514,7 @@
 				{
 					"order": 63,
 					"id": 9,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
 					"tempChar": ""
@@ -522,7 +522,7 @@
 				{
 					"order": 64,
 					"id": 8,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
 					"tempChar": ""
@@ -530,7 +530,7 @@
 				{
 					"order": 18,
 					"id": 7,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
 					"tempChar": ""
@@ -538,7 +538,7 @@
 				{
 					"order": 67,
 					"id": 6,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
 					"tempChar": ""
@@ -546,7 +546,7 @@
 				{
 					"order": 68,
 					"id": 5,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
 					"tempChar": ""
@@ -554,7 +554,7 @@
 				{
 					"order": 69,
 					"id": 4,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
 					"tempChar": ""
@@ -562,7 +562,7 @@
 				{
 					"order": 70,
 					"id": 3,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
 					"tempChar": ""
@@ -570,7 +570,7 @@
 				{
 					"order": 71,
 					"id": 2,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
 					"tempChar": ""
@@ -578,7 +578,7 @@
 				{
 					"order": 72,
 					"id": 1,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
 					"tempChar": ""
@@ -586,7 +586,7 @@
 				{
 					"order": 66,
 					"id": 0,
-					"prevSize": 16,
+					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
 					"tempChar": ""
@@ -1297,7 +1297,7 @@
 				{
 					"id": 30,
 					"paths": [
-						"M832 0h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192zM832 640l-128-128-512 320 320-512-128-128h448v448z"
+						"M1024 512l-512-512v307.2l-512 204.8v256h512v256z"
 					],
 					"attrs": [
 						{}

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

@@ -73,7 +73,7 @@
 <glyph unicode="&#xf1;" d="M126 962h256v-1024h-256v1024zM638 962h256v-1024h-256v1024z" />
 <glyph unicode="&#xf2;" d="M640 704v128c0 70.4-57.6 128-128 128h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h128v139.6c0 134.8 109.6 244.4 244.4 244.4h139.6zM896 576h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h384c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128z" />
 <glyph unicode="&#xf3;" d="M293.4 448l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 512h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
-<glyph unicode="&#xf4;" d="M832 960h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM832 320l-128 128-512-320 320 512-128 128h448v-448z" />
+<glyph unicode="&#xf4;" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
 <glyph unicode="&#xf5;" d="M638 898c0 35.4-28.6 64-64 64h-128c-35.4 0-64-28.6-64-64s28.6-64 64-64h128c35.4 0 64 28.6 64 64zM510 834c-247.4 0-448-200.6-448-448s200.6-448 448-448 448 200.6 448 448-200.6 448-448 448zM510 386h-336c0 185.2 150.8 336 336 336v-336z" />
 <glyph unicode="&#xf6;" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
 <glyph unicode="&#xe600;" d="M832 447.6c0 0.2 0 0.2 0 0.4v320c0 105.6-86.4 192-192 192h-448c-105.6 0-192-86.4-192-192v-320c0-105.6 86.4-192 192-192h263.6l-197.2 445.6 573.6-254zM766.8 300.2l193.8 20.4-576.6 255.4 255.4-576.6 20.4 193.8 257-257.2 107.2 107.2z" />

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

@@ -20,68 +20,63 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .triangle {
-    $myColor: $colorKey;
+	$myColor: $colorKey;
-    $mySize: 10px;
+	$mySize: 10px;
-    @include triangle-right($mySize, $myColor);
+	@include triangle-right($mySize, $myColor);
-    &.triangle-down {
+	&.triangle-down {
-        @include triangle-down($mySize, $myColor);
+		@include triangle-down($mySize, $myColor);
-    }
+	}
 }
 
 .ui-symbol {
-    $c: $colorKey;
+	$c: $colorKey;
-    &.icon {
+	&.icon {
-        color: $c;
+		color: $c;
-        @include txtShdwSubtle();
+		@include txtShdwSubtle();
-        &.alert {
+		&.alert {
-            color: $colorAlert;
+			color: $colorAlert;
-            &:hover {
+			&:hover {
-                color: lighten($colorAlert, $ltGamma);
+				color: lighten($colorAlert, $ltGamma);
-            }
+			}
-        }
+		}
-        &.major {
+		&.major {
-            font-size: 1.65em;
+			font-size: 1.65em;
-        }
+		}
-    }
+	}
 }
 
 .bar .icon {
-    display: inline-block;
+	display: inline-block;
 }
 
 .invoke-menu {
-    //@include invokeMenu(); // $colorKey
 	text-shadow: none;
-    display: inline-block;
+	display: inline-block;
-    //font-size: 0.8rem;// Normalizing for new icomoon symbols font
-    //vertical-align: middle;// Normalizing for new icomoon symbols font
 }
 
 .btn-menu .invoke-menu,
 .icon.major .invoke-menu {
-    margin-left: $interiorMarginSm;
+	margin-left: $interiorMarginSm;
 }
 
-/*
-.object-header .type-icon {
-    color: $colorKey;
-	margin-right: $interiorMarginSm;
-}
-*/
-
 .menu .type-icon,
 .tree-item .type-icon,
 .super-menu.menu .type-icon {
-    //font-size: $menuLineH * 0.8; //.93 // Normalizing for new icomoon symbols font
+	position: absolute;
-    //line-height: $menuLineH * 1.13; // Normalizing for new icomoon symbols font
-    position: absolute;
 }
 
 .tree-item .type-icon {
-    font-size: 16px; // 16px is crisp size
+	font-size: 16px; // 16px is crisp size
 }
 
-.super-menu.menu.dropdown .icon {
+.l-icon-link:before {
-	//font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font
+	content: "\f4";
 }
 
+.l-icon-alert {
+	display: none !important; // Remove this when alerts are enabled
+	&:before {
+		color: $colorAlert;
+		content: "!";
+	}
+}

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

@@ -26,6 +26,16 @@
     width: auto; height: auto;
 }
 
+@mixin ancillaryIcon($d, $c) {
+	// Used for small icons used in combination with larger icons,
+	// like the link and alert icons in tree items.
+	color: $c;
+	font-size: $d;
+	line-height: $d;
+	height: $d;
+	width: $d;
+}
+
 @mixin trans-prop-nice($props, $t: 500ms) {
 	@if $t == 0 {
 		@include transition-property(none);

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

@@ -29,6 +29,9 @@
         &.grid-item {
             //div { @include test() }
             $d: $ueBrowseGridItemLg;
+            //$iconD: 100px;
+            $iconMargin: 40px;
+            $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
             @include btnSubtle($colorItemBase);
             box-sizing: border-box;
@@ -39,12 +42,12 @@
             margin-bottom: $interiorMarginSm;
             margin-right: $interiorMarginSm;
             position: relative;
-            .item-main .item-type {
-                @include trans-prop-nice("color", $transTime);
-            }
             &:hover .item-main {
 	            .item-type {
 		            color: $colorKey !important;
+                    .l-icon-link {
+                        color: $colorIconLink;
+                    }
                 }
 	            .item-open {
 		            //display: block;
@@ -63,7 +66,10 @@
 	                .left, .right {
 		                width: auto;
 		                .icon {
-			                margin-left: $interiorMargin;
+			                margin-left: $interiorMarginSm;
+                            &.l-icon-link {
+                                color: $colorIconLink;
+                            }
 		                }
 	                }
                 }
@@ -80,10 +86,28 @@
                 line-height: $lh;
 	            z-index: 1;
                 .item-type {
+                    //@include trans-prop-nice("color", $transTime);
+                    @include absPosDefault($iconMargin, false);
+                    //@include test(red);
                     color: $colorItemFg;
                     text-align: center;
-                    font-size: 6em;
+                    font-size: $iconD * 0.95; //6em;
+                    line-height: $iconD;
+                    bottom: auto;
+                    height: $iconD;
+                    top: $iconMargin - 10;
                     //line-height: $lh;
+                    .l-icon-link {
+                        // When the link icon is in the item-type icon holder
+                        color: darken($colorIconLink, 25%);
+                        height: 36px;
+                        line-height: 36px;
+                        position: absolute;
+                        font-size: 32px;
+                        left: 0px;
+                        bottom: 10px;
+                        z-index: 2;
+                    }
                 }
                 .item-open {
                     //@include test();

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

@@ -19,6 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
 ul.tree {
 	@include menuUlReset();
 	li {
@@ -29,7 +30,7 @@ ul.tree {
 			@include border-radius($basicCr);
 			@include single-transition(background-color, 0.25s);
 			display: block;
-			font-size: 0.80em;
+			font-size: 0.8em;
 			height: $menuLineH;
 			line-height: $menuLineH;
 			margin-bottom: $interiorMarginSm;
@@ -48,34 +49,44 @@ ul.tree {
 
 			.label {
 				display: block;
-//				border: 1px solid rgba(blue, 0.5);
+//				@include test(orange);
 				@include absPosDefault();
-				left: $runningItemW + $interiorMargin;
+				//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
+				left: $runningItemW;
 
 				.type-icon {
-					@include absPosDefault();
+					@include absPosDefault(0, false);
 					@include txtShdwSubtle(0.6);
 					color: $colorItemTreeIcon;
-					.alert {
+					left: $interiorMargin;
-						@include txtShdwSubtle(0.3);
+                    right: auto; width: 1em;
-						background: $colorBodyBg;
+
-						color: $colorAlert;
+					.icon {
-						font-size: 0.7em;
+						&.l-icon-link,
-						margin-top: -3px;
+						&.l-icon-alert {
-						top: 0;
+							@include txtShdwSubtle(1);
-						right: auto;
+							position: absolute;
-						bottom: auto;
+							z-index: 2;
-						left: 9px;
+						}
-						height: auto;
+						&.l-icon-alert {
-						width: auto;
+							$d: 8px;
-						position: absolute;
+							@include ancillaryIcon($d, $colorAlert);
-						z-index: 2;
+							top: 1px;
+							right: -2px;
+						}
+						&.l-icon-link {
+							$d: 8px;
+							@include ancillaryIcon($d, $colorIconLink);
+							left: -3px;
+							bottom: 5px;
+
+						}
 					}
 				}
 				.title-label {
 					@include absPosDefault();
 					display: block;
-					left: $runningItemW + ($interiorMargin);
+					left: $runningItemW + ($interiorMargin * 3);
 	                //right: $treeContextTriggerW + $interiorMargin;
 					overflow: hidden;
 					text-overflow: ellipsis;