Merging in latest github master; resolved conflicts
This commit is contained in:
Charles Hacskaylo
@@ -1,19 +1,51 @@
|
||||
{
|
||||
"metadata": {
|
||||
"name": "WTD-Symbols-v25",
|
||||
"lastOpened": 1445369623428,
|
||||
"created": 1445367449289
|
||||
"name": "WTD Symbols",
|
||||
"lastOpened": 1446670352108,
|
||||
"created": 1446670349721
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
"selection": [
|
||||
{
|
||||
"order": 116,
|
||||
"id": 93,
|
||||
"prevSize": 32,
|
||||
"code": 58902,
|
||||
"name": "icon-eye-open-no-gleam",
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 115,
|
||||
"id": 92,
|
||||
"prevSize": 32,
|
||||
"code": 58901,
|
||||
"name": "icon-eye-open",
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 110,
|
||||
"id": 91,
|
||||
"prevSize": 32,
|
||||
"code": 58899,
|
||||
"name": "icon-collapse-pane-left",
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 111,
|
||||
"id": 90,
|
||||
"prevSize": 32,
|
||||
"code": 58900,
|
||||
"name": "icon-collapse-pane-right",
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 109,
|
||||
"id": 89,
|
||||
"prevSize": 32,
|
||||
"code": 58898,
|
||||
"name": "icon-save",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 108,
|
||||
@@ -21,7 +53,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58897,
|
||||
"name": "icon-dataset",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 90,
|
||||
@@ -29,7 +61,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58896,
|
||||
"name": "icon-bell",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 91,
|
||||
@@ -37,7 +69,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58889,
|
||||
"name": "icon-hourglass",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 92,
|
||||
@@ -50,7 +82,7 @@
|
||||
58890
|
||||
],
|
||||
"name": "icon-info-v15",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 93,
|
||||
@@ -58,7 +90,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58887,
|
||||
"name": "icon-x-in-circle",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 94,
|
||||
@@ -66,7 +98,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58881,
|
||||
"name": "icon-datatable",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 95,
|
||||
@@ -74,7 +106,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58882,
|
||||
"name": "icon-tabular-scrolling",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 96,
|
||||
@@ -82,7 +114,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58884,
|
||||
"name": "icon-tabular",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 97,
|
||||
@@ -90,7 +122,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58885,
|
||||
"name": "icon-calendar",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 98,
|
||||
@@ -98,7 +130,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58886,
|
||||
"name": "icon-paint-bucket",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 99,
|
||||
@@ -106,7 +138,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 123,
|
||||
"name": "icon-pointer-left",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 100,
|
||||
@@ -114,7 +146,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 125,
|
||||
"name": "icon-pointer-right",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 101,
|
||||
@@ -122,7 +154,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 80,
|
||||
"name": "icon-person",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 102,
|
||||
@@ -130,7 +162,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 232,
|
||||
"name": "icon-chain-links",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 103,
|
||||
@@ -138,7 +170,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 115,
|
||||
"name": "icon-database-in-brackets",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 104,
|
||||
@@ -146,7 +178,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 114,
|
||||
"name": "icon-refresh",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 105,
|
||||
@@ -154,7 +186,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 108,
|
||||
"name": "icon-lock",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 106,
|
||||
@@ -162,7 +194,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 51,
|
||||
"name": "icon-box-with-dashed-lines",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 10,
|
||||
@@ -170,7 +202,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58880,
|
||||
"name": "icon-box-with-arrow-cursor",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 11,
|
||||
@@ -178,7 +210,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 65,
|
||||
"name": "icon-activity-mode",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 12,
|
||||
@@ -186,7 +218,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 97,
|
||||
"name": "icon-activity",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 87,
|
||||
@@ -194,7 +226,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 33,
|
||||
"name": "icon-alert-rect",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 14,
|
||||
@@ -202,7 +234,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58883,
|
||||
"name": "icon-alert-triangle",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 15,
|
||||
@@ -210,7 +242,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 238,
|
||||
"name": "icon-arrow-double-down",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 16,
|
||||
@@ -218,7 +250,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 235,
|
||||
"name": "icon-arrow-double-up",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 2,
|
||||
@@ -226,7 +258,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 118,
|
||||
"name": "icon-arrow-down",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 19,
|
||||
@@ -234,7 +266,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 60,
|
||||
"name": "icon-arrow-left",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 20,
|
||||
@@ -242,7 +274,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 62,
|
||||
"name": "icon-arrow-right",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 21,
|
||||
@@ -250,7 +282,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 236,
|
||||
"name": "icon-arrow-tall-down",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 22,
|
||||
@@ -258,7 +290,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 237,
|
||||
"name": "icon-arrow-tall-up",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 23,
|
||||
@@ -266,7 +298,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 94,
|
||||
"name": "icon-arrow-up",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 24,
|
||||
@@ -274,7 +306,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 73,
|
||||
"name": "icon-arrows-out",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 25,
|
||||
@@ -282,7 +314,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58893,
|
||||
"name": "icon-arrows-right-left",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 33,
|
||||
@@ -290,7 +322,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 53,
|
||||
"name": "icon-arrows-up-down",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 26,
|
||||
@@ -298,7 +330,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 42,
|
||||
"name": "icon-asterisk",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 27,
|
||||
@@ -306,7 +338,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 72,
|
||||
"name": "icon-autoflow-tabular",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 28,
|
||||
@@ -314,7 +346,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 224,
|
||||
"name": "icon-box",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 29,
|
||||
@@ -322,7 +354,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 50,
|
||||
"name": "icon-check",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 30,
|
||||
@@ -330,7 +362,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 67,
|
||||
"name": "icon-clock",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 31,
|
||||
@@ -338,7 +370,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 46,
|
||||
"name": "icon-connectivity",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 32,
|
||||
@@ -346,7 +378,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 100,
|
||||
"name": "icon-database-query",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 17,
|
||||
@@ -354,7 +386,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 68,
|
||||
"name": "icon-database",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 35,
|
||||
@@ -362,7 +394,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 81,
|
||||
"name": "icon-dictionary",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 36,
|
||||
@@ -370,7 +402,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 242,
|
||||
"name": "icon-duplicate",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 37,
|
||||
@@ -378,7 +410,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 102,
|
||||
"name": "icon-folder-new",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 38,
|
||||
@@ -386,7 +418,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 70,
|
||||
"name": "icon-folder",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 39,
|
||||
@@ -394,7 +426,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 95,
|
||||
"name": "icon-fullscreen-collapse",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 40,
|
||||
@@ -402,7 +434,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 122,
|
||||
"name": "icon-fullscreen-expand",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 41,
|
||||
@@ -410,7 +442,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 71,
|
||||
"name": "icon-gear",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 49,
|
||||
@@ -418,7 +450,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 227,
|
||||
"name": "icon-image",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 42,
|
||||
@@ -426,7 +458,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 225,
|
||||
"name": "icon-layers",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 43,
|
||||
@@ -434,7 +466,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 76,
|
||||
"name": "icon-layout",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 44,
|
||||
@@ -442,7 +474,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 226,
|
||||
"name": "icon-line-horz",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 75,
|
||||
@@ -450,7 +482,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 244,
|
||||
"name": "icon-link",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 46,
|
||||
@@ -458,7 +490,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 88,
|
||||
"name": "icon-magnify-in",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 47,
|
||||
@@ -466,7 +498,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 89,
|
||||
"name": "icon-magnify-out",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 48,
|
||||
@@ -474,7 +506,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 77,
|
||||
"name": "icon-magnify",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 34,
|
||||
@@ -482,7 +514,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 109,
|
||||
"name": "icon-menu",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 50,
|
||||
@@ -490,7 +522,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 243,
|
||||
"name": "icon-move",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 51,
|
||||
@@ -498,7 +530,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 121,
|
||||
"name": "icon-new-window",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 52,
|
||||
@@ -506,7 +538,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 111,
|
||||
"name": "icon-object",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 73,
|
||||
@@ -514,7 +546,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 63,
|
||||
"name": "icon-object-unknown",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 53,
|
||||
@@ -522,7 +554,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 86,
|
||||
"name": "icon-packet",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 54,
|
||||
@@ -530,7 +562,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 234,
|
||||
"name": "icon-page",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 55,
|
||||
@@ -538,7 +570,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 241,
|
||||
"name": "icon-pause",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 56,
|
||||
@@ -546,7 +578,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 112,
|
||||
"name": "icon-pencil",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 65,
|
||||
@@ -554,7 +586,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 79,
|
||||
"name": "icon-people",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 57,
|
||||
@@ -562,7 +594,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 239,
|
||||
"name": "icon-play",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 58,
|
||||
@@ -570,7 +602,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 233,
|
||||
"name": "icon-plot-resource",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 59,
|
||||
@@ -578,7 +610,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 43,
|
||||
"name": "icon-plus",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 60,
|
||||
@@ -586,7 +618,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 45,
|
||||
"name": "icon-minus",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 61,
|
||||
@@ -594,7 +626,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 54,
|
||||
"name": "icon-sine",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 62,
|
||||
@@ -602,7 +634,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 228,
|
||||
"name": "icon-T",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 63,
|
||||
@@ -610,7 +642,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 116,
|
||||
"name": "icon-telemetry-panel",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 64,
|
||||
@@ -618,7 +650,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 84,
|
||||
"name": "icon-telemetry",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 18,
|
||||
@@ -626,7 +658,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 246,
|
||||
"name": "icon-thumbs-strip",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 67,
|
||||
@@ -634,7 +666,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 83,
|
||||
"name": "icon-timeline",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 68,
|
||||
@@ -642,7 +674,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 245,
|
||||
"name": "icon-timer",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 69,
|
||||
@@ -650,7 +682,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 90,
|
||||
"name": "icon-trash",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 70,
|
||||
@@ -658,7 +690,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 229,
|
||||
"name": "icon-two-parts-both",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 71,
|
||||
@@ -666,7 +698,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 231,
|
||||
"name": "icon-two-parts-one-only",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 72,
|
||||
@@ -674,7 +706,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 120,
|
||||
"name": "icon-x-heavy",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 66,
|
||||
@@ -682,7 +714,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58946,
|
||||
"name": "icon-x",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"id": 2,
|
||||
@@ -697,6 +729,110 @@
|
||||
"height": 1024,
|
||||
"prevSize": 32,
|
||||
"icons": [
|
||||
{
|
||||
"id": 93,
|
||||
"paths": [
|
||||
"M512 64c-261 0-480.6 195.4-512 448 31.4 252.6 251 448 512 448s480.6-195.4 512-448c-31.4-252.6-251-448-512-448zM768.2 734.6c-71.4 62.8-162.8 97.4-257.6 97.4s-186.2-34.6-257.6-97.4c-66.6-58.6-110.6-137.2-125-222.6 0 0 0-0.2 0-0.2 76.8-154 220.8-257.6 384-257.6s307.2 103.8 384 257.6c0 0 0 0.2 0 0.2-14.4 85.4-61.2 164-127.8 222.6z",
|
||||
"M512 288c-123.8 0-224 100.2-224 224s100.2 224 224 224 224-100.2 224-224-100.2-224-224-224zM576 544c-53 0-96-43-96-96s43-96 96-96 96 43 96 96c0 53-43 96-96 96z"
|
||||
],
|
||||
"attrs": [
|
||||
{
|
||||
"fill": "rgb(6, 161, 75)"
|
||||
},
|
||||
{
|
||||
"fill": "rgb(6, 161, 75)"
|
||||
}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon-eye-open-no-gleam"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"125525525516161751": [
|
||||
1,
|
||||
1
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 92,
|
||||
"paths": [
|
||||
"M512 64c-261 0-480.6 195.4-512 448 31.4 252.6 251 448 512 448s480.6-195.4 512-448c-31.4-252.6-251-448-512-448zM768.2 734.6c-71.4 62.8-162.8 97.4-257.6 97.4s-186.2-34.6-257.6-97.4c-66.6-58.6-110.6-137.2-125-222.6 0 0 0-0.2 0-0.2 76.8-154 220.8-257.6 384-257.6s307.2 103.8 384 257.6c0 0 0 0.2 0 0.2-14.4 85.4-61.2 164-127.8 222.6z",
|
||||
"M512 288c-123.8 0-224 100.2-224 224s100.2 224 224 224 224-100.2 224-224-100.2-224-224-224z"
|
||||
],
|
||||
"attrs": [
|
||||
{
|
||||
"fill": "rgb(6, 161, 75)"
|
||||
},
|
||||
{
|
||||
"fill": "rgb(6, 161, 75)"
|
||||
}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon-crosshair"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"125525525516161751": [
|
||||
1,
|
||||
1
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 91,
|
||||
"paths": [
|
||||
"M256 0h-256v1024h256c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192z",
|
||||
"M512 320l512 320v-640z"
|
||||
],
|
||||
"attrs": [
|
||||
{
|
||||
"fill": "rgb(0, 0, 0)"
|
||||
},
|
||||
{
|
||||
"fill": "rgb(0, 0, 0)"
|
||||
}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon-collapse-pane-left"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"125525525516161751": [
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 90,
|
||||
"paths": [
|
||||
"M768 0h256v1024h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192z",
|
||||
"M512 320l-512 320v-640z"
|
||||
],
|
||||
"attrs": [
|
||||
{
|
||||
"fill": "rgb(0, 0, 0)"
|
||||
},
|
||||
{
|
||||
"fill": "rgb(0, 0, 0)"
|
||||
}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon-collapse-pane-right"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"125525525516161751": [
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 89,
|
||||
"paths": [
|
||||
|
||||
Binary file not shown.
@@ -90,5 +90,9 @@
|
||||
<glyph unicode="" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
|
||||
<glyph unicode="" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
|
||||
<glyph unicode="" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
|
||||
<glyph unicode="" glyph-name="icon-collapse-pane-left" d="M256 960h-256v-1024h256c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM512 640l512-320v640z" />
|
||||
<glyph unicode="" glyph-name="icon-collapse-pane-right" d="M768 960h256v-1024h-256c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192zM512 640l-512-320v640z" />
|
||||
<glyph unicode="" glyph-name="icon-eye-open" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224z" />
|
||||
<glyph unicode="" glyph-name="icon-eye-open-no-gleam" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224zM576 416c-53 0-96 43-96 96s43 96 96 96 96-43 96-96c0-53-43-96-96-96z" />
|
||||
<glyph unicode="" 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>
|
||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
Binary file not shown.
147
platform/commonUI/general/res/sass/_archetypes.scss
Normal file
147
platform/commonUI/general/res/sass/_archetypes.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/********************************************* COLUMN LAYOUTS STYLES */
|
||||
@mixin cols($totalCols, $span) {
|
||||
$cw: 100% / $totalCols;
|
||||
min-width: (500px / $totalCols) * $span;
|
||||
@if ($totalCols != $span) {
|
||||
width: ($cw * $span) - $ueColMargin;
|
||||
} @else {
|
||||
width: $cw;
|
||||
}
|
||||
}
|
||||
|
||||
.cols {
|
||||
@include clearfix;
|
||||
.col {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
float: left;
|
||||
margin-left: $ueColMargin;
|
||||
padding-left: $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.cols-2 {
|
||||
$nc: 2;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
}
|
||||
&.cols-2-ff {
|
||||
// 2 columns, first column is fixed, second is fluid
|
||||
.col-100px {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-6 {
|
||||
$nc: 6;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
}
|
||||
&.cols-16 {
|
||||
$nc: 16;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
.col-2 {
|
||||
@include cols($nc, 2);
|
||||
}
|
||||
.col-7 {
|
||||
@include cols($nc, 7);
|
||||
}
|
||||
}
|
||||
&.cols-32 {
|
||||
$nc: 32;
|
||||
.col-2 {
|
||||
@include cols($nc, 2);
|
||||
}
|
||||
.col-15 {
|
||||
@include cols($nc, 15);
|
||||
}
|
||||
}
|
||||
.l-row {
|
||||
@include clearfix;
|
||||
padding: $interiorMargin 0;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************* FLEX STYLES */
|
||||
.l-flex-row,
|
||||
.l-flex-col {
|
||||
@include display-flex;
|
||||
@include flex-wrap(nowrap);
|
||||
.flex-elem {
|
||||
min-height: 0; // Needed to allow element to shrink within parent
|
||||
position: relative;
|
||||
&:not(.grows) {
|
||||
@include flex(0 0 auto);
|
||||
&.flex-can-shrink {
|
||||
@include flex(0 1 auto);
|
||||
}
|
||||
}
|
||||
&.grows {
|
||||
@include flex(1 1 auto);
|
||||
}
|
||||
}
|
||||
.flex-container {
|
||||
// Apply to wrapping elements, mct-includes, etc.
|
||||
@include display-flex;
|
||||
@include flex-wrap(nowrap);
|
||||
@include flex(1 1 auto);
|
||||
min-height:0;
|
||||
}
|
||||
}
|
||||
|
||||
.l-flex-row {
|
||||
@include flex-direction(row);
|
||||
&.flex-elem { @include flex(1 1 auto); }
|
||||
.flex-elem {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
min-width: 0;
|
||||
}
|
||||
.flex-container { @include flex-direction(row); }
|
||||
}
|
||||
|
||||
.l-flex-col {
|
||||
@include flex-direction(column);
|
||||
.flex-elem {
|
||||
min-height: 0;
|
||||
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
|
||||
}
|
||||
.flex-container { @include flex-direction(column); }
|
||||
}
|
||||
|
||||
.flex-fixed {
|
||||
@include flex(0 0 auto);
|
||||
}
|
||||
|
||||
.flex-justify-end {
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
@@ -35,20 +35,32 @@ $ltGamma: 20%;
|
||||
$btnFontSizeToH: 0.45;
|
||||
|
||||
/************************** LAYOUT */
|
||||
$ueTopBarH: 24px; // Change when breadcrumb is enabled
|
||||
$ueTopBarH: 24px;
|
||||
$ueTopBarEditH: 30px;
|
||||
$ueTopBarBtnH: 35px;
|
||||
$ueFooterH: 25px;
|
||||
$ueColMargin: 1.5%;
|
||||
$ueAppLogoW: 105px;
|
||||
$ueEditToolBarH: 25px;
|
||||
$ueBrowseLeftPaneW: 25%;
|
||||
$ueCollapsedPaneEdgeM: 22px;
|
||||
$uePaneMiniTabH: $ueTopBarH;
|
||||
$uePaneMiniTabW: 9px;
|
||||
$uePaneMiniTabCollapsedW: 11px;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
$ueTimeControlH: (33px, 20px, 20px);
|
||||
// Panes
|
||||
$ueBrowseLeftPaneTreeMinW: 150px;
|
||||
$ueBrowseLeftPaneTreeMaxW: 35%;
|
||||
$ueBrowseLeftPaneTreeW: 25%;
|
||||
$ueBrowseRightPaneInspectMinW: 200px;
|
||||
$ueBrowseRightPaneInspectMaxW: 35%;
|
||||
$ueBrowseRightPaneInspectW: 20%;
|
||||
$ueDesktopMinW: 600px;
|
||||
|
||||
// Overlay
|
||||
$ovrTopBarH: 60px;
|
||||
$ovrFooterH: 30px;
|
||||
$ovrTopBarH: 45px;
|
||||
$ovrFooterH: 24px;
|
||||
$overlayMargin: 25px;
|
||||
// Items
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
@@ -57,7 +69,8 @@ $ueBrowseGridItemBottomBarH: 30px;
|
||||
$itemPadLR: 5px;
|
||||
// Tree
|
||||
$treeVCW: 10px;
|
||||
$treeTypeIconH: 16px;
|
||||
$treeTypeIconH: 1.4em; // was 16px
|
||||
$treeTypeIconHPx: 16px;
|
||||
$treeTypeIconW: 20px;
|
||||
$treeContextTriggerW: 20px;
|
||||
// Tabular
|
||||
@@ -106,3 +119,8 @@ $dirImgs: $dirCommonRes + 'images/';
|
||||
|
||||
/************************** TIMINGS */
|
||||
$controlFadeMs: 100ms;
|
||||
|
||||
/************************** LIMITS */
|
||||
$glyphLimit: '\e603';
|
||||
$glyphLimitUpr: '\0000eb';
|
||||
$glyphLimitLwr: '\0000ee';
|
||||
|
||||
@@ -34,10 +34,6 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
@@ -55,7 +51,7 @@ body, html {
|
||||
color: $colorBodyFg;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
//font-weight: 500;
|
||||
font-weight: 200;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@@ -150,6 +146,16 @@ mct-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.off {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: rgba(#fff, 0.2);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
// Styles to temporarily hide non-functional elements
|
||||
|
||||
/******************************** BROWSE */
|
||||
.browse-mode {
|
||||
.browse {
|
||||
&.top-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area.holder {
|
||||
// When .browse.top-bar is hidden, set the top of the browse-area holder
|
||||
top: $bodyMargin;
|
||||
}
|
||||
}
|
||||
@@ -29,11 +29,14 @@
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
&.type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
}
|
||||
&.icon {
|
||||
color: $colorKey;
|
||||
//position: relative;
|
||||
font-size: inherit;
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
@@ -69,18 +72,32 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
//.tree-item .type-icon {
|
||||
// font-size: 16px; // 16px is crisp size
|
||||
//}
|
||||
|
||||
.l-icon-link:before {
|
||||
content: "\f4";
|
||||
}
|
||||
|
||||
.l-icon-alert {
|
||||
display: none !important; // Remove this when alerts are enabled
|
||||
&:before {
|
||||
color: $colorAlert;
|
||||
content: "!";
|
||||
}
|
||||
}
|
||||
|
||||
// NEW!!
|
||||
.t-item-icon {
|
||||
// Used in grid-item.html, tree-item, inspector location, more?
|
||||
@extend .ui-symbol;
|
||||
@extend .icon;
|
||||
display: inline-block;
|
||||
line-height: normal; // This is Ok for the symbolsfont
|
||||
position: relative;
|
||||
&.l-icon-link {
|
||||
&:before {
|
||||
color: $colorIconLink;
|
||||
content: "\f4";
|
||||
height: auto; width: auto;
|
||||
position: absolute;
|
||||
left: 0; top: 0; right: 0; bottom: 10%;
|
||||
@include transform-origin(bottom, left);
|
||||
@include transform(scale(0.3));
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
112
platform/commonUI/general/res/sass/_inspector.scss
Normal file
112
platform/commonUI/general/res/sass/_inspector.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
/* Styles for the Inspector pane */
|
||||
|
||||
.l-inspect,
|
||||
.l-inspect table tr td {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.l-inspect {
|
||||
@extend .abs;
|
||||
background: $colorInspectorBg;
|
||||
color: $colorInspectorFg;
|
||||
line-height: 140%;
|
||||
.pane-header {
|
||||
color: pushBack($colorInspectorFg, 20%);
|
||||
font-size: 0.8rem;
|
||||
&:before {
|
||||
color: pushBack($colorInspectorFg, 10%);
|
||||
content:'\e615'; // e615 Crosshair symbol
|
||||
display: inline;
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMargin;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include box-sizing(border-box);
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
|
||||
ul li,
|
||||
em {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
em {
|
||||
@include border-radius($basicCr);
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: $formTBPad $formLRPad;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.inspector-properties {
|
||||
&:not(.first) {
|
||||
border-top: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
padding: $interiorMarginSm 0;
|
||||
.label {
|
||||
color: $colorInspectorPropName;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.value {
|
||||
color: $colorInspectorPropVal;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-location {
|
||||
//line-height: 180%;
|
||||
.location-item {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 2px 4px;
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.last) .t-object-label .t-title-label:after {
|
||||
color: pushBack($colorInspectorFg, 15%);
|
||||
content: '\3e';
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
line-height: inherit;
|
||||
margin-left: $interiorMarginSm;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,39 @@
|
||||
@mixin limit($bg, $ic, $glyph) {
|
||||
background: $bg !important;
|
||||
//color: $fg !important;
|
||||
&:before {
|
||||
//@include pulse(1000ms);
|
||||
color: $ic;
|
||||
content: $glyph;
|
||||
}
|
||||
@mixin limitGlyph($iconColor, $glyph: $glyphLimit) {
|
||||
&:before {
|
||||
color: $iconColor;
|
||||
content: $glyph;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.8em;
|
||||
display: inline;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[class*="s-limit"] {
|
||||
//white-space: nowrap;
|
||||
&:before {
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.75em;
|
||||
font-style: normal !important;
|
||||
margin-right: $interiorMarginSm;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.s-limit-red { background: $colorLimitRedBg !important; }
|
||||
.s-limit-yellow { background: $colorLimitYellowBg !important; }
|
||||
|
||||
// Handle limit when applied to a tr
|
||||
tr[class*="s-limit"] {
|
||||
&.s-limit-red td:first-child {
|
||||
@include limitGlyph($colorLimitRedIc);
|
||||
}
|
||||
&.s-limit-yellow td:first-child {
|
||||
@include limitGlyph($colorLimitYellowIc);
|
||||
}
|
||||
&.s-limit-upr td:first-child:before { content:$glyphLimitUpr; }
|
||||
&.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; }
|
||||
}
|
||||
|
||||
.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"); };
|
||||
// Handle limit when applied directly to a non-tr element
|
||||
// Assume this is applied to the element that displays the limit value
|
||||
:not(tr)[class*="s-limit"] {
|
||||
&.s-limit-red {
|
||||
@include limitGlyph($colorLimitRedIc);
|
||||
}
|
||||
&.s-limit-yellow {
|
||||
@include limitGlyph($colorLimitYellowIc);
|
||||
}
|
||||
&.s-limit-upr:before { content:$glyphLimitUpr; }
|
||||
&.s-limit-lwr:before { content:$glyphLimitLwr; }
|
||||
}
|
||||
@@ -21,6 +21,7 @@
|
||||
*****************************************************************************/
|
||||
@import "effects";
|
||||
@import "global";
|
||||
@import "archetypes";
|
||||
@import "about";
|
||||
@import "text";
|
||||
@import "icons";
|
||||
@@ -29,8 +30,7 @@
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
@import "helpers/wait-spinner";
|
||||
@import "messages";
|
||||
@import "properties";
|
||||
@import "inspector";
|
||||
|
||||
/********************************* CONTROLS */
|
||||
@import "controls/breadcrumb";
|
||||
@@ -39,6 +39,7 @@
|
||||
@import "controls/controls";
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
@import "controls/messages";
|
||||
@import "controls/time-controller";
|
||||
@import "mobile/controls/menus";
|
||||
|
||||
@@ -62,7 +63,6 @@
|
||||
@import "mobile/tree";
|
||||
@import "user-environ/frame";
|
||||
@import "user-environ/top-bar";
|
||||
@import "user-environ/bottom-bar";
|
||||
@import "user-environ/tool-bar";
|
||||
|
||||
/********************************* VIEWS */
|
||||
@@ -70,7 +70,6 @@
|
||||
@import "lists/tabular";
|
||||
@import "plots/plots-main";
|
||||
@import "iframe";
|
||||
@import "hide-non-functional";
|
||||
@import "views";
|
||||
@import "items/item";
|
||||
@import "mobile/item";
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
/* Styles for messages */
|
||||
|
||||
.message {
|
||||
&.block {
|
||||
@include border-radius($basicCr);
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
&.error {
|
||||
background-color: rgba($colorAlert,0.3);
|
||||
color: lighten($colorAlert, 20%);
|
||||
}
|
||||
}
|
||||
@@ -41,23 +41,26 @@
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice($props, $t: 500ms) {
|
||||
@if $t == 0 {
|
||||
@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
|
||||
// Multiple $props must be in parans like this: (left, right)
|
||||
@if $dur == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property($props);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-fade($t: 0.5s) {
|
||||
@if $t == 0 {
|
||||
@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
|
||||
@if $dur == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property(visibility, opacity, background-color, border-color);
|
||||
@include transition-duration($t);
|
||||
@include transition-property(opacity, background-color, border-color, color);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,16 +70,18 @@
|
||||
@include transition-timing-function($tf);
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-h($t: 0.5s) {
|
||||
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
|
||||
@include transition-property(height, bottom, top);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-w($t: 0.5s) {
|
||||
@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
|
||||
@include transition-property(width, left, right);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
|
||||
@mixin triangle-right($size, $color) {
|
||||
@@ -100,7 +105,6 @@
|
||||
}
|
||||
|
||||
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
|
||||
//$size: $size*2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
$slopedB: $size/$ratio solid transparent;
|
||||
@@ -135,6 +139,24 @@
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, rgba($c, $a) 50%,
|
||||
transparent 50%, transparent 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, transparent 50%,
|
||||
transparent 50%, rgba($c, $a) 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
|
||||
$deg: 90deg;
|
||||
@if ($repeatDir != 'x') {
|
||||
@@ -162,31 +184,28 @@
|
||||
}
|
||||
|
||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||
&:before {
|
||||
@include trans-prop-nice("border-color", 0.75s);
|
||||
content: '';
|
||||
display: block;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
//&:before {
|
||||
//@include trans-prop-nice("border-color", 25ms);
|
||||
content: '';
|
||||
display: block;
|
||||
//height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
height: 1px;
|
||||
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&:not(.disabled):hover:before {
|
||||
@include trans-prop-nice("border-color", 25ms);
|
||||
border-color: $colorGrippyInteriorHover;
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -262,6 +281,12 @@
|
||||
@return percentage($d);
|
||||
}
|
||||
|
||||
@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
|
||||
// Space to either side of the handle
|
||||
@return ($splitterD - $splitterHandleD) * 0.5;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************** CONTROLS, FORM ELEMENTS */
|
||||
|
||||
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@@ -353,10 +378,7 @@
|
||||
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
||||
//position: relative;
|
||||
top: 50%;
|
||||
@include webkitProp(transform, translateY(-50%));
|
||||
//-webkit-transform: translateY(-50%);
|
||||
//-ms-transform: translateY(-50%);
|
||||
//transform: translateY(-50%);
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
|
||||
@mixin verticalCenterBlock($holderH, $itemH) {
|
||||
|
||||
@@ -1,35 +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.
|
||||
*****************************************************************************/
|
||||
/* Classes to be used for lists of properties and values */
|
||||
|
||||
.properties {
|
||||
.s-row {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
font-size: 0.8em;
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
.s-value {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,13 +22,17 @@
|
||||
$baseRatio: 1.5;
|
||||
$pad: $interiorMargin * $baseRatio;
|
||||
|
||||
.s-btn {
|
||||
@include box-sizing(border-box);
|
||||
.s-btn,
|
||||
.s-icon-btn {
|
||||
@include user-select(none);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
height: $btnStdH;
|
||||
line-height: $btnStdH;
|
||||
}
|
||||
|
||||
.s-btn {
|
||||
@include box-sizing(border-box);
|
||||
padding: 0 $pad;
|
||||
font-size: 0.7rem;
|
||||
vertical-align: top;
|
||||
@@ -102,6 +106,160 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon-btn {
|
||||
@extend .ui-symbol;
|
||||
color: $colorBtnIcon;
|
||||
&:hover {
|
||||
color: lighten($colorBtnIcon, $ltGamma);
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tab {
|
||||
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||
//@extend .ui-symbol;
|
||||
@include desktop {
|
||||
//@include test(green);
|
||||
$iconH: $uePaneMiniTabH;
|
||||
$iconW: $uePaneMiniTabW;
|
||||
$iconInnerLR: 0;
|
||||
$arwD: 9px;
|
||||
$arwOffsetX: 0px;
|
||||
$arwAnimOffsetX: 2px + $iconInnerLR;
|
||||
$cBg: pullForward($colorBodyBg, 15%);
|
||||
$cFg: $cBg;
|
||||
|
||||
|
||||
@include border-radius($basicCr);
|
||||
//@include boxShdw($shdwBtns);
|
||||
@include box-sizing(border-box);
|
||||
@include trans-prop-nice((color, background-color), 100ms);
|
||||
color: $cFg;
|
||||
cursor: pointer;
|
||||
font-family: symbolsfont;
|
||||
font-size: $arwD;
|
||||
display: block;
|
||||
position: absolute;
|
||||
line-height: $iconH;
|
||||
height: $iconH; width: $iconW;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
//background-color: $cBg;
|
||||
color: $colorKey; //pullForward($cFg, $ltGamma);
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
// State when the pane this element controls has been collapsed
|
||||
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
|
||||
&:before { opacity: 0; }
|
||||
&:after { opacity: 1; }
|
||||
&:hover {
|
||||
&:before { opacity: 1; }
|
||||
&:after { opacity: 0; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
//@include test();
|
||||
@include trans-prop-nice((left, right, opacity), 250ms);
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Always the arrow icon
|
||||
//@include test(green);
|
||||
//font-size: $arwD;
|
||||
width: $arwD;
|
||||
}
|
||||
&:after {
|
||||
// Always icon; content is set in _layout.scss
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.anchor-left {
|
||||
// |<
|
||||
text-align: right;
|
||||
&:before {
|
||||
content:'\3c'; // Collapse left icon e613
|
||||
right: $iconInnerLR;
|
||||
}
|
||||
//&:hover:before { right: $arwAnimOffsetX; }
|
||||
&.collapsed {
|
||||
@include border-left-radius(0);
|
||||
text-align: left;
|
||||
&:before {
|
||||
content:'\3e';
|
||||
left: $iconInnerLR;
|
||||
}
|
||||
&:hover:before { left: $arwAnimOffsetX; }
|
||||
}
|
||||
}
|
||||
&.anchor-right {
|
||||
// >|
|
||||
text-align: left;
|
||||
&:before {
|
||||
content:'\3e'; // Collapse right icon e614
|
||||
left: $iconInnerLR;
|
||||
}
|
||||
//&:hover:before { left: $arwAnimOffsetX; }
|
||||
&.collapsed {
|
||||
@include border-right-radius(0);
|
||||
&:before {
|
||||
text-align: right;
|
||||
content:'\3c';
|
||||
right: $iconInnerLR;
|
||||
}
|
||||
&:hover:before { right: $arwAnimOffsetX; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tab-icon {
|
||||
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||
//@extend .ui-symbol;
|
||||
@include desktop {
|
||||
$d: $uePaneMiniTabW;
|
||||
//@include trans-prop-nice(transform, 150ms);
|
||||
color: pullForward($colorBodyBg, 15%);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: $d;
|
||||
position: absolute;
|
||||
height: $d; width: $d;
|
||||
line-height: $d;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
|
||||
&.collapsed {
|
||||
$d: $uePaneMiniTabCollapsedW;
|
||||
width: $d; font-size: $d;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\78'; // X icon
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $colorKey;
|
||||
//@include transform(scale(1.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
|
||||
@@ -19,462 +19,490 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/*.control {
|
||||
// UNUSED?
|
||||
&.view-control {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: -1px 5px 1px 2px;
|
||||
vertical-align: middle;
|
||||
&.triangle-down {
|
||||
margin: 2px 2px -2px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@include border-radius(3px);
|
||||
display: inline-block;
|
||||
padding: 1px 6px 4px 4px;
|
||||
&:hover {
|
||||
background: rgba(white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
.accordion {
|
||||
$accordionHeadH: 18px;
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.accordion-head {
|
||||
$op: 0.2;
|
||||
@include border-radius($basicCr * 0.75);
|
||||
@include box-sizing("border-box");
|
||||
background: rgba($colorBodyFg, $op);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
line-height: $accordionHeadH;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: 0 $interiorMargin;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: $accordionHeadH;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, $op * 2);
|
||||
}
|
||||
&:after {
|
||||
content: "^";
|
||||
display: block;
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.9em;
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
text-transform: none;
|
||||
top: 0;
|
||||
}
|
||||
&:not(.expanded):after {
|
||||
content: "v";
|
||||
}
|
||||
}
|
||||
.accordion-contents {
|
||||
position: absolute;
|
||||
top: $accordionHeadH + $interiorMargin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
$accordionHeadH: 18px;
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.accordion-head {
|
||||
$op: 0.2;
|
||||
@include border-radius($basicCr * 0.75);
|
||||
@include box-sizing("border-box");
|
||||
background: rgba($colorBodyFg, $op);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
line-height: $accordionHeadH;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: 0 $interiorMargin;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: $accordionHeadH;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, $op * 2);
|
||||
}
|
||||
&:after {
|
||||
content: "^";
|
||||
display: block;
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.9em;
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
text-transform: none;
|
||||
top: 0;
|
||||
}
|
||||
&:not(.expanded):after {
|
||||
content: "v";
|
||||
}
|
||||
}
|
||||
.accordion-contents {
|
||||
position: absolute;
|
||||
top: $accordionHeadH + $interiorMargin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.l-composite-control {
|
||||
vertical-align: middle;
|
||||
&.l-checkbox {
|
||||
.composite-control-label {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
vertical-align: middle;
|
||||
&.l-checkbox {
|
||||
.composite-control-label {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-control-group {
|
||||
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
display: inline-block;
|
||||
padding: 0 $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.l-local-controls {
|
||||
// Control shown when hovering over an object, like plots and imagery
|
||||
// Default position is upper right
|
||||
$p: $interiorMargin;
|
||||
position: absolute;
|
||||
top: $p;
|
||||
right: $p;
|
||||
z-index: 5;
|
||||
// Control shown when hovering over an object, like plots and imagery
|
||||
// Default position is upper right
|
||||
$p: $interiorMargin;
|
||||
position: absolute;
|
||||
top: $p;
|
||||
right: $p;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.s-local-controls {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
label.checkbox.custom {
|
||||
$bg: pullForward($colorBodyBg, 10%);
|
||||
$d: $formRowCtrlsH;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $d;
|
||||
margin-right: $interiorMargin * 4;
|
||||
padding-left: $d + $interiorMargin;
|
||||
position: relative;
|
||||
vertical-align: middle; // was top
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
height: $d;
|
||||
min-width: $d;
|
||||
&: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);
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
height: $d;
|
||||
width: $d;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.no-text {
|
||||
overflow: hidden;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
height: $d;
|
||||
width: $d;
|
||||
em {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
&:checked ~ em:before {
|
||||
background: $colorCheck;
|
||||
color: lighten($colorCheck, 50%);
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
$bg: pullForward($colorBodyBg, 10%);
|
||||
$d: $formRowCtrlsH;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $d;
|
||||
margin-right: $interiorMargin * 4;
|
||||
padding-left: $d + $interiorMargin;
|
||||
position: relative;
|
||||
vertical-align: middle; // was top
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
height: $d;
|
||||
min-width: $d;
|
||||
&:before {
|
||||
@include border-radius($basicCr * .75);
|
||||
background: $bg;
|
||||
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
height: $d;
|
||||
width: $d;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.no-text {
|
||||
overflow: hidden;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
height: $d;
|
||||
width: $d;
|
||||
em {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
&:checked ~ em:before {
|
||||
background: $colorCheck;
|
||||
color: lighten($colorCheck, 50%);
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-labeled {
|
||||
margin-left: $interiorMargin;
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
margin-left: $interiorMargin;
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.s-menu-btn label.checkbox.custom {
|
||||
margin-left: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.item .checkbox {
|
||||
&.checked label {
|
||||
@include box-shadow(none);
|
||||
border-bottom: none;
|
||||
}
|
||||
&.checked label {
|
||||
@include box-shadow(none);
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.context-available {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
}
|
||||
|
||||
/******************************************************** OBJECT-HEADER */
|
||||
.object-header {
|
||||
//@include test();
|
||||
font-size: 1em;
|
||||
font-size: 1em;
|
||||
|
||||
//> .title-label,
|
||||
//> .type-icon,
|
||||
//> .context-available {
|
||||
// //@include tmpBorder(#6666ff);
|
||||
// //vertical-align: middle;
|
||||
//}
|
||||
> .type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
font-size: 120%;
|
||||
float: left;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
> .type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
font-size: 120%;
|
||||
float: left;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
.l-elem-wrapper {
|
||||
mct-representation {
|
||||
// Holds the context-available item
|
||||
// Must have min-width to make flex work properly
|
||||
// in Safari
|
||||
min-width: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.l-elem-wrapper {
|
||||
//@include test(#66f, 0.2);
|
||||
@include webkitProp(justify-content, flex-start);
|
||||
mct-representation {
|
||||
// Holds the context-available item
|
||||
// Must have min-width to make flex work properly
|
||||
// in Safari
|
||||
min-width: 0.7em;
|
||||
}
|
||||
}
|
||||
.action {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
.title-label {
|
||||
color: $colorObjHdrTxt;
|
||||
@include ellipsize();
|
||||
@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.
|
||||
}
|
||||
|
||||
.title-label {
|
||||
//@include test(green, 0.9);
|
||||
color: $colorObjHdrTxt;
|
||||
@include ellipsize();
|
||||
//color: pushBack($colorBodyFg, 40%);
|
||||
@include webkitProp(flex, '0 1 auto');
|
||||
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
|
||||
//position: relative;
|
||||
}
|
||||
.context-available {
|
||||
font-size: 0.7em;
|
||||
@include webkitProp(flex, '0 0 1');
|
||||
}
|
||||
|
||||
.context-available {
|
||||
font-size: 0.7em;
|
||||
@include webkitProp(flex, '0 0 1');
|
||||
//margin-right: $interiorMargin;
|
||||
}
|
||||
@include desktop {
|
||||
.context-available {
|
||||
@include trans-prop-nice(opacity, 0.25s);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.context-available {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.context-available {
|
||||
@include trans-prop-nice(opacity, 0.25s);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.context-available {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
/******************************************************** PROGRESS BAR */
|
||||
@include keyframes(progress) {
|
||||
100% { background-position: $progressBarStripeW center; }
|
||||
}
|
||||
|
||||
@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, transparent 50%,
|
||||
transparent 50%, rgba($c, $a) 100%
|
||||
));
|
||||
background-position: 0 center;
|
||||
background-repeat: repeat-x;
|
||||
background-size: $d 40%;
|
||||
}
|
||||
|
||||
.l-progress-bar {
|
||||
// Assume will be determinate by default
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.progress-amt-holder {
|
||||
@include absPosDefault(1px);
|
||||
}
|
||||
.progress-amt,
|
||||
.progress-amt:before,
|
||||
.progress-amt:after {
|
||||
@include absPosDefault();
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.progress-amt {
|
||||
right: auto; // Allow inline width to control }
|
||||
}
|
||||
|
||||
&.indeterminate {
|
||||
.progress-amt {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-progress-bar {
|
||||
@include border-radius($basicCr);
|
||||
@include boxIncised(0.3, 4px);
|
||||
background: $colorProgressBarOuter;
|
||||
.progress-amt {
|
||||
@include border-radius($basicCr);
|
||||
@include boxShdw();
|
||||
@include border-radius($basicCr - 1);
|
||||
@include trans-prop-nice(width);
|
||||
&:before {
|
||||
background-color: $colorProgressBarAmt;
|
||||
}
|
||||
&:after {
|
||||
// Sheen
|
||||
@include background-image(linear-gradient(
|
||||
transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.indeterminate) {
|
||||
.progress-amt:before {
|
||||
// More subtle anim for determinate progress
|
||||
@include animation(progress .4s linear infinite);
|
||||
@include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
|
||||
}
|
||||
}
|
||||
|
||||
&.indeterminate .progress-amt {
|
||||
&:before {
|
||||
// More visible std diag stripe anim for indeterminate progress
|
||||
@include animation(progress .6s linear infinite);
|
||||
@include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
|
||||
}
|
||||
&:after { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** SLIDERS */
|
||||
|
||||
.slider {
|
||||
$knobH: 100%; //14px;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
//@include sliderTrack();
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.knob {
|
||||
//@include btnSubtle();
|
||||
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorKnob;
|
||||
&:hover {
|
||||
background-color: $sliderColorKnobHov;
|
||||
}
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
width: $sliderKnobW;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
}
|
||||
.knob-l {
|
||||
@include border-left-radius($sliderKnobW);
|
||||
cursor: w-resize;
|
||||
}
|
||||
.knob-r {
|
||||
@include border-right-radius($sliderKnobW);
|
||||
cursor: e-resize;
|
||||
}
|
||||
.range {
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorRange;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0; //$tbOffset;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
&:hover {
|
||||
background-color: $sliderColorRangeHov;
|
||||
}
|
||||
}
|
||||
$knobH: 100%; //14px;
|
||||
.slot {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.knob {
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorKnob;
|
||||
&:hover {
|
||||
background-color: $sliderColorKnobHov;
|
||||
}
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
width: $sliderKnobW;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
}
|
||||
.knob-l {
|
||||
@include border-left-radius($sliderKnobW);
|
||||
cursor: w-resize;
|
||||
}
|
||||
.knob-r {
|
||||
@include border-right-radius($sliderKnobW);
|
||||
cursor: e-resize;
|
||||
}
|
||||
.range {
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorRange;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0; //$tbOffset;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
&:hover {
|
||||
background-color: $sliderColorRangeHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** DATETIME PICKER */
|
||||
.l-datetime-picker {
|
||||
$r1H: 15px;
|
||||
@include user-select(none);
|
||||
font-size: 0.8rem;
|
||||
padding: $interiorMarginLg !important;
|
||||
width: 230px;
|
||||
.l-month-year-pager {
|
||||
$pagerW: 20px;
|
||||
//@include test();
|
||||
//font-size: 0.8rem;
|
||||
height: $r1H;
|
||||
margin-bottom: $interiorMargin;
|
||||
position: relative;
|
||||
.pager,
|
||||
.val {
|
||||
//@include test(red);
|
||||
@extend .abs;
|
||||
}
|
||||
.pager {
|
||||
width: $pagerW;
|
||||
@extend .ui-symbol;
|
||||
&.prev {
|
||||
right: auto;
|
||||
&:before {
|
||||
content: "\3c";
|
||||
}
|
||||
}
|
||||
&.next {
|
||||
left: auto;
|
||||
text-align: right;
|
||||
&:before {
|
||||
content: "\3e";
|
||||
}
|
||||
}
|
||||
}
|
||||
.val {
|
||||
text-align: center;
|
||||
left: $pagerW + $interiorMargin;
|
||||
right: $pagerW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
.l-calendar,
|
||||
.l-time-selects {
|
||||
border-top: 1px solid $colorInteriorBorder
|
||||
}
|
||||
.l-time-selects {
|
||||
line-height: $formInputH;
|
||||
}
|
||||
$r1H: 15px;
|
||||
@include user-select(none);
|
||||
font-size: 0.8rem;
|
||||
padding: $interiorMarginLg !important;
|
||||
width: 230px;
|
||||
.l-month-year-pager {
|
||||
$pagerW: 20px;
|
||||
height: $r1H;
|
||||
margin-bottom: $interiorMargin;
|
||||
position: relative;
|
||||
.pager,
|
||||
.val {
|
||||
@extend .abs;
|
||||
}
|
||||
.pager {
|
||||
width: $pagerW;
|
||||
@extend .ui-symbol;
|
||||
&.prev {
|
||||
right: auto;
|
||||
&:before {
|
||||
content: "\3c";
|
||||
}
|
||||
}
|
||||
&.next {
|
||||
left: auto;
|
||||
text-align: right;
|
||||
&:before {
|
||||
content: "\3e";
|
||||
}
|
||||
}
|
||||
}
|
||||
.val {
|
||||
text-align: center;
|
||||
left: $pagerW + $interiorMargin;
|
||||
right: $pagerW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
.l-calendar,
|
||||
.l-time-selects {
|
||||
border-top: 1px solid $colorInteriorBorder
|
||||
}
|
||||
.l-time-selects {
|
||||
line-height: $formInputH;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** CALENDAR */
|
||||
.l-calendar {
|
||||
$colorMuted: pushBack($colorMenuFg, 30%);
|
||||
ul.l-cal-row {
|
||||
@include display-flex;
|
||||
@include flex-flow(row nowrap);
|
||||
margin-top: 1px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
li {
|
||||
@include flex(1 0);
|
||||
//@include test();
|
||||
margin-left: 1px;
|
||||
padding: $interiorMargin;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&.l-header li {
|
||||
color: $colorMuted;
|
||||
}
|
||||
&.l-body li {
|
||||
@include trans-prop-nice(background-color, .25s);
|
||||
cursor: pointer;
|
||||
&.in-month {
|
||||
background-color: $colorCalCellInMonthBg;
|
||||
}
|
||||
.sub {
|
||||
color: $colorMuted;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.selected {
|
||||
background: $colorCalCellSelectedBg;
|
||||
color: $colorCalCellSelectedFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: $colorCalCellHovBg;
|
||||
color: $colorCalCellHovFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$colorMuted: pushBack($colorMenuFg, 30%);
|
||||
ul.l-cal-row {
|
||||
@include display-flex;
|
||||
@include flex-flow(row nowrap);
|
||||
margin-top: 1px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
li {
|
||||
@include flex(1 0);
|
||||
margin-left: 1px;
|
||||
padding: $interiorMargin;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&.l-header li {
|
||||
color: $colorMuted;
|
||||
}
|
||||
&.l-body li {
|
||||
@include trans-prop-nice(background-color, .25s);
|
||||
cursor: pointer;
|
||||
&.in-month {
|
||||
background-color: $colorCalCellInMonthBg;
|
||||
}
|
||||
.sub {
|
||||
color: $colorMuted;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.selected {
|
||||
background: $colorCalCellSelectedBg;
|
||||
color: $colorCalCellSelectedFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: $colorCalCellHovBg;
|
||||
color: $colorCalCellHovFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
|
||||
@include desktop {
|
||||
::-webkit-scrollbar {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset $scrollbarTrackShdw);
|
||||
background-color: $scrollbarTrackColorBg;
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset $scrollbarTrackShdw);
|
||||
background-color: $scrollbarTrackColorBg;
|
||||
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);
|
||||
@include box-sizing(border-box);
|
||||
//@include boxShdwSubtle();
|
||||
//border-top: 1px solid lighten($bg, 20%);
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
$bg: $scrollbarThumbColor;
|
||||
$hc: $scrollbarThumbColorHov;
|
||||
$gr: 5%;
|
||||
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $scrollbarTrackColorBg;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $scrollbarTrackColorBg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
.l-tree-item-flat-list {
|
||||
// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
|
||||
.tree-item {
|
||||
.label {
|
||||
.t-object-label {
|
||||
left: $interiorMargin !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,6 +43,11 @@
|
||||
}
|
||||
|
||||
&.create-btn {
|
||||
&:before {
|
||||
content:'\2b';
|
||||
display: inline;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
.title-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -83,7 +88,7 @@
|
||||
@include menuUlReset();
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
border-top: 1px solid lighten($colorMenuBg, 20%);
|
||||
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
||||
color: pullForward($colorMenuBg, 60%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||
|
||||
306
platform/commonUI/general/res/sass/controls/_messages.scss
Normal file
306
platform/commonUI/general/res/sass/controls/_messages.scss
Normal file
@@ -0,0 +1,306 @@
|
||||
/*****************************************************************************
|
||||
* 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 statusBannerColors($bg, $fg: $colorStatusFg) {
|
||||
$bgPb: 30%;
|
||||
$bgPbD: 10%;
|
||||
background-color: darken($bg, $bgPb);
|
||||
color: $fg;
|
||||
&:hover {
|
||||
background-color: darken($bg, $bgPb - $bgPbD);
|
||||
}
|
||||
.s-action {
|
||||
background-color: darken($bg, $bgPb + $bgPbD);
|
||||
&:hover {
|
||||
background-color: darken($bg, $bgPb);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status.block {
|
||||
color: $colorStatusDefault;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
.status-indicator,
|
||||
.label,
|
||||
.count {
|
||||
//@include test(#00ff00);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.status-indicator {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.ok .status-indicator,
|
||||
&.info .status-indicator {
|
||||
color: $colorStatusInfo;
|
||||
}
|
||||
&.alert .status-indicator,
|
||||
&.warning .status-indicator,
|
||||
&.caution .status-indicator {
|
||||
color: $colorStatusAlert;
|
||||
}
|
||||
&.error .status-indicator {
|
||||
color: $colorStatusError;
|
||||
}
|
||||
.label {
|
||||
// Max-width silliness is necessary for width transition
|
||||
@include trans-prop-nice(max-width, .25s);
|
||||
overflow: hidden;
|
||||
max-width: 0px;
|
||||
}
|
||||
.count {
|
||||
@include trans-prop-nice(opacity, .25s);
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
.label {
|
||||
max-width: 450px;
|
||||
width: auto;
|
||||
}
|
||||
.count {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for messages and message banners */
|
||||
.message {
|
||||
&.block {
|
||||
@include border-radius($basicCr);
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
&.error {
|
||||
background-color: rgba($colorAlert,0.3);
|
||||
color: lighten($colorAlert, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.l-message-banner {
|
||||
$m: $interiorMarginSm;
|
||||
$lh: $ueFooterH - ($m*2) - 1;
|
||||
@include box-sizing(border-box);
|
||||
@include ellipsize();
|
||||
@include display-flex;
|
||||
@include flex-direction(row);
|
||||
@include align-items(center);
|
||||
position: absolute;
|
||||
top: $m; right: auto; bottom: $m; left: 50%;
|
||||
height: auto; width: auto;
|
||||
line-height: $lh;
|
||||
max-width: 300px;
|
||||
padding: 0 $interiorMargin 0 $interiorMargin;
|
||||
@include transform(translateX(-50%));
|
||||
|
||||
&.minimized {
|
||||
@include transition-property(left, opacity);
|
||||
@include transition-duration(0.3s);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.new {
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
&:not(.info) {
|
||||
@include pulse(100ms, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-elem {
|
||||
@include flex(0 1 auto);
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
.l-action {
|
||||
line-height: $lh - 3;
|
||||
padding: 0 $interiorMargin;
|
||||
}
|
||||
.close {
|
||||
//@include test(red, 0.7);
|
||||
cursor: pointer;
|
||||
font-size: 7px;
|
||||
width: 8px;
|
||||
}
|
||||
.l-progress-bar {
|
||||
$h: $lh - 10;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
width: 100px;
|
||||
}
|
||||
.progress-info { display: none; }
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.s-message-banner {
|
||||
//@include transition-property(left, opacity);
|
||||
//@include transition-duration(0.35s);
|
||||
//@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
.s-message-banner {
|
||||
@include border-radius($controlCr);
|
||||
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
|
||||
cursor: pointer;
|
||||
a { color: inherit; }
|
||||
.s-action {
|
||||
@include border-radius($basicCr);
|
||||
@include trans-prop-nice(background-color);
|
||||
}
|
||||
.close {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.ok,
|
||||
&.info {
|
||||
@include statusBannerColors($colorStatusInfo);
|
||||
}
|
||||
&.caution,
|
||||
&.warning,
|
||||
&.alert {
|
||||
@include statusBannerColors($colorStatusAlert);
|
||||
}
|
||||
&.error {
|
||||
@include statusBannerColors($colorStatusError);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin messageBlock($iconW: 32px) {
|
||||
.type-icon.message-type {
|
||||
@include txtShdw($shdwStatusIc);
|
||||
&:before { content:"\e608"; }
|
||||
color: $colorStatusDefault;
|
||||
font-size: $iconW;
|
||||
padding: 1px;
|
||||
width: $iconW + 2;
|
||||
}
|
||||
|
||||
.message-severity-info .type-icon.message-type {
|
||||
&:before { content:"\e608"; }
|
||||
color: $colorStatusInfo;
|
||||
}
|
||||
.message-severity-alert .type-icon.message-type {
|
||||
&:before { content:"\e610"; }
|
||||
color: $colorStatusAlert;
|
||||
}
|
||||
.message-severity-error .type-icon.message-type {
|
||||
&:before { content:"\21"; }
|
||||
color: $colorStatusError;
|
||||
}
|
||||
}
|
||||
/* Paths:
|
||||
t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
|
||||
message-type > (icon)
|
||||
message-contents >
|
||||
top-bar >
|
||||
title
|
||||
hint
|
||||
editor >
|
||||
(if displaying list of messages)
|
||||
ul > li > l-message >
|
||||
... same as above
|
||||
bottom-bar
|
||||
*/
|
||||
|
||||
.l-message {
|
||||
@include display-flex;
|
||||
@include flex-direction(row);
|
||||
@include align-items(stretch);
|
||||
.type-icon.message-type {
|
||||
//@include test(red);
|
||||
@include flex(0 1 auto);
|
||||
position: relative;
|
||||
}
|
||||
.message-contents {
|
||||
//@include test(blue);
|
||||
@include flex(1 1 auto);
|
||||
margin-left: $overlayMargin;
|
||||
position: relative;
|
||||
|
||||
.top-bar,
|
||||
.message-body {
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Message as singleton
|
||||
.t-message-single {
|
||||
@include messageBlock(80px);
|
||||
|
||||
@include desktop {
|
||||
.l-message,
|
||||
.bottom-bar {
|
||||
@include absPosDefault();
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
top: auto;
|
||||
height: $ovrFooterH;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Messages in list
|
||||
.t-message-list {
|
||||
@include messageBlock(32px);
|
||||
|
||||
.message-contents {
|
||||
.l-message {
|
||||
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
|
||||
@include border-radius($controlCr);
|
||||
background: rgba($colorOvrFg, 0.1);
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: $interiorMarginLg;
|
||||
|
||||
.message-contents,
|
||||
.bottom-bar {
|
||||
//@include test(green);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-contents {
|
||||
font-size: 0.9em;
|
||||
margin-left: $interiorMarginLg;
|
||||
.message-action { color: pushBack($colorOvrFg, 20%); }
|
||||
.bottom-bar { text-align: left; }
|
||||
}
|
||||
|
||||
.top-bar,
|
||||
.message-body {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.message-contents .l-message { margin-right: $interiorMarginLg; }
|
||||
}
|
||||
}
|
||||
@@ -19,68 +19,105 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.splitter {
|
||||
// Redo the splitter.
|
||||
// New look is a simple line.
|
||||
// Main width is used to provide a good click area, and is always transparent
|
||||
// :after will be a positioned and colored element that is the handle
|
||||
|
||||
//@include test(red);
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
&:after {
|
||||
// The handle
|
||||
content:"";
|
||||
pointer-events: none;
|
||||
@include absPosDefault(0);
|
||||
background: $colorSplitterBg;
|
||||
display: block;
|
||||
|
||||
@if $splitterEndCr != 'none' {
|
||||
@include border-radius($splitterEndCr);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
&:after {
|
||||
background-color: $colorSplitterActive !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if $colorSplitterHover != 'none' {
|
||||
&:not(:active) {
|
||||
&:hover {
|
||||
&:after {
|
||||
background-color: $colorSplitterHover !important;
|
||||
@include trans-prop-nice(background-color, 150ms);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
$b: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
|
||||
.splitter {
|
||||
background-color: $b;
|
||||
@include border-radius($splitterEndCr);
|
||||
@include boxShdw($splitterShdw);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
//@if $colorSplitterHover != 'none' {
|
||||
&:hover {
|
||||
background-color: $colorSplitterHover;
|
||||
}
|
||||
//}
|
||||
}
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
$inset: splitterHandleInset($splitterD,$splitterHandleD);
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
|
||||
.pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($colorSplitterInterior, horizontal);
|
||||
cursor: row-resize;
|
||||
left: 0; right: 0;
|
||||
width: auto;
|
||||
height: $splitterW;
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
// Slides horizontally left to right, splitting the element vertically
|
||||
.pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left {
|
||||
right: auto;
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($colorBodyBg, vertical);
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: $splitterW;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
cursor: row-resize;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $splitterD;
|
||||
&:after {
|
||||
top: $inset; bottom: $inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area .splitter {
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
}
|
||||
|
||||
.edit-area .splitter {
|
||||
top: 0;
|
||||
&.vertical {
|
||||
// Slides horizontally left to right, splitting the element vertically
|
||||
.pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left {
|
||||
right: auto;
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&:not(.flush-right) {
|
||||
width: $splitterD;
|
||||
&:after {
|
||||
left: $inset; right: $inset;
|
||||
}
|
||||
}
|
||||
&.flush-right {
|
||||
width: ceil($splitterD / 2);
|
||||
&:after {
|
||||
background-color: transparent;
|
||||
left: auto; right: 0; width: $splitterHandleD;
|
||||
}
|
||||
&.edge-shdw {
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,27 +86,16 @@
|
||||
//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;
|
||||
text-align: center;
|
||||
.item-type,
|
||||
.t-item-icon {
|
||||
//@include test();
|
||||
@include transform(translateX(-50%) translateY(-55%));
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
//height: $iconD; width: $iconD;
|
||||
font-size: $iconD * 0.95; //6em;
|
||||
line-height: $iconD;
|
||||
bottom: auto;
|
||||
height: $iconD;
|
||||
top: $iconMargin - 10;
|
||||
.l-icon-link {
|
||||
color: $colorIconLink;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
position: absolute;
|
||||
font-size: 0.3em;
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
//line-height: normal;
|
||||
//text-align: center;
|
||||
}
|
||||
.item-open {
|
||||
@include trans-prop-nice("opacity", $transTime);
|
||||
|
||||
@@ -20,10 +20,12 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
|
||||
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobileOverlayMargin: 10px;
|
||||
$mobileOverlayMargin: 20px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
|
||||
@@ -49,18 +49,11 @@
|
||||
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
//@include test(blue);
|
||||
.item-type,
|
||||
.t-item-icon {
|
||||
font-size: $mobileListIconSize;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
line-height: 100%;
|
||||
text-align: left;
|
||||
width: $mobileListIconSize;
|
||||
.l-icon-link {
|
||||
bottom: 0;
|
||||
}
|
||||
left: $interiorMarginLg + $interiorMargin;
|
||||
line-height: normal;
|
||||
}
|
||||
.item-open {
|
||||
display: block;
|
||||
|
||||
@@ -32,88 +32,77 @@
|
||||
background-color: $colorMobilePaneLeft;
|
||||
}
|
||||
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
//@include test();
|
||||
@include slMenuTransitions;
|
||||
margin-left: 0 !important;
|
||||
#content-area {
|
||||
.holder-object-and-inspector {
|
||||
@include slMenuTransitions;
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
.create-btn-holder {
|
||||
// Hide the create button by default in mobile;
|
||||
// This can be overridden by the examples/mobile bundle
|
||||
display: none;
|
||||
}
|
||||
|
||||
.holder.l-mobile {
|
||||
top: $bodyMargin !important;
|
||||
.holder.holder-treeview-elements {
|
||||
right: $bodyMargin !important;
|
||||
bottom: $bodyMargin !important;
|
||||
left: $bodyMargin !important;
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.browse-hidetree {
|
||||
@include user-select(none);
|
||||
.pane-tree-hidden {
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
.pane.left.treeview {
|
||||
opacity: 0;
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
@include trans-prop-nice(opacity, 150ms);
|
||||
opacity: 0 !important;
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-showtree {
|
||||
.pane-tree-showing {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include user-select(none);
|
||||
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
.pane.left.treeview {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
@include trans-prop-nice(opacity, 250ms, $delay: 250ms);
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
//width: auto !important; // CH CO
|
||||
right: auto !important;
|
||||
width: $proporMenuWithView !important;
|
||||
}
|
||||
// Sets the right representation when the tree is shown.
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
left: $proporMenuWithView !important;
|
||||
//width: auto !important;
|
||||
|
||||
//left: 0 !important;
|
||||
//transform: translateX($proporMenuWithView);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
.toggle-tree {
|
||||
color: $colorKey !important;
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: $bodyMargin + 2;
|
||||
left: $bodyMargin;
|
||||
&:after {
|
||||
content:'m' !important;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar {
|
||||
//@include test();
|
||||
left: 30px !important;
|
||||
left: 45px !important;
|
||||
.context-available {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@@ -153,14 +142,14 @@
|
||||
}
|
||||
|
||||
@include phonePortrait {
|
||||
.browse-showtree {
|
||||
.pane-tree-showing {
|
||||
.pane.left.treeview {
|
||||
width: $proporMenuOnly !important;
|
||||
}
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
left: 0 !important;
|
||||
@include webkitProp(transform, translateX($proporMenuOnly));
|
||||
#content-area {
|
||||
@include transform(translateX($proporMenuOnly));
|
||||
.holder-object-and-inspector {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -171,4 +160,4 @@
|
||||
.desktop-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,6 +20,8 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/* REQUIRES /platform/commonUI/general/res/sass/mobile/_constants.scss */
|
||||
|
||||
// Phones in any orientation
|
||||
@mixin phone {
|
||||
@media #{$phonePortrait},
|
||||
|
||||
@@ -37,21 +37,18 @@
|
||||
//@include test(red);
|
||||
position: absolute;
|
||||
font-size: 1.1em;
|
||||
height: $mobileTreeItemH;
|
||||
line-height: inherit;
|
||||
right: 0px;
|
||||
width: $mobileTreeRightArrowW;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
.label,
|
||||
.t-object-label {
|
||||
left: 0;
|
||||
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
|
||||
line-height: $mobileTreeItemH;
|
||||
//font-size: 1.1em; // CH CO
|
||||
.type-icon {
|
||||
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
|
||||
}
|
||||
.title-label {
|
||||
}
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,21 +22,19 @@
|
||||
|
||||
// Override the Create menu for mobile
|
||||
@include phoneandtablet {
|
||||
.menu-element {
|
||||
.super-menu {
|
||||
$d: 250px;
|
||||
width: $d;
|
||||
height: $d;
|
||||
.super-menu {
|
||||
$d: 250px;
|
||||
width: $d;
|
||||
height: $d;
|
||||
|
||||
.pane {
|
||||
&.left {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.right {
|
||||
display: none;
|
||||
}
|
||||
.pane {
|
||||
&.left {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
@include phoneandtablet {
|
||||
.overlay {
|
||||
$m: 0;
|
||||
.clk-icon.close {
|
||||
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
|
||||
}
|
||||
|
||||
> .holder {
|
||||
@include border-radius($m);
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
height: 90%; width: 90%;
|
||||
|
||||
> .contents {
|
||||
top: $mobileOverlayMargin;
|
||||
right: $mobileOverlayMargin;
|
||||
@@ -22,35 +18,64 @@
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.form.editor {
|
||||
border: none;
|
||||
|
||||
.contents {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include phone {
|
||||
.overlay > .holder > .contents .form.editor .contents .form-row {
|
||||
> .label,
|
||||
> .controls {
|
||||
//@include test(blue);
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
.overlay > .holder {
|
||||
//@include test(orange); // This works!
|
||||
$m: 0;
|
||||
@include border-radius($m);
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
height: auto; width: auto;
|
||||
min-width: 200px; min-height: 200px;
|
||||
max-height: 100%; max-width: 100%;
|
||||
overflow: auto;
|
||||
@include transform(none);
|
||||
|
||||
.editor .form .form-row {
|
||||
> .label,
|
||||
> .controls {
|
||||
//@include test(blue);
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
> .label {
|
||||
&:after {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
.abs.top-bar,
|
||||
.abs.editor,
|
||||
.abs.message-body,
|
||||
.abs.bottom-bar {
|
||||
//@include test(orange);
|
||||
top: auto; right: auto; bottom: auto; left: auto;
|
||||
height: auto; width: auto;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-dialog-sm .overlay > .holder {
|
||||
//@include test(blue);
|
||||
height: auto; max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include phonePortrait {
|
||||
.overlay > .holder {
|
||||
.contents .bottom-bar {
|
||||
text-align: center;
|
||||
}
|
||||
> .label {
|
||||
&:after {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,79 +20,124 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.overlay {
|
||||
.blocker {
|
||||
background: $colorOvrBlocker;
|
||||
z-index: 100;
|
||||
}
|
||||
font-size: 90%;
|
||||
.blocker {
|
||||
background: $colorOvrBlocker;
|
||||
z-index: 100;
|
||||
}
|
||||
.clk-icon.close {
|
||||
font-size: 0.8rem;
|
||||
position: absolute;
|
||||
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
|
||||
z-index: 100;
|
||||
top: $interiorMarginLg;
|
||||
right: $interiorMarginLg;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
>.holder {
|
||||
$i: 15%;
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
@include border-radius($basicCr * 3);
|
||||
color: $colorOvrFg;
|
||||
top: $i; right: $i; bottom: $i; left: $i;
|
||||
z-index: 101;
|
||||
>.contents {
|
||||
> .holder {
|
||||
//$i: 15%;
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
@include border-radius($basicCr * 3);
|
||||
color: $colorOvrFg;
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%) translateY(-50%));
|
||||
height: 70%;
|
||||
width: 50%;
|
||||
min-height: 300px;
|
||||
max-height: 800px;
|
||||
min-width: 600px;
|
||||
max-width: 1000px;
|
||||
z-index: 101;
|
||||
> .contents {
|
||||
$m: $overlayMargin;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
|
||||
//.top-bar,
|
||||
//.editor,
|
||||
//.bottom-bar {
|
||||
// @include absPosDefault();
|
||||
//}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
line-height: 120%;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: pushBack($colorOvrFg, 20%);
|
||||
}
|
||||
|
||||
.abs.top-bar {
|
||||
height: $ovrTopBarH;
|
||||
}
|
||||
|
||||
.editor {
|
||||
top: $ovrTopBarH + ($interiorMargin * 2);
|
||||
bottom: $ovrFooterH + $interiorMargin * 2;
|
||||
left: 0; right: 0;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
top: auto; right: 0; bottom: 0; left: 0;
|
||||
overflow: visible;
|
||||
//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;
|
||||
// }
|
||||
//}
|
||||
|
||||
.abs.editor,
|
||||
.abs.message-body {
|
||||
top: $ovrTopBarH + $interiorMarginLg;
|
||||
bottom: $ovrFooterH + $interiorMarginLg;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
.field.l-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contents.l-dialog {
|
||||
$myM: $interiorMargin;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
overflow: auto;
|
||||
.field.l-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
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;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.abs.bottom-bar {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
//font-size: 1em;
|
||||
height: $ovrFooterH;
|
||||
}
|
||||
|
||||
.l-progress-bar {
|
||||
$h: $progressBarHOverlay;
|
||||
display: block;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin: .5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.t-dialog-sm .overlay > .holder {
|
||||
// Used for blocker and in-progress dialogs, modal alerts, etc.
|
||||
//@include test(red);
|
||||
$h: 225px;
|
||||
min-height: $h;
|
||||
height: $h;
|
||||
}
|
||||
@@ -20,30 +20,22 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.abs.search-holder {
|
||||
//@include test(#990000);
|
||||
height: $treeSearchInputBarH;
|
||||
bottom: 0;
|
||||
&.active {
|
||||
height: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
top: 23px;
|
||||
|
||||
// Align with the top of the divider bar, below create button
|
||||
//margin-top: 10px; // CH comment out
|
||||
z-index:5;
|
||||
.clear-icon,
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
font-family: symbolsfont;
|
||||
@include trans-prop-nice((opacity, color), 150ms);
|
||||
}
|
||||
|
||||
.search {
|
||||
.clear-icon {
|
||||
// 'x' in circle icon
|
||||
&:before {
|
||||
content: '\e607';
|
||||
}
|
||||
}
|
||||
|
||||
.holder-search {
|
||||
$iconWidth: 20px;
|
||||
$leftMargin: 6px;
|
||||
$rightPadding: 5px;
|
||||
@include webkitVal(display, flex);
|
||||
//display: flex;
|
||||
@include webkitProp(flex-direction, column);
|
||||
//flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.search-bar {
|
||||
$textInputHeight: 19px; // This is equal to the default value, 19px
|
||||
@@ -52,38 +44,25 @@
|
||||
font-size: 0.8em;
|
||||
max-width: 250px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.search-input,
|
||||
.search-icon {
|
||||
}
|
||||
|
||||
|
||||
.search-input {
|
||||
height: $treeSearchInputBarH;
|
||||
line-height: $treeSearchInputBarH;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.search-icon,
|
||||
&:before,
|
||||
.clear-icon,
|
||||
.menu-icon {
|
||||
//@include test(#008800);
|
||||
@include box-sizing(border-box);
|
||||
color: $colorInputIcon;
|
||||
height: $iconD; width: $iconD;
|
||||
height: $iconD;
|
||||
width: $iconD;
|
||||
line-height: $iconD;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: $iconEdgeM;
|
||||
}
|
||||
|
||||
.clear-icon,
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
@include transition(color, .25s);
|
||||
}
|
||||
|
||||
|
||||
.search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -92,31 +71,21 @@
|
||||
|
||||
// Make work for mct-control textfield
|
||||
input {
|
||||
width: 100%;
|
||||
width: inherit; // was 100%
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
//color: $colorItemFg;
|
||||
left: $interiorMarginSm;
|
||||
transition: visibility .15s, opacity .15s, color .2s;
|
||||
pointer-events: none;
|
||||
|
||||
&.content {
|
||||
// Make icon invisible whenever there is text input
|
||||
//visibility: hidden;
|
||||
//opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Make icon invisible when the text input is focused
|
||||
.search-input:focus + div.search-icon {
|
||||
//visibility: hidden;
|
||||
//opacity: 0;
|
||||
}
|
||||
&:before {
|
||||
// Magnify glass icon
|
||||
content:'\4d';
|
||||
font-family: symbolsfont;
|
||||
left: $interiorMarginSm;
|
||||
@include trans-prop-nice(color, 250ms);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Make icon lighten when hovering over search bar
|
||||
.search-input:hover + div.search-icon {
|
||||
&:hover:before {
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
|
||||
@@ -124,13 +93,10 @@
|
||||
right: $iconD + $interiorMargin;
|
||||
|
||||
// Icon is visible only when there is text input
|
||||
visibility: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
transition: visibility .15s, opacity .15s, color .2s;
|
||||
|
||||
&.content {
|
||||
visibility: visible;
|
||||
&.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -140,6 +106,8 @@
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
// 'v' invoke menu icon
|
||||
&:before { content: '\76'; }
|
||||
font-size: 0.8em;
|
||||
padding-right: $iconEdgeM;
|
||||
right: $iconEdgeM;
|
||||
@@ -152,43 +120,19 @@
|
||||
|
||||
.search-menu-holder {
|
||||
float: right;
|
||||
//margin-top: $textInputHeight - 2px;
|
||||
//left: -50px;
|
||||
left: -20px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
z-index: 70;
|
||||
transition: visibility .05s, opacity .05s;
|
||||
|
||||
&.off {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hovering reveals menu
|
||||
.menu-icon:hover + div.search-menu-holder {
|
||||
visibility: visible;
|
||||
}
|
||||
div.search-menu-holder:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.active-filter-display {
|
||||
//order: 2;
|
||||
$s: 0.65em;
|
||||
$p: $interiorMargin;
|
||||
@include border-radius($basicCr);
|
||||
@include box-sizing(border-box);
|
||||
line-height: 130%;
|
||||
padding: $p 0;
|
||||
padding-left: $s * 2.25;
|
||||
font-size: $s;
|
||||
//background-color: rgba(#000, 0.3);
|
||||
//border-radius: $basicCr;
|
||||
margin-top: $interiorMarginSm;
|
||||
|
||||
|
||||
.clear-filters-icon {
|
||||
color: $colorInputIcon;
|
||||
@@ -198,43 +142,28 @@
|
||||
left: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Transition looks weird when the results list has none
|
||||
//transition: visibility .2s, opacity .2s;
|
||||
|
||||
&.off {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-scroll {
|
||||
order: 3;
|
||||
margin-top: 4px;
|
||||
|
||||
// Adjustable scrolling size
|
||||
overflow-y: auto;
|
||||
top: auto;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
|
||||
.load-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
@include trans-prop-nice((opacity, visibility), 250ms);
|
||||
margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
|
||||
padding-right: $interiorMargin;
|
||||
.hint {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
font-size: 0.65em;
|
||||
opacity: 0.6;
|
||||
}
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.load-more-button {
|
||||
margin-top: $interiorMargin 0;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin-left: -45px;
|
||||
text-align: center;
|
||||
width: 90px;
|
||||
@include transform(translateX(-50%));
|
||||
display: inline-block;
|
||||
margin-top: $interiorMargin;
|
||||
padding: 0 $interiorMarginLg;
|
||||
font-size: 0.75em;
|
||||
margin-left: 50%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +52,6 @@ ul.tree {
|
||||
font-size: 0.75em;
|
||||
width: $treeVCW;
|
||||
$runningItemW: $interiorMargin + $treeVCW;
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
color: $colorItemTreeVCHover !important;
|
||||
@@ -60,25 +59,34 @@ ul.tree {
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label,
|
||||
.t-object-label {
|
||||
display: block;
|
||||
// @include test(orange);
|
||||
@include absPosDefault();
|
||||
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
|
||||
line-height: $menuLineH;
|
||||
//left: $runningItemW;
|
||||
|
||||
.t-item-icon {
|
||||
@include txtShdwSubtle($shdwItemTreeIcon);
|
||||
font-size: $treeTypeIconH;
|
||||
color: $colorItemTreeIcon;
|
||||
position: absolute;
|
||||
left: $interiorMargin;
|
||||
top: 50%;
|
||||
width: $treeTypeIconH;
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
//@include absPosDefault(0, false);
|
||||
$d: $treeTypeIconH; // 16px is crisp size
|
||||
$d: $treeTypeIconH;
|
||||
@include txtShdwSubtle($shdwItemTreeIcon);
|
||||
font-size: $d;
|
||||
font-size: $treeTypeIconH;
|
||||
color: $colorItemTreeIcon;
|
||||
left: $interiorMargin;
|
||||
position: absolute;
|
||||
@include verticalCenterBlock($menuLineHPx, $d);
|
||||
@include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx);
|
||||
line-height: 100%;
|
||||
right: auto; width: $d;
|
||||
right: auto; width: $treeTypeIconH;
|
||||
|
||||
.icon {
|
||||
&.l-icon-link,
|
||||
@@ -100,7 +108,8 @@ ul.tree {
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
.title-label,
|
||||
.t-title-label {
|
||||
@include absPosDefault();
|
||||
display: block;
|
||||
left: $runningItemW + ($interiorMargin * 3);
|
||||
@@ -116,7 +125,7 @@ ul.tree {
|
||||
.view-control {
|
||||
color: $colorItemTreeSelectedVC;
|
||||
}
|
||||
.label .type-icon {
|
||||
.t-object-label .t-item-icon {
|
||||
color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
@@ -125,9 +134,9 @@ ul.tree {
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
|
||||
color: pullForward($colorBodyFg, 20%);
|
||||
.icon {
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.t-item-icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
@@ -152,7 +161,7 @@ ul.tree {
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
.label {
|
||||
.t-object-label {
|
||||
left: $interiorMargin + $treeVCW;
|
||||
}
|
||||
}
|
||||
@@ -1,72 +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.
|
||||
*****************************************************************************/
|
||||
.ue-bottom-bar {
|
||||
background: $colorFooterBg;
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: .7rem;
|
||||
//line-height: $ueFooterH - 4px;
|
||||
//line-height: $ueFooterH; // New status bar design
|
||||
.status-holder {
|
||||
//@include border-radius($basicCr * 1.75); // New status bar design
|
||||
@include box-sizing(border-box);
|
||||
//background: $colorFooterBg;
|
||||
//border-bottom: 1px solid lighten($colorBodyBg, 10%); // New status bar design
|
||||
@include absPosDefault($interiorMargin);
|
||||
@include ellipsize();
|
||||
line-height: $ueFooterH - ($interiorMargin * 2);
|
||||
right: 120px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.app-logo {
|
||||
@include box-sizing(border-box);
|
||||
@include absPosDefault($interiorMargin);
|
||||
left: auto;
|
||||
cursor: pointer;
|
||||
//font-size: 0.8em;
|
||||
//line-height: $ueFooterH - 10px;
|
||||
//padding-top: 1px;
|
||||
//text-transform: uppercase;
|
||||
&.logo-openmctweb {
|
||||
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status.block {
|
||||
//display: inline-block;
|
||||
display: inline; // New status bar design. Inline to support ellipsis overflow
|
||||
margin-right: $interiorMarginLg;
|
||||
.status-indicator {
|
||||
//@include border-radius($controlCr * 0.9);
|
||||
//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
|
||||
//@include text-shadow(rgba(black, 0.3) 0 0 2px);
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
color: $colorKey;
|
||||
&.ok {
|
||||
color: #009900;
|
||||
}
|
||||
&.caution {
|
||||
color: #ffaa00;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,11 +29,13 @@
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
}
|
||||
>.object-header.abs {
|
||||
//@include test(red);
|
||||
.object-top-bar {
|
||||
font-size: 0.75em;
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
.left {
|
||||
padding-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
>.object-holder.abs {
|
||||
top: $ohH + $interiorMargin;
|
||||
|
||||
@@ -19,23 +19,6 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@mixin cols($totalCols, $span) {
|
||||
$cw: 100% / $totalCols;
|
||||
min-width: (500px / $totalCols) * $span;
|
||||
@if ($totalCols != $span) {
|
||||
width: ($cw * $span) - $ueColMargin;
|
||||
} @else {
|
||||
width: $cw;
|
||||
}
|
||||
}
|
||||
|
||||
.holder-all {
|
||||
$myM: 0; // $interiorMarginSm;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
@@ -48,7 +31,7 @@
|
||||
}
|
||||
|
||||
.contents {
|
||||
$myM: 0; //$interiorMargin;
|
||||
$myM: 0;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: $myM;
|
||||
@@ -63,45 +46,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
.icon.major {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
&.abs {
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
&.left,
|
||||
.left {
|
||||
width: 45%;
|
||||
right: auto;
|
||||
}
|
||||
&.right,
|
||||
.right {
|
||||
width: 45%;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
.icon.major {
|
||||
margin-left: $interiorMargin * 3;
|
||||
}
|
||||
}
|
||||
.l-flex,
|
||||
&.l-flex {
|
||||
.left,
|
||||
.right {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ {
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
.editor {
|
||||
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
|
||||
right: $bodyMargin;
|
||||
bottom: $ueFooterH + $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
|
||||
.browse-area,
|
||||
@@ -115,103 +63,50 @@
|
||||
.edit-area {
|
||||
$tbH: $btnToolbarH + $interiorMargin;
|
||||
top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
bottom: $bodyMargin + $ueFooterH;
|
||||
.tool-bar {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
bottom: auto;
|
||||
height: $tbH;
|
||||
line-height: $btnToolbarH;
|
||||
}
|
||||
.work-area {
|
||||
.object-holder.work-area {
|
||||
top: $tbH + $interiorMargin * 2;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ue-bottom-bar {
|
||||
//@include absPosDefault($bodyMargin);
|
||||
@include absPosDefault(0); // New status bar design
|
||||
top: auto;
|
||||
height: $ueFooterH;
|
||||
.status-holder {
|
||||
//right: $ueAppLogoW + $bodyMargin; New status bar design
|
||||
z-index: 1;
|
||||
}
|
||||
.app-logo {
|
||||
left: auto;
|
||||
width: $ueAppLogoW;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cols {
|
||||
@include clearfix;
|
||||
.col {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
// background: rgba(#ffcc00, 0.2);
|
||||
float: left;
|
||||
margin-left: $ueColMargin;
|
||||
padding-left: $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.cols-2 {
|
||||
$nc: 2;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
}
|
||||
&.cols-2-ff {
|
||||
// 2 columns, first column is fixed, second is fluid
|
||||
.col-100px {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-6 {
|
||||
$nc: 6;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
}
|
||||
&.cols-16 {
|
||||
$nc: 16;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
.col-2 {
|
||||
@include cols($nc, 2);
|
||||
}
|
||||
.col-7 {
|
||||
@include cols($nc, 7);
|
||||
}
|
||||
}
|
||||
&.cols-32 {
|
||||
$nc: 32;
|
||||
.col-2 {
|
||||
@include cols($nc, 2);
|
||||
}
|
||||
.col-15 {
|
||||
@include cols($nc, 15);
|
||||
}
|
||||
}
|
||||
.l-row {
|
||||
@include clearfix;
|
||||
padding: $interiorMargin 0;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-mode {
|
||||
.split-layout {
|
||||
.split-pane-component.pane.left {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $ueBrowseLeftPaneW;
|
||||
}
|
||||
}
|
||||
// from _bottom-bar.scss
|
||||
.ue-bottom-bar {
|
||||
@include absPosDefault(0);// New status bar design
|
||||
top: auto;
|
||||
height: $ueFooterH;
|
||||
line-height: $ueFooterH - ($interiorMargin * 2);
|
||||
background: $colorFooterBg;
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: .7rem;
|
||||
.status-holder {
|
||||
@include box-sizing(border-box);
|
||||
@include absPosDefault($interiorMargin);
|
||||
@include ellipsize();
|
||||
right: 120px;
|
||||
text-transform: uppercase;
|
||||
z-index: 1;
|
||||
}
|
||||
.app-logo {
|
||||
@include box-sizing(border-box);
|
||||
@include absPosDefault($interiorMargin);
|
||||
cursor: pointer;
|
||||
left: auto;
|
||||
width: $ueAppLogoW;
|
||||
z-index: 2;
|
||||
&.logo-openmctweb {
|
||||
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-mode {
|
||||
@@ -227,23 +122,63 @@
|
||||
}
|
||||
|
||||
.pane {
|
||||
@include box-sizing(border-box);
|
||||
position: absolute;
|
||||
&.treeview.left {
|
||||
.create-btn-holder {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
height: $ueTopBarH;
|
||||
.wrapper.menu-element {
|
||||
position: absolute;
|
||||
bottom: $interiorMargin;
|
||||
|
||||
.pane-header {
|
||||
text-transform: uppercase;
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
}
|
||||
|
||||
.primary-pane {
|
||||
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.mini-tab-icon.toggle-pane {
|
||||
z-index: 5;
|
||||
@include desktop {
|
||||
$d: $uePaneMiniTabH;
|
||||
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
|
||||
top: $bodyMargin;
|
||||
height: $d;
|
||||
line-height: $d;
|
||||
&:after {
|
||||
// Always the icon that shows when the pane is collapsed
|
||||
opacity: 0;
|
||||
}
|
||||
&.collapsed {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.toggle-tree.anchor-left {
|
||||
left: 0;
|
||||
@include transform(translateX(-1 * $paneExpandedOffset));
|
||||
&:after {
|
||||
content: '\6d'; // Menu 'hamburger' icon
|
||||
}
|
||||
&.collapsed {
|
||||
left: 0;
|
||||
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
|
||||
}
|
||||
&:not(.collapsed):before {
|
||||
@include trans-prop-nice(opacity, 200ms, 200ms);
|
||||
}
|
||||
}
|
||||
&.toggle-inspect.anchor-right {
|
||||
right: $bodyMargin;
|
||||
&:after {
|
||||
content: '\e615'; // e615: Crosshair icon; was e608: Info "i" icon
|
||||
}
|
||||
&.collapsed {
|
||||
right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-holder {
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
}
|
||||
.tree-holder {
|
||||
overflow: auto;
|
||||
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
|
||||
}
|
||||
}
|
||||
&.items {
|
||||
@@ -257,42 +192,35 @@
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
&.horizontal {
|
||||
// Slides up and down
|
||||
> .pane {
|
||||
// @include test();
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// Specific elements margins
|
||||
.holder.holder-treeview-elements {
|
||||
top: $bodyMargin;
|
||||
right: 0;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
}
|
||||
&.vertical {
|
||||
// Slides left and right
|
||||
> .pane {
|
||||
// @include test();
|
||||
margin-left: $interiorMargin;
|
||||
> .holder {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
.holder {
|
||||
right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.holder.holder-object-and-inspector {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.holder-object {
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
}
|
||||
.holder-inspector-elements {
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.object-holder {
|
||||
@include trans-prop-nice-resize(0.25s);
|
||||
overflow: hidden; // Contained objects need to handle their own overflow now
|
||||
> ng-include {
|
||||
@include absPosDefault(0, auto);
|
||||
}
|
||||
@include absPosDefault(0, auto);
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
&.l-controls-visible {
|
||||
&.l-time-controller-visible {
|
||||
bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
|
||||
@@ -356,60 +284,101 @@
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** OBJECT BROWSE BAR */
|
||||
.object-browse-bar {
|
||||
//@include test(blue);
|
||||
@include absPosDefault(0, visible);
|
||||
@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
|
||||
@include box-sizing(border-box);
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
white-space: nowrap;
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMarginLg * 2;
|
||||
padding-right: $interiorMarginLg;
|
||||
.l-back {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-flex {
|
||||
@include display-flex;
|
||||
&.flex-row {
|
||||
@include flex-flow(row nowrap);
|
||||
//@include align-items(center);
|
||||
.flex-elem {
|
||||
white-space: nowrap;
|
||||
margin-right: $interiorMargin;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.pane-tree-hidden {
|
||||
// Sets the left tree menu when the tree is hidden.
|
||||
.tree-holder,
|
||||
.splitter-treeview,
|
||||
.holder-treeview-elements {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pane-tree-showing {
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
.tree-holder,
|
||||
.splitter-treeview {
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.holder-treeview-elements {
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
|
||||
}
|
||||
}
|
||||
|
||||
.pane-inspect-showing {
|
||||
.l-object-and-inspector {
|
||||
.l-inspect,
|
||||
.splitter-inspect {
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pane-inspect-hidden {
|
||||
.l-object-and-inspector {
|
||||
.t-inspect {
|
||||
z-index: 1 !important; // Move down so that primary pane elements are clickable
|
||||
}
|
||||
.l-inspect,
|
||||
.splitter-inspect {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.holder-all {
|
||||
min-width: $ueDesktopMinW;
|
||||
}
|
||||
.split-layout {
|
||||
.split-pane-component.pane {
|
||||
&.treeview.left {
|
||||
min-width: $ueBrowseLeftPaneTreeMinW;
|
||||
max-width: $ueBrowseLeftPaneTreeMaxW;
|
||||
width: $ueBrowseLeftPaneTreeW;
|
||||
}
|
||||
&.flex-align-end {
|
||||
@include justify-content(flex-end);
|
||||
&.t-inspect.right {
|
||||
min-width: $ueBrowseRightPaneInspectMinW;
|
||||
max-width: $ueBrowseRightPaneInspectMaxW;
|
||||
width: $ueBrowseRightPaneInspectW;
|
||||
z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
|
||||
}
|
||||
}
|
||||
}
|
||||
&.flex-col {
|
||||
@include flex-flow(column nowrap);
|
||||
//@include align-items(stretch);
|
||||
.flex-elem.active {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.pane.treeview.left .tree-holder {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
.flex-elem {
|
||||
//@include test(purple);
|
||||
@include flex(0 1 auto);
|
||||
position: relative;
|
||||
&.grow {
|
||||
@include flex(1 1 auto);
|
||||
}
|
||||
.pane-tree-hidden {
|
||||
.pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
|
||||
}
|
||||
.left {
|
||||
@include flex(1 1 0);
|
||||
padding-right: $interiorMarginLg;
|
||||
.pane-inspect-hidden .l-object-and-inspector {
|
||||
.pane.left { right: $ueCollapsedPaneEdgeM !important; }
|
||||
}
|
||||
}
|
||||
.pane:not(.resizing) {
|
||||
@include trans-prop-nice-resize-w(250ms);
|
||||
}
|
||||
.pane.primary-pane .object-browse-bar {
|
||||
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,5 +26,6 @@
|
||||
key="indicator.template">
|
||||
</mct-include>
|
||||
</div>
|
||||
<mct-include key="'message-banner'"></mct-include>
|
||||
<mct-include key="'about-logo'"></mct-include>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<span class="s-btn"
|
||||
ng-controller="DateTimeFieldController">
|
||||
<input type="text"
|
||||
ng-model="textValue"
|
||||
ng-class="{ error: textInvalid }">
|
||||
</input>
|
||||
<a class="ui-symbol icon icon-calendar"
|
||||
ng-if="structure.format === 'utc' || !structure.format"
|
||||
ng-click="pickerActive = !pickerActive">
|
||||
</a>
|
||||
<mct-popup ng-if="pickerActive">
|
||||
<div mct-click-elsewhere="pickerActive = false">
|
||||
<mct-control key="'datetime-picker'"
|
||||
ng-model="ngModel"
|
||||
field="field"
|
||||
options="{ hours: true }">
|
||||
</mct-control>
|
||||
</div>
|
||||
</mct-popup>
|
||||
</span>
|
||||
@@ -19,84 +19,67 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<!-- MINE -->
|
||||
<div ng-controller="TimeRangeController">
|
||||
<div class="l-time-range-inputs-holder">
|
||||
<span class="l-time-range-inputs-elem ui-symbol type-icon">C</span>
|
||||
<span class="l-time-range-input" ng-controller="ToggleController as t1">
|
||||
<!--<span class="lbl">Start</span>-->
|
||||
<span class="s-btn time-range-start" ng-click="t1.toggle()">
|
||||
<span class="val">{{startOuterText}}</span>
|
||||
<a class="ui-symbol icon icon-calendar"></a>
|
||||
<mct-popup ng-if="t1.isActive()">
|
||||
<div mct-click-elsewhere="t1.setState(false)">
|
||||
<mct-control key="'datetime-picker'"
|
||||
ng-model="ngModel.outer"
|
||||
field="'start'"
|
||||
options="{ hours: true }">
|
||||
</mct-control>
|
||||
</div>
|
||||
</mct-popup>
|
||||
</span>
|
||||
</span>
|
||||
<div class="l-time-range-inputs-holder">
|
||||
<span class="l-time-range-inputs-elem ui-symbol type-icon">C</span>
|
||||
<span class="l-time-range-input">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{ format: parameters.format }"
|
||||
ng-model="ngModel.outer"
|
||||
field="'start'"
|
||||
class="time-range-start">
|
||||
</mct-control>
|
||||
</span>
|
||||
|
||||
<span class="l-time-range-inputs-elem lbl">to</span>
|
||||
<span class="l-time-range-inputs-elem lbl">to</span>
|
||||
|
||||
<span class="l-time-range-input" ng-controller="ToggleController as t2">
|
||||
<!--<span class="lbl">End</span>-->
|
||||
<span class="s-btn l-time-range-input" ng-click="t2.toggle()">
|
||||
<span class="val">{{endOuterText}}</span>
|
||||
<a class="ui-symbol icon icon-calendar"></a>
|
||||
<mct-popup ng-if="t2.isActive()">
|
||||
<div mct-click-elsewhere="t2.setState(false)">
|
||||
<mct-control key="'datetime-picker'"
|
||||
ng-model="ngModel.outer"
|
||||
field="'end'"
|
||||
options="{ hours: true }">
|
||||
</mct-control>
|
||||
</div>
|
||||
</mct-popup>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="l-time-range-input" ng-controller="ToggleController as t2">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{ format: parameters.format }"
|
||||
ng-model="ngModel.outer"
|
||||
field="'end'"
|
||||
class="time-range-end">
|
||||
</mct-control>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="l-time-range-slider-holder">
|
||||
<div class="l-time-range-slider">
|
||||
<div class="slider"
|
||||
mct-resize="spanWidth = bounds.width">
|
||||
<div class="knob knob-l"
|
||||
mct-drag-down="startLeftDrag()"
|
||||
mct-drag="leftDrag(delta[0])"
|
||||
ng-style="{ left: startInnerPct }">
|
||||
<div class="range-value">{{startInnerText}}</div>
|
||||
</div>
|
||||
<div class="knob knob-r"
|
||||
mct-drag-down="startRightDrag()"
|
||||
mct-drag="rightDrag(delta[0])"
|
||||
ng-style="{ right: endInnerPct }">
|
||||
<div class="range-value">{{endInnerText}}</div>
|
||||
</div>
|
||||
<div class="slot range-holder">
|
||||
<div class="range"
|
||||
mct-drag-down="startMiddleDrag()"
|
||||
mct-drag="middleDrag(delta[0])"
|
||||
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
||||
<div class="toi-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-time-range-slider-holder">
|
||||
<div class="l-time-range-slider">
|
||||
<div class="slider"
|
||||
mct-resize="spanWidth = bounds.width">
|
||||
<div class="knob knob-l"
|
||||
mct-drag-down="startLeftDrag()"
|
||||
mct-drag="leftDrag(delta[0])"
|
||||
ng-style="{ left: startInnerPct }">
|
||||
<div class="range-value">{{startInnerText}}</div>
|
||||
</div>
|
||||
<div class="knob knob-r"
|
||||
mct-drag-down="startRightDrag()"
|
||||
mct-drag="rightDrag(delta[0])"
|
||||
ng-style="{ right: endInnerPct }">
|
||||
<div class="range-value">{{endInnerText}}</div>
|
||||
</div>
|
||||
<div class="slot range-holder">
|
||||
<div class="range"
|
||||
mct-drag-down="startMiddleDrag()"
|
||||
mct-drag="middleDrag(delta[0])"
|
||||
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
||||
<div class="toi-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-time-range-ticks-holder">
|
||||
<div class="l-time-range-ticks">
|
||||
<div
|
||||
ng-repeat="tick in ticks"
|
||||
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
|
||||
class="tick tick-x"
|
||||
>
|
||||
<span class="l-time-range-tick-label">{{tick}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-time-range-ticks-holder">
|
||||
<div class="l-time-range-ticks">
|
||||
<div
|
||||
ng-repeat="tick in ticks track by $index"
|
||||
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
|
||||
class="tick tick-x"
|
||||
>
|
||||
<span class="l-time-range-tick-label">{{tick}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,20 +19,21 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
|
||||
<!--<div ng-init="reps = [1,2,3]"></div>-->
|
||||
<div class='status block'
|
||||
title="{{ngModel.getDescription()}}"
|
||||
ng-click='ngModel.configure()'
|
||||
ng-class='ngModel.getClass()'
|
||||
ng-show="ngModel.getText().length > 0">
|
||||
<span class="ui-symbol status-indicator"
|
||||
ng-class='ngModel.getGlyphClass()'>
|
||||
{{ngModel.getGlyph()}}
|
||||
</span>
|
||||
<span class="label"
|
||||
ng-class='ngModel.getTextClass()'>
|
||||
{{ngModel.getText()}}
|
||||
</span>
|
||||
<a href=''
|
||||
title="{{ngModel.getDescription()}}"
|
||||
ng-click='ngModel.configure()'
|
||||
ng-class='ngModel.getGlyphClass()'
|
||||
ng-show="ngModel.getText().length > 0">
|
||||
<span class="ui-symbol status-indicator">
|
||||
{{ngModel.getGlyph()}}
|
||||
</span><span class="label"
|
||||
ng-class='ngModel.getTextClass()'>
|
||||
{{ngModel.getText()}}
|
||||
</span><span class="count">
|
||||
<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
|
||||
</span><a href=''
|
||||
class="ui-symbol"
|
||||
ng-if="ngModel.configure">
|
||||
G
|
||||
|
||||
@@ -19,16 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span class="label s-label">
|
||||
<span class='ui-symbol icon type-icon'>
|
||||
{{type.getGlyph()}}
|
||||
<span
|
||||
class='ui-symbol icon l-icon-link'
|
||||
ng-show="location.isLink()"
|
||||
></span>
|
||||
<span class='ui-symbol icon l-icon-alert'></span>
|
||||
</span>
|
||||
<span class='title-label'>
|
||||
{{model.name}}
|
||||
</span>
|
||||
<span class="t-object-label">
|
||||
<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">{{type.getGlyph()}}</span>
|
||||
<span class='t-title-label'>{{model.name}}</span>
|
||||
</span>
|
||||
|
||||
21
platform/commonUI/general/res/templates/message-banner.html
Normal file
21
platform/commonUI/general/res/templates/message-banner.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<div ng-controller="BannerController" ng-show="active.notification"
|
||||
class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
|
||||
'minimized': active.notification.model.minimized,
|
||||
'new': !active.notification.model.minimized}"
|
||||
ng-click="maximize(active.notification)">
|
||||
<span class="banner-elem label">
|
||||
{{active.notification.model.title}}
|
||||
</span>
|
||||
<span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
|
||||
<mct-include key="'progress-bar'" class="banner-elem"
|
||||
ng-model="active.notification.model">
|
||||
</mct-include>
|
||||
</span>
|
||||
<a ng-hide="active.notification.model.primaryOption === undefined"
|
||||
class="banner-elem l-action s-action"
|
||||
ng-click="action(active.notification.model.primaryOption.callback, $event)">
|
||||
{{active.notification.model.primaryOption.label}}
|
||||
</a>
|
||||
<a class="banner-elem ui-symbol close" ng-click="dismiss(active.notification, $event)">
|
||||
x</a>
|
||||
</div>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
|
||||
<div class="abs holder holder-inspector-elements l-flex-col">
|
||||
<div class="pane-header flex-elem">Inspection</div>
|
||||
<ul class="flex-elem grows vscroll">
|
||||
<li>
|
||||
<em>Properties</em>
|
||||
<div class="inspector-properties"
|
||||
ng-repeat="data in metadata"
|
||||
ng-class="{ first:$index === 0 }">
|
||||
<div class="label">{{ data.name }}</div>
|
||||
<div class="value">{{ data.value }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li ng-if="contextutalParents.length > 0">
|
||||
<em title="The location of this linked object.">Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in contextutalParents"
|
||||
ng-class="{ last:($index + 1) === contextualParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = parent"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-if="primaryParents.length > 0">
|
||||
<em title="The location of the original object that this was linked from.">Original Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in primaryParents"
|
||||
ng-class="{ last:($index + 1) === primaryParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = parent"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
10
platform/commonUI/general/res/templates/progress-bar.html
Normal file
10
platform/commonUI/general/res/templates/progress-bar.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<span class="l-progress-bar s-progress-bar"
|
||||
ng-class="{ indeterminate:ngModel.unknownProgress }">
|
||||
<span class="progress-amt-holder">
|
||||
<span class="progress-amt" style="width: {{ngModel.progress}}%"></span>
|
||||
</span>
|
||||
</span>
|
||||
<div class="progress-info hint" ng-hide="ngModel.progressText === undefined">
|
||||
<span class="progress-amt-text" ng-show="ngModel.progress > 0">{{ngModel.progress}}% complete. </span>
|
||||
{{ngModel.progressText}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user