[Frontend] Refactoring glyphs to classes

fixes #1047
In-progess, e900 > e904

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

@@ -22,5 +22,5 @@
 
 <span ng-controller="MenuArrowController as menuArrow">
     <a class='ui-symbol context-available'
-       ng-click='menuArrow.showMenu($event)'>v</a>
+       ng-click='menuArrow.showMenu($event)'></a>
 </span>

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

@@ -139,6 +139,6 @@ $browseToEditAnimMs: 400ms;
 $editBorderPulseMs: 500ms;
 
 /************************** LIMITS */
-$glyphLimit: '\e603';
-$glyphLimitUpr: '\0000eb';
-$glyphLimitLwr: '\0000ee';
+$glyphLimit: '\e901';
+$glyphLimitUpr: '\e905';
+$glyphLimitLwr: '\e908';

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

@@ -0,0 +1,9 @@
+@mixin glyph($unicode) {
+    &:before { content: $unicode; }
+}
+
+.ui-symbol,
+.icon {
+    &.mobile-info { @include glyph('\e920'); }
+    &.context-available { @include glyph('\e902'); }
+}

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

@@ -159,7 +159,7 @@
         }
         &:not(.last) .t-object-label .t-title-label:after {
             color: pushBack($colorInspectorFg, 15%);
-            content: '\3e';
+            content: '\e904';
             display: inline-block;
             font-family: symbolsfont;
             font-size: 8px;

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

@@ -59,6 +59,7 @@
 @import "overlay/overlay";
 @import "mobile/overlay/overlay";
 @import "tree/tree";
+@import "glyphs";
 @import "object-label";
 @import "mobile/tree";
 @import "user-environ/frame";

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

@@ -344,7 +344,7 @@
 
 @mixin contextArrow() {
 	text-shadow: none;
-	content: '\76';
+	content: '\e902';
 	display: inline-block;
 	font-family: 'symbolsfont';
 	margin-left: $interiorMarginSm;

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

@@ -180,14 +180,14 @@ body.desktop .mini-tab {
         // |<
         text-align: right;
         &:before {
-            content:'\3c'; // Collapse left icon e613
+            content:'\e903'; // Collapse left icon e613
             right: $iconInnerLR;
         }
         &.collapsed {
             @include border-left-radius(0);
             text-align: left;
             &:before {
-                content:'\3e';
+                content:'\e904';
                 left: $iconInnerLR;
             }
             &:hover:before { left: $arwAnimOffsetX; }
@@ -197,14 +197,14 @@ body.desktop .mini-tab {
         // >|
         text-align: left;
         &:before {
-            content:'\3e'; // Collapse right icon e614
+            content:'\e904'; // Collapse right icon e614
             left: $iconInnerLR;
         }
         &.collapsed {
             @include border-right-radius(0);
             &:before {
                 text-align: right;
-                content:'\3c';
+                content:'\e903';
                 right: $iconInnerLR;
             }
             &:hover:before { right: $arwAnimOffsetX; }

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

@@ -441,14 +441,14 @@ input[type="search"] {
             &.prev {
                 right: auto;
                 &:before {
-                    content: "\3c";
+                    content: "\e903";
                 }
             }
             &.next {
                 left: auto;
                 text-align: right;
                 &:before {
-                    content: "\3e";
+                    content: "\e903";
                 }
             }
         }

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

@@ -233,7 +233,7 @@
 @mixin messageBlock($iconW: 32px) {
     .type-icon.message-type {
         @include txtShdw($shdwStatusIc);
-        &:before { content:"\e608"; }
+        &:before { content:"\e920"; }
         color: $colorStatusDefault;
         font-size: $iconW;
         padding: 1px;
@@ -241,15 +241,15 @@
     }
 
     .message-severity-info .type-icon.message-type {
-        &:before { content:"\e608"; }
+        &:before { content:"\e920"; }
         color: $colorStatusInfo;
     }
     .message-severity-alert .type-icon.message-type {
-        &:before { content:"\e610"; }
+        &:before { content:"\e911"; }
         color: $colorStatusAlert;
     }
     .message-severity-error .type-icon.message-type {
-        &:before { content:"\21"; }
+        &:before { content:"\e900"; }
         color: $colorStatusError;
     }
 }

platform/commonUI/general/res/sass/search/_search.scss

@@ -107,12 +107,11 @@
 
 		.menu-icon {
             // 'v' invoke menu icon
-            &:before { content: '\76'; }
+            &:before { content: '\e902'; }
 			font-size: 0.8em;
 			padding-right: $iconEdgeM;
 			right: $iconEdgeM;
 			text-align: right;
-
 			&:hover {
 				color: pullForward($colorInputIcon, 10%);
 			}

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

@@ -56,7 +56,7 @@ ul.tree {
             &:before {
                 position: absolute;
                 @include trans-prop-nice(transform, 100ms);
-                content: "\3e";
+                content: "\e904";
                 @include transform-origin(center);
             }
             &.expanded:before {

platform/commonUI/inspect/res/templates/info-button.html

@@ -21,4 +21,4 @@
 -->
 
 <!--The icon for the info button appearing in a grid item (list in folder)-->
-<a class='ui-symbol icon mobile-info'>&#xe608;</a>
+<a class='ui-symbol icon mobile-info'></a>