From 2716256c665e39b0e217dac1f3bb560a14c101e1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 24 Oct 2021 18:19:05 +0200
Subject: chore: add styles

---
 htdocs/src/scss/base/_animations.scss | 89 +++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 htdocs/src/scss/base/_animations.scss

(limited to 'htdocs/src/scss/base/_animations.scss')

diff --git a/htdocs/src/scss/base/_animations.scss b/htdocs/src/scss/base/_animations.scss
new file mode 100644
index 0000000..9ec8e9e
--- /dev/null
+++ b/htdocs/src/scss/base/_animations.scss
@@ -0,0 +1,89 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    margin-left: -100%;
+  }
+
+  100% {
+    margin-left: 0;
+    visibility: visible;
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    margin-left: 0;
+  }
+
+  100% {
+    margin-left: -100%;
+    visibility: hidden;
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    margin-bottom: -100%;
+  }
+
+  100% {
+    margin-bottom: 0;
+    visibility: visible;
+  }
+}
+
+@keyframes slideOutBottom {
+  0% {
+    margin-bottom: 0;
+  }
+
+  100% {
+    margin-bottom: -100%;
+    visibility: hidden;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.8s;
+}
+
+.fade-out {
+  animation: fadeOut 0.8s;
+}
+
+.slide-in--left {
+  animation: slideInLeft 0.8s;
+}
+
+.slide-out--left {
+  animation: slideOutLeft 0.8s;
+}
+
+.slide-in--up {
+  animation: slideInUp 0.8s;
+}
+
+.slide-out--bottom {
+  animation: slideOutBottom 0.8s;
+}
-- 
cgit v1.2.3