aboutsummaryrefslogtreecommitdiff
path: root/ufund-ui/src/app/components/toast/toast.component.css
diff options
context:
space:
mode:
authorbenal01 <bja4245@rit.edu>2025-04-01 09:34:36 -0400
committerbenal01 <bja4245@rit.edu>2025-04-01 09:34:36 -0400
commit7ed26c5ee7171a502f6f8527fc55de2bb77eab3b (patch)
tree2046e58c146097aac21c9e352771420c31df6589 /ufund-ui/src/app/components/toast/toast.component.css
parentef46ddd082bb91d0262363536d46fe3eb4da47be (diff)
parentd8330f1ac85b26d08ca4df5ce3875078d7b4f47f (diff)
downloadJellySolutions-7ed26c5ee7171a502f6f8527fc55de2bb77eab3b.tar.gz
JellySolutions-7ed26c5ee7171a502f6f8527fc55de2bb77eab3b.tar.bz2
JellySolutions-7ed26c5ee7171a502f6f8527fc55de2bb77eab3b.zip
Merge branch 'main' of https://github.com/RIT-SWEN-261-02/team-project-2245-swen-261-02-2b-jellysolutions
Diffstat (limited to 'ufund-ui/src/app/components/toast/toast.component.css')
-rw-r--r--ufund-ui/src/app/components/toast/toast.component.css57
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;
+}