From 02d8bd7b772ccd0a71613466b0fbf902cb444288 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sat, 11 Dec 2021 16:39:09 -0700
Subject: [PATCH] toast test case + animate toasts

---
 index.html                   |  2 ++
 scripts/toast/createtoast.js |  0
 styles/toast.css             | 43 ++++++++++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 scripts/toast/createtoast.js
 create mode 100644 styles/toast.css

diff --git a/index.html b/index.html
index 7aa076d..dd576d1 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
         <link href='./styles/controls.css' rel='stylesheet'>
         <link href='./styles/context.css' rel='stylesheet'>
         <link href='./styles/modal.css' rel='stylesheet'>
+        <link href="./styles/toast.css" rel="stylesheet">
 
         <title>FileKade</title>
     </head>
@@ -36,6 +37,7 @@
         </div>
 
         <div id="ctx"></div>
+        <div id="toast-container"><div class="toast"><h2>Test</h2><p>This is a test toast toast toast</p></div></div>
 
 
         <script src="./scripts/renderer.js"></script>
diff --git a/scripts/toast/createtoast.js b/scripts/toast/createtoast.js
new file mode 100644
index 0000000..e69de29
diff --git a/styles/toast.css b/styles/toast.css
new file mode 100644
index 0000000..df48297
--- /dev/null
+++ b/styles/toast.css
@@ -0,0 +1,43 @@
+@keyframes enter-toast {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    to {
+        opacity: 100;
+        transform: translateX(0);
+    }
+}
+
+#toast-container {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: stretch;
+    align-content: stretch;
+    row-gap: 4px;
+    justify-content: flex-end;
+    width: auto;
+}
+
+.toast {
+    border-radius: 5px;
+    background-color: #a172a6;
+    color: white;
+    animation: enter-toast .25s ease-out 1;
+    animation-fill-mode: both;
+    animation-delay: 2s;
+}
+
+.toast p {
+    font-family: 'Montserrat', sans-serif;
+    margin: 8px;
+}
+
+.toast h2 {
+    font-size: 25px;
+    font-family: 'Nunito', sans-serif;
+    margin: 6px 0 8px 8px;
+}
\ No newline at end of file