Frontend] Styling for New Edit Mode

open #198
.l-flex styles refined;
Animation refinement;
.s-btn default vertical-align = top;
.tool-bar style tweaked;
Added title-label back into edit-action-buttons.html;

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

@@ -66,7 +66,7 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }
 
-@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite) {
+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) {
 	@include keyframes(pulseBorder) {
 		0%   { border-color: transparent; }
 		100% { border-color: $c; }
@@ -76,6 +76,7 @@ a.disabled {
 	@include animation-direction(alternate);
 	@include animation-iteration-count($iteration);
 	@include animation-timing-function(ease);
+    @include animation-delay($delay);
 }
 
 .pulse {

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

@@ -125,6 +125,10 @@ mct-container {
 	text-align: center;
 }
 
+.ellipsis {
+    @include ellipsize();
+}
+
 .scrolling {
 	overflow: auto;
 }

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

@@ -31,6 +31,7 @@ $pad: $interiorMargin * $baseRatio;
     line-height: $btnStdH;
     padding: 0 $pad;
     font-size: 0.7rem;
+    vertical-align: top;
 
     .icon {
         font-size: 0.8rem;
@@ -69,10 +70,14 @@ $pad: $interiorMargin * $baseRatio;
     &.t-save:before {
         content:'\e612';
         font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
     }
-    &.t-cancel:before {
-        content:'\78';
-        font-family: symbolsfont;
+    &.t-cancel {
+        .title-label { display: none; }
+        &:before {
+            content:'\78';
+            font-family: symbolsfont;
+        }
     }
 
     &.pause-play {

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

@@ -115,7 +115,7 @@
 	@include box-sizing(border-box);
 	border-left: 1px solid $colorInteriorBorder;
 	display: inline-block;
-	padding: 0 $interiorMargin;
+	padding: 0 0 0 $interiorMargin;
 	position: relative;
 	&:first-child {
 		border-left: none;

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

@@ -304,17 +304,21 @@
     @extend .abs;
     top: $ueTopBarH + $interiorMarginLg;
     &.active {
-        @include pulseBorder($colorKey, 150ms, 8);
+        @include pulseBorder($colorKey, 150ms, 8, 0.5s);
         @include border-radius($controlCr);
         border-color: $colorKey;
-        border-width:2px;
+        border-width: 2px;
         border-style: dotted;
         .l-object-wrapper-inner {
             $m: 3px;
-            top: $m; right: $m; bottom: $m; left: $m;
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
         }
     }
 }
+
 .l-object-wrapper-inner {
     @extend .abs;
     @include display-flex(column nowrap);
@@ -374,15 +378,21 @@
     @include display-flex;
     &.flex-row {
         @include flex-flow(row nowrap);
-        .flex-elem.active {
+        //@include align-items(center);
+        .flex-elem {
+            white-space: nowrap;
             margin-right: $interiorMargin;
             &:last-child {
                 margin-right: 0;
             }
+            &.flex-align-end {
+                @include justify-content(flex-end);
+            }
         }
     }
     &.flex-col {
         @include flex-flow(column nowrap);
+        //@include align-items(stretch);
         .flex-elem.active {
             margin-bottom: $interiorMarginLg;
             &:last-child {
@@ -392,10 +402,10 @@
     }
     .flex-elem {
         //@include test(purple);
-        @include flex(0 1);
+        @include flex(0 1 auto);
         position: relative;
         &.grow {
-            @include flex(1 1);
+            @include flex(1 1 auto);
         }
     }
     .left {