[Frontend] CSS and font updates ONLY from open1423

WTD-1404
CSS has error at this point due to missing $colorIconLink in _constants.scss;
(cherry picked from commit 2a032bf)
This commit is contained in:
Charles Hacskaylo 2015-07-01 09:48:35 -07:00
parent 6a8cc6d9da
commit 793d39b969
9 changed files with 181 additions and 141 deletions

View File

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

View File

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

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -50,11 +50,8 @@
}
.invoke-menu {
//@include invokeMenu(); // $colorKey
text-shadow: none;
display: inline-block;
//font-size: 0.8rem;// Normalizing for new icomoon symbols font
//vertical-align: middle;// Normalizing for new icomoon symbols font
}
.btn-menu .invoke-menu,
@ -62,18 +59,9 @@
margin-left: $interiorMarginSm;
}
/*
.object-header .type-icon {
color: $colorKey;
margin-right: $interiorMarginSm;
}
*/
.menu .type-icon,
.tree-item .type-icon,
.super-menu.menu .type-icon {
//font-size: $menuLineH * 0.8; //.93 // Normalizing for new icomoon symbols font
//line-height: $menuLineH * 1.13; // Normalizing for new icomoon symbols font
position: absolute;
}
@ -81,7 +69,14 @@
font-size: 16px; // 16px is crisp size
}
.super-menu.menu.dropdown .icon {
//font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font
.l-icon-link:before {
content: "\f4";
}
.l-icon-alert {
display: none !important; // Remove this when alerts are enabled
&:before {
color: $colorAlert;
content: "!";
}
}

View File

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

View File

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

View File

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