Review SCSS refactoring for to-be-deprecated Bourbon functions (#1959)

* [Frontend] Refactor SCSS to remove deprecated @includes

Fixes #1891
- In progress

* [Frontend] Refactor SCSS to remove deprecated @includes

Fixes #1891
Making bourbon happy by refactoring to-be-deprecated
calls to prefixing @includes:
- transform and related CSS;
- flex and related CSS;
- Fixed double semi-colons to single;

platform/features/conductor/core/res/sass/_time-conductor-base.scss

@@ -55,7 +55,7 @@
     div[class*="hand"] {
         $handW: 2px;
         $handH: $d * 0.4;
-        @include transform(translate(-50%, -50%));
+        transform: translate(-50%, -50%);
         @include animation-iteration-count(infinite);
         @include animation-timing-function(linear);
         position: absolute;
@@ -258,7 +258,7 @@
         align-items: center;
         margin-top: $interiorMargin;
         .l-time-conductor-zoom-w {
-            @include justify-content(flex-end);
+            justify-content: flex-end;
             .time-conductor-zoom {
                 height: $r3H;
                 min-width: 100px;
@@ -327,7 +327,7 @@
         $i: $glyph-icon-calendar;
         .time-conductor-icon div[class*="hand"] {
             &.hand-little {
-                @include transform(rotate(120deg));
+                transform: rotate(120deg);
             }
         }
         .mode-selector .s-menu-button:before {

platform/features/conductor/core/res/sass/_time-of-interest.scss

@@ -29,7 +29,7 @@ mct-include.l-toi-holder,
 
 mct-include.l-toi-holder {
     $blockerFadeW: $toiBlockerFadeW;
-    @include transform(translateX(-50%));
+    transform: translateX(-50%);
     color: $toiColorBg;
     position: absolute;
     top: 0;
@@ -66,7 +66,7 @@ mct-include.l-toi-holder {
         box-sizing: content-box;
         height: $toiH;
         left: $toiPad * -2;
-        @include transform(translateY(-50%)); top: 50%;
+        transform: translateY(-50%); top: 50%;
         padding: $toiPad;
         z-index: 1;
 
@@ -207,7 +207,7 @@ table {
                             border-radius: 20%;
                             height: auto;
                             padding: $toiPad;
-                            @include transform(translate(-50%, -50%));
+                            transform: translate(-50%, -50%);
                             left: 50%; right: auto; top: 0;
                             .l-toi-buttons {
                                 padding: 1px;
@@ -233,7 +233,7 @@ table {
             z-index: 3;
 
             .l-toi {
-                @include transform(translateY(100%));
+                transform: translateY(100%);
 
             }
 
@@ -257,13 +257,13 @@ table {
         }
 
         &:before {
-            @include transform(translate(-50%, $linesVOffset * -1));
+            transform: translate(-50%, $linesVOffset * -1);
             top: 0px;
             bottom: auto;
         }
 
         &:after {
-            @include transform(translate(-50%, $linesVOffset));
+            transform: translate(-50%, $linesVOffset);
             top: auto;
             bottom: 0px;
         }

platform/features/timeline/res/sass/_timeline-thematic.scss

@@ -53,7 +53,7 @@
             width: $d;
             position: absolute;
             top: 0;
-            @include transform(translateX(-50%));
+            transform: translateX(-50%);
         }
         &:before {
             // Icon blocker

platform/features/timeline/res/sass/_timelines.scss

@@ -177,7 +177,7 @@
 		            top: 20px; bottom: 5px;
 		            .l-labels-holder {
 			            @include absPosDefault();
-                        @include justify-content(space-between);
+                        justify-content: space-between;
 			            left: $m;
 			            .t-resource-graph-tick-label {
                             font-size: 0.9em;