Added new animation for tailwind

akaunting · Aug 9, 2023 · 45a1e13 · 45a1e13
1 parent 08bac7e
commit 45a1e13
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 21 deletions.
diff --git a/presets.js b/presets.js
@@ -354,6 +354,16 @@ module.exports = {
                 marquee_long: {
                     '0%': { transform: 'translateX(0%)' },
                     '100%': { transform: 'translateX(-350%)' },
+                },
+
+                hourglass: {
+                    '0%': { transform: 'rotate(180deg)' },
+                    '100%': { transform: 'rotate(360deg)' },
+                },
+
+                setting: {
+                    '0%': {transform: 'rotate(0deg)' },
+                    '100%': { transform: 'rotate(360deg)'},
                 }
             },
 
@@ -365,7 +375,9 @@ module.exports = {
                 submit: 'submit 0.7s ease alternate infinite',
                 submit_second: 'submit_second 0.7s ease alternate infinite',
                 marquee: 'marquee 9s linear infinite',
-                marquee_long: 'marquee_long 14s linear infinite'
+                marquee_long: 'marquee_long 14s linear infinite',
+                hourglass: 'hourglass 1500ms infinite',
+                setting: 'setting 2000ms infinite'
             },
 
             transitionProperty: {

diff --git a/public/css/app.css b/public/css/app.css
@@ -11831,6 +11831,34 @@ button, input, optgroup, select, textarea{
   -webkit-animation: bounce 1s infinite;
           animation: bounce 1s infinite;
 }
+@-webkit-keyframes hourglass{
+
+  0%{
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes hourglass{
+
+  0%{
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+.animate-hourglass{
+  -webkit-animation: hourglass 1500ms infinite;
+          animation: hourglass 1500ms infinite;
+}
 @-webkit-keyframes marquee{
 
   0%{
@@ -12005,6 +12033,34 @@ button, input, optgroup, select, textarea{
   -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+@-webkit-keyframes setting{
+
+  0%{
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes setting{
+
+  0%{
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+.animate-setting{
+  -webkit-animation: setting 2000ms infinite;
+          animation: setting 2000ms infinite;
+}
 @-webkit-keyframes spin{
 
   to{
@@ -63531,6 +63587,10 @@ body{
   margin: 1px;
 }
 
+:is([dir="ltr"] .ltr\:-ml-10){
+  margin-left: -2.5rem;
+}
+
 :is([dir="ltr"] .ltr\:-ml-7){
   margin-left: -1.75rem;
 }
@@ -63555,6 +63615,10 @@ body{
   margin-right: 0.25rem;
 }
 
+:is([dir="ltr"] .ltr\:mr-10){
+  margin-right: 2.5rem;
+}
+
 :is([dir="ltr"] .ltr\:mr-2){
   margin-right: 0.5rem;
 }
@@ -63567,14 +63631,6 @@ body{
   margin-right: 1rem;
 }
 
-:is([dir="ltr"] .ltr\:-ml-10){
-  margin-left: -2.5rem;
-}
-
-:is([dir="ltr"] .ltr\:mr-10){
-  margin-right: 2.5rem;
-}
-
 :is([dir="ltr"] .ltr\:-rotate-90){
   --tw-rotate: -90deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -63867,10 +63923,6 @@ body{
   padding-right: 1.5rem;
 }
 
-:is([dir="ltr"] .ltr\:pr-9){
-  padding-right: 2.25rem;
-}
-
 :is([dir="ltr"] .ltr\:text-left){
   text-align: left;
 }
@@ -64556,6 +64608,10 @@ body{
   margin: 1px;
 }
 
+:is([dir="rtl"] .rtl\:-mr-10){
+  margin-right: -2.5rem;
+}
+
 :is([dir="rtl"] .rtl\:-mr-7){
   margin-right: -1.75rem;
 }
@@ -64564,6 +64620,10 @@ body{
   margin-left: 0.25rem;
 }
 
+:is([dir="rtl"] .rtl\:ml-10){
+  margin-left: 2.5rem;
+}
+
 :is([dir="rtl"] .rtl\:ml-2){
   margin-left: 0.5rem;
 }
@@ -64592,14 +64652,6 @@ body{
   margin-right: 1rem;
 }
 
-:is([dir="rtl"] .rtl\:-mr-10){
-  margin-right: -2.5rem;
-}
-
-:is([dir="rtl"] .rtl\:ml-10){
-  margin-left: 2.5rem;
-}
-
 :is([dir="rtl"] .rtl\:-rotate-90){
   --tw-rotate: -90deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));