react 16 upgrade

Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>

1 files changed, 190 insertions, 191 deletions

diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index 99b1ff5d9a..aa1c0b6ff0 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -1,5 +1,3 @@
-
-
 /* Prefix */
 
 $box-sizing-prefix: webkit moz spec;
@@ -14,163 +12,166 @@ $flex-prefix: webkit spec;
 $browserPrefixes: webkit moz o ms;
 
 @mixin prefix($property, $value, $prefixeslist: 'all') {
-  @if $prefixeslist == all {
-    -webkit-#{$property}: $value;
-    -moz-#{$property}: $value;
-    -ms-#{$property}: $value;
-    -o-#{$property}: $value;
-    #{$property}: $value;
-  } @else {
-    @each $prefix in $prefixeslist {
-      @if $prefix == webkit {
+    @if $prefixeslist == all {
         -webkit-#{$property}: $value;
-      } @else if $prefix == moz {
         -moz-#{$property}: $value;
-      } @else if $prefix == ms {
         -ms-#{$property}: $value;
-      } @else if $prefix == o {
         -o-#{$property}: $value;
-      } @else if $prefix == spec {
         #{$property}: $value;
-      } @else {
-        @warn "No such prefix: #{$prefix}";
-      }
+    } @else {
+        @each $prefix in $prefixeslist {
+            @if $prefix == webkit {
+                -webkit-#{$property}: $value;
+            } @else if $prefix == moz {
+                -moz-#{$property}: $value;
+            } @else if $prefix == ms {
+                -ms-#{$property}: $value;
+            } @else if $prefix == o {
+                -o-#{$property}: $value;
+            } @else if $prefix == spec {
+                #{$property}: $value;
+            } @else {
+                @warn "No such prefix: #{$prefix}";
+            }
+        }
     }
-  }
 }
 
 /* Value Prefix*/
 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
-
-  @if $prefixeslist == all {
-    #{property} : -webkit-#{$valuesuffix}($from, $to);
-    #{property} : -moz-#{$valuesuffix}($from, $to);
-    #{property} : -o-#{$valuesuffix}($from, $to);
-    #{property} : -ms-#{$valuesuffix}($from, $to);
-
-  } @else {
-    @each $prefix in $prefixeslist {
-      @if $prefix == webkit {
-        #{property} : -webkit-#{$valuesuffix}($from, $to);
-      } @else if $prefix == moz {
-        #{property} : -moz-#{$valuesuffix}($from, $to);
-      } @else if $prefix == ms {
-        #{property} : -ms-#{$valuesuffix}($from, $to);
-      } @else if $prefix == o {
-        #{property} : -o-#{$valuesuffix}($from, $to);
-      } @else {
-        @warn "No such prefix: #{$prefix}";
-      }
+    @if $prefixeslist == all {
+        #{property}: -webkit-#{$valuesuffix}($from, $to);
+        #{property}: -moz-#{$valuesuffix}($from, $to);
+        #{property}: -o-#{$valuesuffix}($from, $to);
+        #{property}: -ms-#{$valuesuffix}($from, $to);
+    } @else {
+        @each $prefix in $prefixeslist {
+            @if $prefix == webkit {
+                #{property}: -webkit-#{$valuesuffix}($from, $to);
+            } @else if $prefix == moz {
+                #{property}: -moz-#{$valuesuffix}($from, $to);
+            } @else if $prefix == ms {
+                #{property}: -ms-#{$valuesuffix}($from, $to);
+            } @else if $prefix == o {
+                #{property}: -o-#{$valuesuffix}($from, $to);
+            } @else {
+                @warn "No such prefix: #{$prefix}";
+            }
+        }
     }
-  }
 }
 
 /* Box sizing */
 @mixin box-sizing($value: border-box) {
-  @include prefix(box-sizing, $value, $box-sizing-prefix);
+    @include prefix(box-sizing, $value, $box-sizing-prefix);
 }
 
 /* Borders & Shadows */
 @mixin box-shadow($value) {
-  @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
+    @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
 }
 
 @mixin text-shadow($value) {
-  @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
+    @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
 }
 
 @mixin border-radius($value, $positions: all) {
-  @if ($positions == all) {
-    @include prefix(border-radius, $value, $border-radius-prefix);
-  } @else {
-    @each $position in $positions {
-      @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+    @if ($positions == all) {
+        @include prefix(border-radius, $value, $border-radius-prefix);
+    } @else {
+        @each $position in $positions {
+            @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+        }
     }
-  }
-
 }
 
 @mixin transition($value) {
-  @include prefix(transition, $value, $transition-prefix);
+    @include prefix(transition, $value, $transition-prefix);
 }
 
 /* Opacity */
 @mixin opacity($alpha) {
-  $ie-opacity: round($alpha * 100);
-  opacity: $alpha;
-  filter: unquote("alpha(opacity = #{$ie-opacity})");
+    $ie-opacity: round($alpha * 100);
+    opacity: $alpha;
+    filter: unquote('alpha(opacity = #{$ie-opacity})');
 }
 
 /* Ellipsis */
 @mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: $width;
-  white-space: nowrap;
-  display: $display;
-  max-width: $max-width;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: $width;
+    white-space: nowrap;
+    display: $display;
+    max-width: $max-width;
 }
 
-@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
-  overflow: hidden;
-  position: relative;
-  line-height: $lineHeight;
-  max-height: $lineHeight * $lineCount;
-  text-align: justify;
-  word-break: break-all;
-  // margin-right: -1em;
-  padding-right: 1em;
-  &:before {
-    content: '...';
-    position: absolute;
-    right: 3px;
-    bottom: 0;
-  }
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 1em;
-    height: 1em;
-    margin-top: 0.2em;
-    background: $bgColor;
-  }
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white) {
+    overflow: hidden;
+    position: relative;
+    line-height: $lineHeight;
+    max-height: $lineHeight * $lineCount;
+    text-align: justify;
+    word-break: break-all;
+    // margin-right: -1em;
+    padding-right: 1em;
+    &:before {
+        content: '...';
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+    }
+    &:after {
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 1em;
+        height: 1em;
+        margin-top: 0.2em;
+        background: $bgColor;
+    }
 }
 
 @mixin gradient($from, $to) {
-  /* fallback/image non-cover color */
-  background-color: $from;
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
-  @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
+    /* fallback/image non-cover color */
+    background-color: $from;
+    background-image: -webkit-gradient(
+        linear,
+        0% 0%,
+        0% 100%,
+        from($from),
+        to($to)
+    );
+    @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
 }
 
 /* Vertical placement of multuple lines of text */
 @mixin vertical-text($height) {
-  position: absolute;
-  top: 50%;
-  margin-top: -$height/2;
+    position: absolute;
+    top: 50%;
+    margin-top: -$height/2;
 }
 
 @mixin text-vertical-align($align: middle) {
-  display: table;
-  width: 100%;
+    display: table;
+    width: 100%;
 
-  & > * {
-    vertical-align: $align;
-    display: table-cell;
-  }
+    & > * {
+        vertical-align: $align;
+        display: table-cell;
+    }
 }
 
 @mixin center-element($width) {
-  width: $width;
-  margin-left: auto;
-  margin-right: auto;
+    width: $width;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 @mixin center-content($width) {
-  & > * {
-    @include center-element($width);
-  }
+    & > * {
+        @include center-element($width);
+    }
 }
 
 /* transform-rotate */
@@ -179,9 +180,9 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $deg - angle in degrees
 @mixin transform-rotate($deg) {
-  transform: rotate($deg + deg); /* IE10 and Mozilla */
-  -ms-transform: rotate($deg + deg); /* IE 9 */
-  -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
+    transform: rotate($deg + deg); /* IE10 and Mozilla */
+    -ms-transform: rotate($deg + deg); /* IE 9 */
+    -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
 }
 
 /* transform-translate */
@@ -190,9 +191,9 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $deg - angle in degrees
 @mixin transform-translate($x, $y) {
-  transform: translate($x, $y); /* IE10 and Mozilla */
-  -ms-transform: translate($x, $y); /* IE 9 */
-  -webkit-transform: translate($x, $y); /* Safari and Chrome */
+    transform: translate($x, $y); /* IE10 and Mozilla */
+    -ms-transform: translate($x, $y); /* IE 9 */
+    -webkit-transform: translate($x, $y); /* Safari and Chrome */
 }
 
 /* transform-scale */
@@ -203,104 +204,102 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $height - height
 @mixin transform-scale($width, $height) {
-  transform: scale($width, $height); /* IE10 and Mozilla */
-  -ms-transform: scale($width, $height); /* IE 9 */
-  -webkit-transform: scale($width, $height); /* Safari and Chrome */
+    transform: scale($width, $height); /* IE10 and Mozilla */
+    -ms-transform: scale($width, $height); /* IE 9 */
+    -webkit-transform: scale($width, $height); /* Safari and Chrome */
 }
 
 @mixin scrollable() {
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
 }
 
 @mixin create-circle($size, $bgcolor) {
-  border-radius: 50%;
-  width: $size;
-  height: $size;
-  background: $bgcolor;
-	border: 3px solid $bgcolor;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    border-radius: 50%;
+    width: $size;
+    height: $size;
+    background: $bgcolor;
+    border: 3px solid $bgcolor;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 /**/
 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
-
-  @keyframes #{$animationType} {
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @keyframes #{$animationType} {
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-  }
-  @-moz-keyframes #{$animationType}{
-    /* Firefox */
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @-moz-keyframes #{$animationType} {
+        /* Firefox */
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @-webkit-keyframes #{$animationType} {
+        /* Safari and Chrome */
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-  }
-  @-webkit-keyframes #{$animationType} {
-    /* Safari and Chrome */
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @-o-keyframes #{$animationType} {
+        /* Opera */
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-  }
-  @-o-keyframes #{$animationType} {
-    /* Opera */
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-  }
 }
 
-
 /**/
 @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
-  @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+    @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
 }
 
 /* percent-plus-value */
@@ -308,6 +307,6 @@ $browserPrefixes: webkit moz o ms;
 //     Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
 //     to a percentage of container height/width
 @mixin percent-plus-value($property, $value, $percent: 100%) {
-  $string: 'calc(' + $percent + ' + ' + $value + ')';
-  #{$property}: unquote($string);
+    $string: 'calc(' + $percent + ' + ' + $value + ')';
+    #{$property}: unquote($string);
 }