Merge pull request #22 from RIT-SWEN-261-02/css

Merge css into main

1 files changed, 57 insertions, 0 deletions

diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css
new file mode 100644
index 0000000..4cd81fe
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.css
@@ -0,0 +1,57 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes slideDown {
+    from {transform: translateY(-90px);}
+    to {transform: translateY(0);}
+}
+
+.toast {
+    /*transform: translateY(-90px);*/
+    animation: slideDown .5s ease-in-out;
+    transition: transform .5s;
+    align-self: center;
+    z-index: 3;
+    position: absolute;
+    top: 15px;
+    display: flex;
+    flex-direction: row;
+    padding: 3px 15px;
+    background-color: #3a3a3a;
+    border-radius: 100000px;
+    gap: 10px;
+    align-items: center;
+
+    button {
+        aspect-ratio: 1/1;
+        margin-right: -11px;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        background-color: transparent;
+    }
+
+    button:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.toast.hide {
+    transform: translateY(-90px);
+}
+
+.toast.warning {
+    background-color: #ffc500;
+    color: black;
+
+    button {
+        color: black;
+    }
+}
+
+.toast.error {
+    background-color: #d81a1a;
+}