From bbc4744eed19225b43b88de956319f8523a36f45 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 20 Mar 2021 00:03:04 +0100
Subject: [PATCH] Added toast style and comp

---
 src/App.vue                         |  5 ++-
 src/assets/scss/_animations.scss    |  9 +++++
 src/assets/scss/_variables.scss     | 10 +++++
 src/components/toast/ToastCard.vue  | 61 ++++++++++++++++++++++++++++
 src/components/toast/ToastsList.vue | 63 +++++++++++++++++++++++++++++
 5 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 src/components/toast/ToastCard.vue
 create mode 100644 src/components/toast/ToastsList.vue

diff --git a/src/App.vue b/src/App.vue
index d10ed83..04fe9b4 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss
index db14edc..164ec77 100644
--- a/src/assets/scss/_animations.scss
+++ b/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%;
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 12c47f9..bec6060 100644
--- a/src/assets/scss/_variables.scss
+++ b/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;
 
diff --git a/src/components/toast/ToastCard.vue b/src/components/toast/ToastCard.vue
new file mode 100644
index 0000000..2f8fb8e
--- /dev/null
+++ b/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>
diff --git a/src/components/toast/ToastsList.vue b/src/components/toast/ToastsList.vue
new file mode 100644
index 0000000..22c4c3d
--- /dev/null
+++ b/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>