From 3a3c70a98f9539c86534eee7bdcc1902fe2dd5c8 Mon Sep 17 00:00:00 2001
From: douglastofoli <tofoli.douglas@hotmail.com>
Date: Mon, 4 Mar 2024 09:25:59 -0300
Subject: [PATCH] feat: move code from toast to flash file

---
 assets/css/app.scss   |  2 +-
 assets/css/flash.scss | 72 +++++++++++++++++++++++++++++++++++++++++++
 assets/css/toast.scss | 53 -------------------------------
 3 files changed, 73 insertions(+), 54 deletions(-)
 create mode 100644 assets/css/flash.scss
 delete mode 100644 assets/css/toast.scss

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 98773924..47cbd778 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -162,12 +162,12 @@ footer {
 // Componentes
 @import "./button.scss";
 @import "./checkbox.scss";
+@import "./flash.scss";
 @import "./input.scss";
 @import "./landing.scss";
 @import "./navbar.scss";
 @import "./radio.scss";
 @import "./search.scss";
-@import "./toast.scss";
 @import "./textarea.scss";
 @import "./tabela.scss";
 @import "./label.scss";
diff --git a/assets/css/flash.scss b/assets/css/flash.scss
new file mode 100644
index 00000000..5439d885
--- /dev/null
+++ b/assets/css/flash.scss
@@ -0,0 +1,72 @@
+.flash-component {
+  display: inline-flex;
+  flex-direction: column-reverse;
+  position: fixed;
+  max-width: 25rem;
+  top: 1.5rem;
+  right: 1.5rem;
+  padding: 0.75rem;
+  align-items: flex-start;
+  gap: 0.75rem;
+  border-radius: 0.25rem;
+  background-color: #fff;
+
+  .flash {
+    @apply flex items-center;
+    gap: 0.75rem;
+
+
+    .flash-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    p {
+      @apply text-black-80;
+    }
+  }
+}
+
+.flash-component.success {
+  @apply border-2 border-solid border-green-40;
+
+  .flash-icon {
+    @apply text-green-100;
+  }
+}
+
+.flash-component.warning {
+  @apply border-2 border-solid border-yellow-40;
+
+  .flash-icon {
+    @apply text-yellow-100;
+  }
+}
+
+.flash-component.error {
+  @apply border-2 border-solid border-red-40;
+
+  .flash-icon {
+    @apply text-red-100;
+  }
+}
+
+.flash-component.show {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+}
+
+#flash-group {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  align-items: flex-end;
+  top: 1.5rem;
+  right: 1.5rem;
+  gap: 0.5rem;
+
+  .flash-component {
+    position: relative;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/toast.scss b/assets/css/toast.scss
deleted file mode 100644
index bcba31b5..00000000
--- a/assets/css/toast.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.toast {
-  @apply flex items-center;
-  @apply w-full max-w-xs;
-  @apply text-black-80 bg-white-100;
-
-  z-index: 100;
-  height: 3rem;
-  min-width: 14.8rem;
-  max-width: max-content;
-  padding: 0.75rem;
-  border-radius: 0.25rem;
-  border-width: 0.094rem;
-  position: absolute;
-  top: calc($navbar-height + 1rem);
-  left: calc(100vh - 5.5rem);
-  visibility: hidden;
-  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-  animation: fadein 0.5s, fadeout 0.5s 2.5s;
-
-  .toast-icon {
-    @apply text-white-100;
-    @apply inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-full;
-    margin-right: 0.75rem;
-  }
-}
-
-.toast.show {
-  visibility: visible;
-}
-
-.toast.success {
-  @apply border-green-40;
-
-  .toast-icon > svg {
-    @apply fill-red-100;
-  }
-}
-
-.toast.warning {
-  @apply border-yellow-40;
-
-  .toast-icon > svg {
-    @apply fill-yellow-100;
-  }
-}
-
-.toast.error {
-  @apply border-red-40;
-
-  .toast-icon > svg {
-    @apply fill-red-100;
-  }
-}