[Frontend] Refinements to active edit styles

open #199
open #278
Styling finalized for tree/search items;
Mods to pulse mixins;
Colors for both themes finessed and finalized;

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

@@ -51,14 +51,11 @@ a.disabled {
 	@include animation-name(pulse, 0.2);
 }
 
-@include keyframes(pulse) {
-	0%   { opacity: 0.5; }
-	100% { opacity: 1; }
-}
-
-
-@mixin pulse($dur: 500ms, $iteration: infinite) {
-	//@include customKeyframes(pulse, 0.2);
+@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes(pulse) {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
 	@include animation-name(pulse);
 	@include animation-duration($dur);
 	@include animation-direction(alternate);
@@ -66,10 +63,10 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }
 
-@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) {
+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
 	@include keyframes(pulseBorder) {
-		0%   { border-color: transparent; }
-		100% { border-color: $c; }
+		0%   { border-color: rgba($c, $opacity0); }
+		100% { border-color: rgba($c, $opacity100); }
 	}
 	@include animation-name(pulseBorder);
 	@include animation-duration($dur);

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

@@ -145,15 +145,26 @@ ul.tree {
 
     &.active {
         // The item is being edited
-        background: rgba($colorItemTreeEditingBg, 0.5) !important;
+        background: $colorItemTreeEditingBg; //rgba($colorItemTreeSelectedBg, 0.2) !important;
         pointer-events: none;
         &:before {
             // Pencil icon
             @extend .ui-symbol;
-            color: $colorItemTreeEditingBg;
+            @include pulse($dur: 1s, $opacity0: 0.25);
+            color: $colorItemTreeEditingFg;
             content: '\70';
             margin-left: $interiorMarginSm;
         }
+        .t-object-label {
+            .t-item-icon,
+            .t-title-label {
+                color: $colorItemTreeEditingFg;
+                @include text-shadow(none);
+            }
+            .t-title-label {
+                font-style: italic;
+            }
+        }
         .view-control, + .tree-item-subtree { display: none; }
     }
 
@@ -174,8 +185,9 @@ ul.tree {
 	}
 }
 
-.tree-item {
+.tree-item,
+.search-result-item.active {
 	.t-object-label {
 		left: $interiorMargin + $treeVCW;
 	}
-}
+}

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -235,10 +235,10 @@
     }
 
     &.active {
-        @include pulseBorder($colorKey, 150ms, 8, 0.5s);
+        @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
         @include border-radius($controlCr);
         background-color: $colorEditAreaBg;
-        border-color: $colorKey;
+        border-color: $colorEditAreaFg;
         border-width: 2px;
         border-style: dotted;
         .l-object-wrapper-inner {
@@ -252,14 +252,15 @@
 }
 
 .l-edit-controls {
-    @include trans-prop-nice-resize(0.25s);
-    height: 0;
+    @include trans-prop-nice((opacity, height), 0.25s);
+    border-bottom: 1px solid $colorInteriorBorder;
+    line-height: $ueEditToolBarH;
+    height: 0px;
     opacity: 0;
     overflow: hidden;
     &.active {
-        border-bottom: 1px solid $colorInteriorBorder;
         height: $ueEditToolBarH + $interiorMargin;
-        line-height: $ueEditToolBarH;
+        margin-bottom: $interiorMargin;
         opacity: 1;
     }
 }