Fix missing animation

sippy-platform · Mar 25, 2022 · 626dd45 · 626dd45
1 parent 4b459f5
commit 626dd45
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 0 deletions.
diff --git a/docs/fonts/Valkyrie.css b/docs/fonts/Valkyrie.css
@@ -55,6 +55,16 @@ url("./Valkyrie.eot?f20d1ce7cdf077c6d3d0adb4983f8b74#iefix") format("embedded-op
   transform: scale(-1);
 }
 
+@keyframes animate-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .vi.vi-address-book:before {
  content: "\f101";
 }

diff --git a/docs/fonts/Valkyrie.scss b/docs/fonts/Valkyrie.scss
@@ -55,6 +55,16 @@ url("./Valkyrie.eot?f20d1ce7cdf077c6d3d0adb4983f8b74#iefix") format("embedded-op
   transform: scale(-1);
 }
 
+@keyframes animate-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .vi.vi-address-book:before {
  content: "\f101";
 }

diff --git a/docs/index.html b/docs/index.html
@@ -2003,5 +2003,65 @@ <h1 class="display-4 m-0"><i class="vi vi-valkyrie-sword"></i> Valkyrie</h1>
 
   </div>
 
+  <h2 class="text-center">CSS classes</h2>
+
+  <div class="icons text-center">
+    <div class="preview">
+      <span class="inner">
+        <i class="vi vi-devices vi-spin"></i>
+      </span>
+      <br>
+      <span class='label'>spin</span>
+    </div>
+
+    <div class="preview">
+      <span class="inner">
+        <i class="vi vi-devices vi-rotate-90"></i>
+      </span>
+      <br>
+      <span class='label'>rotate-90</span>
+    </div>
+
+    <div class="preview">
+      <span class="inner">
+        <i class="vi vi-devices vi-rotate-180"></i>
+      </span>
+      <br>
+      <span class='label'>rotate-180</span>
+    </div>
+
+    <div class="preview">
+      <span class="inner">
+        <i class="vi vi-devices vi-rotate-270"></i>
+      </span>
+      <br>
+      <span class='label'>rotate-270</span>
+    </div>
+
+    <div class="preview">
+      <span class="inner">
+        <i class="vi vi-devices vi-flip-x"></i>
+      </span>
+      <br>
+      <span class='label'>flip-x</span>
+    </div>
+
+    <div class="preview">
+      <span class="inner">
+        <i class="vi vi-devices vi-flip-y"></i>
+      </span>
+      <br>
+      <span class='label'>flip-y</span>
+    </div>
+
+    <div class="preview">
+      <span class="inner">
+        <i class="vi vi-devices vi-flip"></i>
+      </span>
+      <br>
+      <span class='label'>flip</span>
+    </div>
+  </div>
+
 </body>
 </html>
diff --git a/templates/css.hbs b/templates/css.hbs
@@ -56,6 +56,16 @@
   transform: scale(-1);
 }
 
+@keyframes animate-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 {{# each codepoints }}
 {{# if ../selector }}
 {{ ../selector }}.{{ ../prefix }}-{{ @key }}:before {