diff options
author | benal01 <bja4245@rit.edu> | 2025-04-01 09:34:36 -0400 |
---|---|---|
committer | benal01 <bja4245@rit.edu> | 2025-04-01 09:34:36 -0400 |
commit | 7ed26c5ee7171a502f6f8527fc55de2bb77eab3b (patch) | |
tree | 2046e58c146097aac21c9e352771420c31df6589 /ufund-ui/src/app/components/toast/toast.component.css | |
parent | ef46ddd082bb91d0262363536d46fe3eb4da47be (diff) | |
parent | d8330f1ac85b26d08ca4df5ce3875078d7b4f47f (diff) | |
download | JellySolutions-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.css | 57 |
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; +} |