[Fronted] Significant refactoring of mixins for containers and buttons

WTD-839
Refactoring in advance of style mods to switcher when in frame;
Cleanup of markup to remove 'icon' class from invoke-menu elements;

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

@@ -28,8 +28,8 @@ $bodyMargin: 10px;
 $interiorMargin: 5px;
 $interiorMarginLg: $interiorMargin * 2;
 $interiorMarginSm: 3px;
-$basicCr: 3px;
+$basicCr: 2px;
-$controlCr: $basicCr;
+$controlCr: 2px;
 $smallCr: 2px;
 $badgeW: 35px;
 
@@ -119,7 +119,7 @@ $controlDisabledOpacity: 0.3;
 $formLabelW: 20%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
-$menuLineH: 1.5rem;
+$menuLineH: 1.4rem;
 $scrollbarTrackSize: 10px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;

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

@@ -42,12 +42,6 @@
         &.major {
             font-size: 1.65em;
         }
-        &:hover {
-            //			color: lighten($c, $ltGamma);
-            .invoke-menu {
-                //				color: lighten($colorBodyBg, $ltGamma * 2);
-            }
-        }
     }
 }
 
@@ -56,28 +50,21 @@
 }
 
 .invoke-menu {
-    @include invokeMenu($colorKey);
+    //@include invokeMenu(); // $colorKey
+	text-shadow: none;
     display: inline-block;
-    font-size: 1rem;
+    font-size: 0.8rem;
     vertical-align: middle;
 }
 
 .btn-menu .invoke-menu,
 .icon.major .invoke-menu {
-    margin-left: $interiorMargin;
+    margin-left: $interiorMarginSm;
-}
-
-.icon-buttons-main .invoke-menu {
-    @include invokeMenu(lighten($colorBodyBg, $ltGamma));
-}
-
-.menu-element .invoke-menu {
-
 }
 
 .object-header .type-icon {
     color: $colorKey;
-	margin-right: $interiorMargin;
+	margin-right: $interiorMarginSm;
 }
 
 .menu .type-icon,

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

@@ -131,20 +131,35 @@
 }
 
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-	@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%)));
+	$ltnRatio: 7%;
+	$gradRatio: 5%;
+	$hovRatio: 7%;
+	$bgBase: lighten($bg, $ltnRatio);
+	$fgBase: lighten($fg, $ltnRatio);
+	$gradC1: lighten($bgBase, $gradRatio);
+	$gradC2: $bgBase;
+	$cInvokeBase: lighten($gradC1, $ltnRatio*2);
+
+	@include background-image(linear-gradient($gradC1, $gradC2));
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-//	@include box-shadow(rgba(black, 0.3) 0 1px 2px);
 	@include boxShdwSubtle();
 	border: none;
-	border-top: 1px solid lighten($bg, 20%);
+	border-top: 1px solid lighten($gradC1, 2%);
 	color: $fg;
 	display: inline-block;
 	@if $hover == true {
-		&:hover {
+		&:not(.disabled):hover {
-			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%)));
+			@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
+			color: lighten($fgBase, $hovRatio);
+			&.btn-menu .invoke-menu {
+				color: lighten($cInvokeBase, $hovRatio);
 			}
 		}
+	}
+	&.btn-menu .invoke-menu {
+		color: $cInvokeBase;
+	}
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -185,18 +200,16 @@
 }
 
 @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include containerSubtle($bg, $fg);
+	@include containerSubtle($bg, $fg, true);
-	&:not(.disabled):hover {
-		@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 10%)));
-	}
 }
 
 @mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include containerSubtle($bg, $fg);
+	// No longer should be used; use btnSubtle instead
-	@include background-image(linear-gradient(lighten($bg, 20%), $bg));
+	//@include containerSubtle($bg, $fg, true);
-	&:not(.disabled):hover {
+	//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
+/*	&:not(.disabled):hover {
 		@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
-	}
+	}*/
 }
 
 @mixin boxIncised($sVal: 0.6) {
@@ -207,8 +220,8 @@
     border: 1px solid $c;
 }
 
