From 02d8bd7b772ccd0a71613466b0fbf902cb444288 Mon Sep 17 00:00:00 2001 From: WubzyGD 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 @@ + FileKade @@ -36,6 +37,7 @@
+

Test

This is a test toast toast toast

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