{WIP} Bulma => Knacss (toastr & flash)

sass/flash.scss

@@ -0,0 +1,14 @@
+.flash {
+    background-color: #f14668;
+    border-radius: 6px;
+    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
+    color: #fff;
+    display: block;
+    padding: 1.25rem; 
+    width: calc(100% - 6rem);
+    margin: 2rem auto;
+
+    .header {
+        font-weight: 800;
+    }
+}

sass/home.scss

@@ -1,8 +1,10 @@
-.header {
-    margin-bottom: 3.25rem;
-    @include respond-to("small-up") {
-        height: 30vh;
-        background-image: url('/header.jpg');
-        background-size: cover;
+.home {
+    .header {
+        margin-bottom: 3.25rem;
+        @include respond-to("small-up") {
+            height: 30vh;
+            background-image: url('/header.jpg');
+            background-size: cover;
+        }
     }
-}
+}

sass/index.scss

@@ -31,6 +31,8 @@
 @import './button.scss';
 @import './table';
 @import './modal';
+@import './toast';
+@import './flash';
 
 @import './home';
 @import './connexion';

sass/toast.scss

@@ -8,10 +8,59 @@
     top: 30px;
     font-size: 17px;
 
+    padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+    background-color: #f14668;
+    color: #fff;
+
     &.show {
         visibility: visible;
         animation: toastrFadein 0.5s, toastrFadeout 0.5s 2.5s;
     }
+
+    button {
+        width: 20px;
+        font-size: 0;
+        height: 20px;
+        max-height: 20px;
+        max-width: 20px;
+        min-height: 20px;
+        min-width: 20px;
+        outline: 0;
+        border: none;
+        border-radius: 9999px;
+        cursor: pointer;
+        pointer-events: auto;
+        display: inline-block;
+        user-select: none;
+        right: .5rem;
+        position: absolute;
+        top: .5rem;
+        background-color: rgba(10, 10, 10, 0.2);
+
+        &:hover {
+            background-color: rgba(10,10,10,.3);
+        }
+
+        &::before,
+        &::after {
+            background-color: #fff;
+            content: "";
+            display: block;
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translateX(-50%) translateY(-50%) rotate(45deg);
+            transform-origin: center center;
+        }
+        &::before {
+            height: 2px;
+            width: 50%;
+        }
+        &::after {
+            height: 50%;
+            width: 2px;
+        }
+    }
 }
 
 @keyframes toastrFadein {