[Frontend] Initial styles for New Edit Mode

open #198
Refactored elems in browse-object.html to use
flex layout;
New flex-row and flex-col general CSS classes;
New pulseBorder animation mixin;

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

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

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

@@ -61,6 +61,12 @@
     }
 }
 
+@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
+    @include transition-property(height, width, top, right, bottom, left);
+    @include transition-duration($t);
+    @include transition-timing-function($tf);
+}
+
 @mixin trans-prop-nice-resize-h($t: 0.5s) {
     @include transition-property(height, bottom, top);
     @include transition-duration($t);

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

@@ -287,8 +287,8 @@
 }
 
 .object-holder {
+    @include trans-prop-nice-resize(0.3s);
     overflow: hidden; // Contained objects need to handle their own overflow now
-    top: $ueTopBarH + $interiorMarginLg;
     > ng-include {
         @include absPosDefault(0, auto);
     }
@@ -299,6 +299,28 @@
     }
 }
 
+.l-object-wrapper {
+    @extend .abs;
+    top: $ueTopBarH + $interiorMarginLg;
+    &.active {
+        @include pulseBorder($colorKey, 100ms, 6);
+        //@include pulse(250ms, 5);
+        @include border-radius($controlCr * 1.5);
+        border-color: $colorKey;
+        border-width:2px;
+        border-style: dotted;
+        .l-object-wrapper-inner {
+            $m: 3px;
+            top: $m; right: $m; bottom: $m; left: $m;
+        }
+    }
+}
+.l-object-wrapper-inner {
+    @extend .abs;
+    @include display-flex(column nowrap);
+    @include trans-prop-nice-resize(0.3s);
+}
+
 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .s-menu-btn,
@@ -336,11 +358,35 @@
 }
 
 .l-flex {
-    @include webkitVal('display', 'flex');
-    @include webkitProp('flex-flow', 'row nowrap');
+    @include display-flex;
+    &.flex-row {
+        @include flex-flow(row nowrap);
+        .flex-elem {
+            margin-left: $interiorMargin;
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+    &.flex-col {
+        @include flex-flow(column nowrap);
+        .flex-elem {
+            margin-top: $interiorMarginLg;
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+    .flex-elem {
+        //@include test(purple);
+        @include flex(0 1);
+        position: relative;
+        &.grow {
+            @include flex(1 1);
+        }
+    }
     .left {
-        //@include test(red);
-        @include webkitProp(flex, '1 1 0');
+        @include flex(1 1 0);
         padding-right: $interiorMarginLg;
     }
 }