-@mixin boxShdwSubtle($sVal: 0.3) {
+@mixin boxShdwSubtle($sVal: 0.2) {
-    @include box-shadow(rgba(black, $sVal) 0 1px 3px);
+    @include box-shadow(rgba(black, $sVal) 0 1px 2px);
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
@@ -235,13 +248,15 @@
 }
 
 
-@mixin invokeMenu($baseColor) {
+/*
+@mixin invokeMenu($baseColor: $colorBodyFg) {
 	$c: $baseColor;
 	color: $c;
 	&:hover {
 		color: lighten($c, $ltGamma);
 	}
 }
+*/
 
 @mixin menuUlReset() {
     margin: 0;

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

@@ -62,12 +62,12 @@ $pad: $interiorMargin * $baseRatio;
 	text-decoration: none;
 	&.major {
 		$bg: $colorKey;
-		@include btnNoticeable($bg);
+		@include btnSubtle($bg);
 		$fg: lighten($bg, 50%);
 		color: $fg;
 		&:hover {
-			@include btnNoticeable(lighten($bg, 5%));
+			@include btnSubtle(lighten($bg, 5%), $fg);
-			color: $fg;
+			//color: $fg;
 		}
 		.invoke-menu {
 			color: $fg;

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

@@ -263,7 +263,7 @@ label.checkbox.custom {
 
 .btn-menu {
 	$h: 20px;
-	$p: $interiorMargin * 2;
+	$p: $interiorMarginSm * 2;
 	$c: $colorBodyFg;
 	@include btnSubtle($colorBodyBg);
 	height: $h;
@@ -359,7 +359,8 @@ label.checkbox.custom {
 
 /******************************************************** VIEW-CONTROLS */
 
-.view-controls .view-type {
+/*.view-controls .view-type {
+// UNUSED?
 	$d: 20px;
 	$p: 5px;
 	@include border-radius($controlCr);
@@ -373,13 +374,17 @@ label.checkbox.custom {
 	&.cur {
 		background: lighten($colorBodyBg, $ltGamma);
 	}
-}
+}*/
 
 .edit-mode .top-bar .control-set.edit-view-controls {
 	//	Used in templates/edit-view-controls.html
 	margin-right: $interiorMargin * 10;
 }
 
+.frame .t-view-switcher {
+	// Style the view switcher when in a frame
+}
+
 /******************************************************** SLIDERS */
 
 .slider {

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

@@ -104,7 +104,7 @@
 	        &.selected {
 		        $cfg: lighten($colorItemSelected, 35%);
 		        $cfgh: lighten($cfg, 30%);
-		        @include btnNoticeable($colorItemSelected);
+		        @include btnSubtle($colorItemSelected);
 		        color: $cfg;
 		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
 		        .item-main .item-open { color: $cfg }

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

@@ -22,7 +22,7 @@
 <span ng-controller="ViewSwitcherController">
 
     <div
-	    class="menu-element icon-btn btn btn-menu dropdown click-invoke"
+	    class="t-view-switcher menu-element icon-btn btn btn-menu dropdown click-invoke"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
@@ -37,7 +37,7 @@
 	        {{ngModel.selected.glyph}}
         </span>
         <span class="name">{{ngModel.selected.name}}</span>
-        <span class='ui-symbol icon invoke-menu'>v</span>
+        <span class='ui-symbol invoke-menu'>v</span>
 
 
         <div class="menu dropdown" ng-show="toggle.isActive()">

platform/features/plot/res/templates/plot.html

@@ -116,7 +116,7 @@
 
                         <span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
                         <span>{{plot.getMode().name}}</span>
-                        <span class='ui-symbol icon invoke-menu'>v</span>
+                        <span class='ui-symbol invoke-menu'>v</span>
 
                         <div class="menu dropdown" ng-show="toggle.isActive()">
                             <ul>

platform/forms/res/templates/controls/color.html

@@ -30,7 +30,7 @@
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
-    <span class='ui-symbol icon invoke-menu' ng-if="!structure.text">v</span>
+    <span class='ui-symbol invoke-menu' ng-if="!structure.text">v</span>
 
 
     <div

platform/forms/res/templates/controls/menu-button.html

@@ -28,7 +28,7 @@
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
-    <span class='ui-symbol icon invoke-menu'
+    <span class='ui-symbol invoke-menu'
           ng-if="!structure.text">
         v
     </span>