Added toast style and comp

src/App.vue

@@ -4,16 +4,19 @@
     <div class="fs-content">
       <router-view />
     </div>
+    <toasts-list />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import Navbar from "@/components/Navbar.vue";
+import ToastsList from "@/components/toast/ToastsList.vue";
 
 export default defineComponent({
   components: {
-    Navbar
+    Navbar,
+    ToastsList,
   }
 });
 </script>

src/assets/scss/_animations.scss

@@ -36,6 +36,15 @@
   }
 }
 
+@keyframes slideFromRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
 @keyframes paneBgAround {
   0% {
     background-position: -10vw 0%;

src/assets/scss/_variables.scss

@@ -8,6 +8,16 @@ $space-blue-600:  #234e69;
 $space-blue-500:  #457b9d;
 $space-blue-300:  #a8dadc;
 
+$blue:        #306BAC;
+$green:       #1c8267;
+$orange:      #ff9844;
+$red:         #9f2042;
+
+$info: $blue;
+$valid: $green;
+$warning: $orange;
+$danger: $red;
+
 $primary: $space-blue-700;
 $primary-light: $space-blue-600;
 

src/components/toast/ToastCard.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="toast-card" :class="variant">
+    <div class="toast-title">
+      <slot name="title" />
+    </div>
+    <div class="toast-message">
+      <slot name="message" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ToastCard",
+  props: {
+    variant: String
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-card {
+  position: relative;
+  padding: 20px 30px 26px;
+  border-radius: 5px;
+  animation: fadeIn 1s cubic-bezier(0.175, 1, 0.32, 1),
+    slideFromRight 1s cubic-bezier(0.175, 1, 0.32, 1);
+    overflow: hidden;
+  .toast-title {
+    margin-bottom: 5px;
+    font-size: 16px;
+    font-weight: $fw-bold;
+  }
+  &:after {
+    position: absolute;
+    display: block;
+    content: "";
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 6px;
+    background: rgba($fs-black, 33%);
+  }
+  &.info {
+    background-color: $info;
+  }
+  &.valid {
+    background-color: $valid;
+  }
+  &.warning {
+    color: $fs-black;
+    background-color: $warning;
+  }
+  &.danger {
+    background-color: $danger;
+  }
+}
+</style>

src/components/toast/ToastsList.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="toast-wrapper">
+    <div class="toast-item">
+      <toast-card variant="info">
+        <template #title>Toast informant</template>
+        <template #message>
+          Ce message est utilisé pour informer.
+        </template>
+      </toast-card>
+    </div>
+    <div class="toast-item">
+      <toast-card variant="valid">
+        <template #title>Toast validant</template>
+        <template #message>
+          Ce message est utilisé pour valider.
+        </template>
+      </toast-card>
+    </div>
+    <div class="toast-item">
+      <toast-card variant="warning">
+        <template #title>Toast avertissant</template>
+        <template #message>
+          Ce message est utilisé pour avertir.
+        </template>
+      </toast-card>
+    </div>
+    <div class="toast-item">
+      <toast-card variant="danger">
+        <template #title>Toast d'alerte</template>
+        <template #message>
+          Ce message est utilisé pour alerter.
+        </template>
+      </toast-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import ToastCard from "./ToastCard.vue";
+
+export default defineComponent({
+  name: "ToastsList",
+  components: {
+    ToastCard
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-wrapper {
+  position: fixed;
+  top: 90px;
+  height: 100%;
+  right: 0;
+  pointer-events: none;
+  .toast-item {
+    pointer-events: all;
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+}
+</style>