[Frontend] Glyph-related style changes to toolbars and buttons

Fixes #1047
Glyph refactoring  WIP for toolbar buttons;
Timeline glyph refactoring continued

platform/commonUI/general/res/sass/controls/_color-palette.scss

@@ -40,13 +40,15 @@
 			border: 1px solid transparent;
 			color: $colorSelectedColor;
 			display: block;
-			font-family: 'symbolsfont';
 			float: left;
 			height: $d; width: $d;
-			line-height: $d;
+			line-height: $d * 0.9;
 			margin: 0 ($m * 1px) ($m * 1px) 0;
 			text-align: center;
-			vertical-align: middle;
+            &:before {
+                // Check mark for selected items
+                font-size: 0.8em;
+            }
 		}
 
 		.s-palette-item {

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

@@ -36,6 +36,17 @@
 		margin-left: $interiorMarginSm;
 	}
 
+    .color-swatch {
+        // Used in color menu buttons in toolbar
+        $d: 10px;
+        display: inline-block;
+        border: 1px solid rgba($colorBtnFg, 0.2);
+        height: $d; width: $d;
+        vertical-align: middle;
+        margin-left: $interiorMarginSm;
+        margin-top: -2px;
+    }
+
 	&:after {
 		// Adds the downward facing 'context available / invoke menu' arrow element
 		@include contextArrow();
@@ -52,9 +63,6 @@
 	.menu {
 		left: 0;
 		text-align: left;
-		//.ui-symbol.icon {
-		//	width: 12px;
-		//}
 	}
 }
 

platform/commonUI/general/res/templates/controls/switcher.html

@@ -27,7 +27,6 @@
         <span class="l-click-area"
 	        ng-click="toggle.toggle()"
 	        title="{{ngModel.selected.name}}"></span>
-        <!--span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span-->
         <span class="title-label">{{ngModel.selected.name}}</span>
 
         <div class="menu" ng-show="toggle.isActive()">
@@ -35,7 +34,6 @@
                 <li ng-repeat="option in view"
                     ng-click="ngModel.selected = option; toggle.setState(false)"
                     class="{{option.cssclass}}">
-                    <!--span class="type-icon icon">{{option.glyph}}</span-->
                     {{option.name}}
                 </li>
             </ul>