@ornikar/kitt-universal 1.2.0 → 1.3.0

package/dist/styles.css

@@ -0,0 +1,117 @@
+@keyframes kitt-universal_spin_3gv6_ {
+  0% {
+    transform: rotate(-1deg);
+  }
+
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+.kitt-universal_SpinningIcon_3-FWq > svg {
+  animation: kitt-universal_spin_3gv6_ 1.1s infinite linear;
+}
+
+@keyframes kitt-universal_LargeLoaderInit_3jmWG {
+  /**
+   * 169.64 is the perimeter of each svg circle with a 27 radius
+   * P = 2 * Pi * radius
+   */
+  0% {
+    stroke-dashoffset: 169.64px;
+  }
+
+  /* Edges needs a px value */
+  100% {
+    /* stylelint-disable */
+    stroke-dashoffset: 0;
+    /* stylelint-enable */
+  }
+}
+
+/** Blaze circle animation **/
+@keyframes kitt-universal_LargeLoaderOffset_2BAlg {
+  0% {
+    stroke-dashoffset: 169.64px;
+  }
+
+  /**
+   * 34 equals 20% of this radius and represent the min offset part of the animated circle
+   */
+  100% {
+    stroke-dashoffset: 34px;
+  }
+}
+
+@keyframes kitt-universal_LargeLoaderRotation_2o_Qn {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.kitt-universal_LargeLoader_2A0eh {
+  width: 60px;
+  height: 60px;
+
+  /* Needed to make the animation starting from the top of the circles */
+  transform: scale(-1) rotate(90deg);
+}
+
+.kitt-universal_LargeLoader_2A0eh circle,
+.kitt-universal_LargeLoader_2A0eh g {
+  transform-origin: center center;
+}
+
+.kitt-universal_LargeLoader_2A0eh circle {
+  stroke-width: 3px;
+  stroke-dasharray: 169.64px;
+  stroke-dashoffset: 169.64px;
+  stroke-linecap: round;
+}
+
+.kitt-universal_LargeLoaderFill_Djwa0 {
+  transform-origin: center center;
+  animation: kitt-universal_LargeLoaderRotation_2o_Qn 1.8s linear 0.5s infinite;
+}
+.kitt-universal_LargeLoaderFill_Djwa0 circle {
+  stroke: #4c34e0;
+  animation: kitt-universal_LargeLoaderOffset_2BAlg 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s infinite alternate,
+    kitt-universal_LargeLoaderRotation_2o_Qn 2.16s linear 0.5s infinite;
+}
+
+.kitt-universal_LargeLoaderBase_2OJIP circle {
+  stroke: #ccc;
+  animation: kitt-universal_LargeLoaderInit_3jmWG 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s forwards;
+}
+
+/*
+ * Targets IE 11
+ */
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .kitt-universal_LargeLoader_2A0eh svg {
+    display: none;
+  }
+
+  .kitt-universal_LargeLoader_2A0eh {
+    border-radius: 50%;
+  }
+
+  .kitt-universal_LargeLoader_2A0eh::after {
+    content: '';
+    left: 0;
+    top: 0;
+    width: calc(100% - 6px);
+    height: calc(100% - 6px);
+    border-radius: 50%;
+    display: block;
+    position: absolute;
+    animation: kitt-universal_rotation_3DR0L 2s linear 0.5s infinite;
+    border: 3px solid #4c34e0;
+    border-bottom-color: #ccc;
+    transform-origin: center center;
+  }
+}