react 16 upgrade

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

5 files changed, 317 insertions, 296 deletions

diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index e4aa23f876..b9cfd7906a 100644
--- a/openecomp-ui/resources/scss/common/_base.scss
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -1,6 +1,6 @@
 html {
-  font-size: 100%;
-  height: 100%;
+    font-size: 100%;
+    height: 100%;
 }
 
 body {
@@ -16,65 +16,70 @@ $scrollbar-height: 8px;
 $ff-scrollbar-width: 17px;
 /* scrollbar styling for Google Chrome | Safari | Opera */
 ::-webkit-scrollbar {
-  width: $scrollbar-width;
-  height: $scrollbar-height;
+    width: $scrollbar-width;
+    height: $scrollbar-height;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 10px;
+    background-color: transparent;
+    border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: $light-gray;
-  border-right: 2px solid $content-background-color;
+    border-radius: 10px;
+    background-color: $light-gray;
+    border-right: 2px solid $content-background-color;
 }
 
 /* Mozilla Firefox currently doesn't support scrollbar styling */
 
 ul {
-  list-style: none;
+    list-style: none;
 }
 
-h1, h2, h3, h4, h5, h6, ul {
-  margin: 0;
-  padding: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul {
+    margin: 0;
+    padding: 0;
 }
 
 input {
-
-  padding: 7px 10px;
+    padding: 7px 10px;
 }
 
 .disabled {
-  opacity: 0.7 !important;
+    opacity: 0.7 !important;
 }
 
 fieldset {
-  border: none;
+    border: none;
 }
 
 fieldset {
-  label {
-	display: inline-block;
-  }
+    label {
+        display: inline-block;
+    }
 }
 
 .nav-tabs > li > a:focus,
 .btn:focus,
 .btn:active:focus,
 .btn.active:focus {
-  outline: none;
+    outline: none;
 }
 
 .box-hover {
-  border: 1px solid $light-blue;
+    border: 1px solid $light-blue;
 }
 /* monkey patch */
 .sdc-button.sdc-button__link.sdc-button.sdc-button__link {
-  width: initial;
-  &:focus {
-    border: none;
-  }
+    width: initial;
+    &:focus {
+        border: none;
+    }
 }
diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss
index 6c6a0cf165..58ed1227ce 100644
--- a/openecomp-ui/resources/scss/common/_layout.scss
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -1,35 +1,53 @@
 .sdc-app {
-  height: 100%;
-
+    height: 100%;
 }
 .flex {
-  display: flex;
-  flex: 1;
+    display: flex;
+    flex: 1;
 }
 
 .flex-column {
-  @extend .flex;
-  flex-direction: column;
+    @extend .flex;
+    flex-direction: column;
 }
 
 .content-area {
-  padding: 30px 60px 70px 60px;
-  overflow-y: auto;
-	overflow-x: hidden;
-  height: 100%;
-  &.no-padding-content-area {
-    padding: 0;
-  }
+    padding: 30px 60px 70px 60px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    &.no-padding-content-area {
+        padding: 0;
+    }
 }
 
-.onborading-modal {
-  .modal-title {
-    text-transform: uppercase;
-  }
-}
 .page-title {
-  @extend .heading-1;
-  @extend .text-uppercase !optional;
-  margin-bottom: 20px;
-  color: $blue;
+    @extend .heading-1;
+    @extend .text-uppercase !optional;
+    margin-bottom: 20px;
+    color: $blue;
+}
+.sdc-modal {
+    .sdc-modal__wrapper.sdc-modal-type-custom {
+        .sdc-modal__content {
+            padding: 0;
+            .entitlement-pools-modal,
+            .license-key-groups-modal,
+            .manage-permissions-page {
+                .validation-form-content {
+                    overflow-y: visible;
+                }
+            }
+            .validation-form-content {
+                padding: 20px 40px;
+                overflow-y: auto;
+                .no-bottom-margin {
+                    margin-bottom: 0;
+                    .customized-date-picker {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index c4ae856b5f..230881022f 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,23 +1,24 @@
 /* Fonts */
 
 @mixin base-font-regular() {
-  font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif;
+    font-family: OpenSans, OpenSans-Regular, 'Open Sans', omnes-regular, Arial,
+        sans-serif;
 }
 
 @mixin base-font-light() {
-  font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
+    font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
 }
 
-@mixin base-font-italic(){
-  font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
+@mixin base-font-italic() {
+    font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
 }
 
 @mixin base-font-semibold() {
-  font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
+    font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
 }
 
 @mixin base-font-bold() {
-  font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
+    font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
 }
 
 $heading-font-1: 28px;
@@ -34,109 +35,107 @@ $body-font-4: 10px;
 $icon-font-size: 10px;
 $icon-font-family: Arial;
 
-
 .heading-1 {
-  @include base-font-light;
-  font-size: $heading-font-1;
+    @include base-font-light;
+    font-size: $heading-font-1;
 }
 
 .heading-2 {
-  @include base-font-light;
-  font-size: $heading-font-2;
+    @include base-font-light;
+    font-size: $heading-font-2;
 }
 
 .heading-3-light {
-  @include base-font-light;
-  font-size: $heading-font-3;
-  @extend .text-uppercase !optional;
+    @include base-font-light;
+    font-size: $heading-font-3;
+    @extend .text-uppercase !optional;
 }
 
 .heading-3 {
-  @include base-font-regular;
-  font-size: $heading-font-3;
-  @extend .text-uppercase !optional;
+    @include base-font-regular;
+    font-size: $heading-font-3;
+    @extend .text-uppercase !optional;
 }
 
 .heading-3-semibold {
-  @include base-font-semibold;
-  font-size: $heading-font-3;
-  @extend .text-uppercase !optional;
+    @include base-font-semibold;
+    font-size: $heading-font-3;
+    @extend .text-uppercase !optional;
 }
 
 .heading-4 {
-  @include base-font-regular;
-  font-size: $heading-font-4;
+    @include base-font-regular;
+    font-size: $heading-font-4;
 }
 
 .heading-4-semibold {
-  @include base-font-semibold;
-  font-size: $heading-font-4;
+    @include base-font-semibold;
+    font-size: $heading-font-4;
 }
 
 .heading-5 {
-  @include base-font-regular;
-  font-size: $heading-font-5;
+    @include base-font-regular;
+    font-size: $heading-font-5;
 }
 
 .heading-5-semibold {
-  @include base-font-semibold;
-  font-size: $heading-font-5;
+    @include base-font-semibold;
+    font-size: $heading-font-5;
 }
 
 .body-1 {
-  @include base-font-regular;
-  font-size: $body-font-1;
+    @include base-font-regular;
+    font-size: $body-font-1;
 }
 
 .body-1-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-1;
+    @include base-font-semibold;
+    font-size: $body-font-1;
 }
 
 .body-1-light {
-  @include base-font-light;
-  font-size: $body-font-1;
+    @include base-font-light;
+    font-size: $body-font-1;
 }
 
 .body-2 {
-  @include base-font-regular;
-  font-size: $body-font-2;
+    @include base-font-regular;
+    font-size: $body-font-2;
 }
 
 .body-2-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-2;
+    @include base-font-semibold;
+    font-size: $body-font-2;
 }
 
 .body-3 {
-  @include base-font-regular;
-  font-size: $body-font-3;
+    @include base-font-regular;
+    font-size: $body-font-3;
 }
 
 .body-3-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-3;
+    @include base-font-semibold;
+    font-size: $body-font-3;
 }
 
 .body-4 {
-  @include base-font-regular;
-  font-size: $body-font-4;
+    @include base-font-regular;
+    font-size: $body-font-4;
 }
 
 .body-4-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-4;
+    @include base-font-semibold;
+    font-size: $body-font-4;
 }
 
 .body-3-light {
-  @include base-font-light;
-  font-size: $body-font-3;
+    @include base-font-light;
+    font-size: $body-font-3;
 }
 
-
 .warning-text {
-  color: $yellow;
+    color: $yellow;
 }
 .error-text {
-  color: $red;
+    color: $red;
 }
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);
 }
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 6ea204aa76..48d9f4b68e 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -1,4 +1,3 @@
-
 // primary colors
 $blue: #009fdb;
 $dark-blue: #0568ae;
@@ -29,7 +28,7 @@ $tlv-gray: #f8f8f8;
 $tlv-light-gray: #eaeaea;
 $tlv-hover: #e6f6fb;
 $highlight-gray: #eceff3;
-$transparent-black: rgba(0,0,0,.3);
+$transparent-black: rgba(0, 0, 0, 0.3);
 
 $content-background-color: $white;
 
@@ -44,8 +43,9 @@ $tablet-max-width: 1024px;
 $laptop-min-width: 1224px;
 $desktop-min-width: 1824px;
 
+$loader-background: #e1e4e6;
 
-
-
-
-
+$action-button-active-bg: #0091c7;
+$action-button-active-border: #006186;
+$action-button-hover-bg: #1ec2ff;
+$action-button-hover-border: #0091c8;