react 16 upgrade

[sdc.git] / openecomp-ui / resources / scss / components / _loader.scss

diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss
index ddff9af..ee7f6f3 100644 (file)
--- a/openecomp-ui/resources/scss/components/_loader.scss
+++ b/openecomp-ui/resources/scss/components/_loader.scss
@@ -1,159 +1,159 @@
 .onboarding-loader {
-  .onboarding-loader-backdrop {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    background-color: #E1E4E6;
-    opacity: 0.5;
-  }
-  .tlv-loader {
-    height: 63px;
-    width: 63px;
-    position: absolute;
-    top: 30%;
-    left: 50%;
-    margin-top: -10.5px;
-    margin-left: -10.5px;
-  }
-  .tlv-loader.large {
-    transform: scale(1);
-  }
-  .tlv-loader::before {
-    background-color: $gray;
-    border-radius: 50%;
-    box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray;
-    content: '';
-    display: block;
-    height: 21px;
-    width: 21px;
-    position: absolute;
-    left: 50%;
-    margin-left: -10.5px;
-  }
-  .tlv-loader::after {
-    border-radius: 50%;
-    content: '';
-    display: block;
-    position: absolute;
-    height: 21px;
-    width: 21px;
-    animation: dot-move-2 4.5s infinite ease-in;
-  }
-  @keyframes dot-move {
-    0% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
+    .onboarding-loader-backdrop {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        background-color: $loader-background;
+        opacity: 0.5;
+    }
+    .tlv-loader {
+        height: 63px;
+        width: 63px;
+        position: absolute;
+        top: 30%;
+        left: 50%;
+        margin-top: -10.5px;
+        margin-left: -10.5px;
+    }
+    .tlv-loader.large {
+        transform: scale(1);
+    }
+    .tlv-loader::before {
+        background-color: $gray;
+        border-radius: 50%;
+        box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray,
+            -21px 21px 0px 0px $gray;
+        content: '';
+        display: block;
+        height: 21px;
+        width: 21px;
+        position: absolute;
+        left: 50%;
+        margin-left: -10.5px;
+    }
+    .tlv-loader::after {
+        border-radius: 50%;
+        content: '';
+        display: block;
+        position: absolute;
+        height: 21px;
+        width: 21px;
+        animation: dot-move-2 4.5s infinite ease-in;
+    }
+    @keyframes dot-move {
+        0% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
+        25% {
+            background-color: $orange;
+            left: 42px;
+            top: 21px;
+        }
+        50% {
+            background-color: $light-purple;
+            left: 21px;
+            top: 42px;
+        }
+        75% {
+            background-color: $light-green;
+            left: 0;
+            top: 21px;
+        }
+        100% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
+    }
+    @keyframes dot-move-2 {
+        0% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
+        6.25% {
+            background-color: $blue;
+            left: 42px;
+            top: 21px;
+        }
+        12.5% {
+            background-color: $blue;
+            left: 21px;
+            top: 42px;
+        }
+        18.75% {
+            background-color: $blue;
+            left: 0;
+            top: 21px;
+        }
+        25% {
+            background-color: $orange;
+            left: 21px;
+            top: 0;
+        }
+        31.25% {
+            background-color: $orange;
+            left: 42px;
+            top: 21px;
+        }
+        37.5% {
+            background-color: $orange;
+            left: 21px;
+            top: 42px;
+        }
+        43.75% {
+            background-color: $orange;
+            left: 0;
+            top: 21px;
+        }
+        50% {
+            background-color: $light-purple;
+            left: 21px;
+            top: 0;
+        }
+        56.25% {
+            background-color: $light-purple;
+            left: 42px;
+            top: 21px;
+        }
+        62.5% {
+            background-color: $light-purple;
+            left: 21px;
+            top: 42px;
+        }
+        68.75% {
+            background-color: $light-purple;
+            left: 0;
+            top: 21px;
+        }
+        75% {
+            background-color: $light-green;
+            left: 21px;
+            top: 0;
+        }
+        81.25% {
+            background-color: $light-green;
+            left: 42px;
+            top: 21px;
+        }
+        87.5% {
+            background-color: $light-green;
+            left: 21px;
+            top: 42px;
+        }
+        93.75% {
+            background-color: $light-green;
+            left: 0;
+            top: 21px;
+        }
+        100% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
     }
-    25% {
-      background-color: $orange;
-      left: 42px;
-      top: 21px;
-    }
-    50% {
-      background-color: $light-purple;
-      left: 21px;
-      top: 42px;
-    }
-    75% {
-      background-color: $light-green;
-      left: 0;
-      top: 21px;
-    }
-    100% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
-    }
-  }
-  @keyframes dot-move-2 {
-    0% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
-    }
-    6.25% {
-      background-color: $blue;
-      left: 42px;
-      top: 21px;
-    }
-    12.5% {
-      background-color: $blue;
-      left: 21px;
-      top: 42px;
-    }
-    18.75% {
-      background-color: $blue;
-      left: 0;
-      top: 21px;
-    }
-    25% {
-      background-color: $orange;
-      left: 21px;
-      top: 0;
-    }
-    31.25% {
-      background-color: $orange;
-      left: 42px;
-      top: 21px;
-    }
-    37.5% {
-      background-color: $orange;
-      left: 21px;
-      top: 42px;
-    }
-    43.75% {
-      background-color: $orange;
-      left: 0;
-      top: 21px;
-    }
-    50% {
-      background-color: $light-purple;
-      left: 21px;
-      top: 0;
-    }
-    56.25% {
-      background-color: $light-purple;
-      left: 42px;
-      top: 21px;
-    }
-    62.5% {
-      background-color: $light-purple;
-      left: 21px;
-      top: 42px;
-    }
-    68.75% {
-      background-color: $light-purple;
-      left: 0;
-      top: 21px;
-    }
-    75% {
-      background-color: $light-green;
-      left: 21px;
-      top: 0;
-    }
-    81.25% {
-      background-color: $light-green;
-      left: 42px;
-      top: 21px;
-    }
-    87.5% {
-      background-color: $light-green;
-      left: 21px;
-      top: 42px;
-    }
-    93.75% {
-      background-color: $light-green;
-      left: 0;
-      top: 21px;
-    }
-    100% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
-    }
-  }
 }
-