X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=POLICY-SDK-APP%2Fsrc%2Fmain%2Fwebapp%2Fapp%2FpolicyApp%2Fpolicy-models%2FEditor%2Fcss%2Fanimations.css;fp=POLICY-SDK-APP%2Fsrc%2Fmain%2Fwebapp%2Fapp%2FpolicyApp%2Fpolicy-models%2FEditor%2Fcss%2Fanimations.css;h=50db9b001ba74d98a28f2b8d8ad534496d610d7d;hb=e0addf5b588a1244f9679becd90999dfcb4c3a94;hp=0000000000000000000000000000000000000000;hpb=39fb0f30472777e4b60d6a7ac8aa4eb9773961ff;p=policy%2Fengine.git

diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/animations.css b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/animations.css
new file mode 100644
index 000000000..50db9b001
--- /dev/null
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/animations.css
@@ -0,0 +1,183 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ECOMP Policy Engine
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  };
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  };
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  };
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  };
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  };
+}
+
+@-webkit-keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  };
+}
+
+@keyframes colors {
+  0% {
+    stroke: #4285F4;
+  }
+
+  25% {
+    stroke: #DE3E35;
+  }
+
+  50% {
+    stroke: #F7C223;
+  }
+
+  75% {
+    stroke: #1B9A59;
+  }
+
+  100% {
+    stroke: #4285F4;
+  };
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1,150;
+    stroke-dashoffset: 0;
+    stroke: red;
+  }
+
+  50% {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -35;
+    stroke: yellow;
+  }
+
+  100% {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -124;
+    stroke: green;
+  };
+}
+
+@-webkit-keyframes dash {
+  0% {
+    stroke-dasharray: 1,150;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -35;
+  }
+
+  100% {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -124;
+  };
+}
+
+.animated {
+  -webkit-animation-duration: .7s;
+  animation-duration: .7s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.modal.animated,
+.animated.fast {
+  -webkit-animation-duration: .2s;
+  animation-duration: .2s;
+}
+
+.animated.slow {
+  -webkit-animation-duration: 1.1s;
+  animation-duration: 1.1s;
+}
+
+.animated.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+.animated.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+.spinner-container {
+  -webkit-animation: rotate 2s linear infinite;
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  width: 65px;
+  height: 65px;
+}
+
+.spinner-container .path {
+  stroke-dasharray: 1,150;
+  stroke-dashoffset: 0;
+  stroke: #2196F3;
+  stroke-linecap: round;
+  -webkit-animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+  animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+}
\ No newline at end of file