alertas flotantes

_includes/floating_alert.html

@@ -0,0 +1,6 @@
+<div
+  data-controller="floating-alert"
+  class="pointer-event-none floating-alert floating-alert-bottom d-flex justify-content-center w-100 position-fixed fade hide"
+  role="status" aria-live="polite" aria-atomic="true">
+  <div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
+</div>

_packs/controllers/floating_alert_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = [ 'content' ]
+
+  connect () {
+    window.addEventListener('toast', event => {
+      this.contentTarget.innerText = event.detail.content
+      this.element.classList.toggle('hide')
+      this.element.classList.toggle('show')
+
+      setTimeout(() => {
+        this.element.classList.toggle('hide')
+        this.element.classList.toggle('show')
+      }, 3000)
+    })
+  }
+}

_sass/floating_alert.scss

@@ -0,0 +1,10 @@
+.floating-alert {
+  &.floating-alert-bottom {
+    bottom: 2rem;
+  }
+
+  .floating-alert-content {
+    border-radius: 2rem;
+    padding: .5rem 1rem;
+  }
+}

assets/css/styles.scss

@@ -6,6 +6,10 @@ $debug: {{ jekyll.environment | not: 'production' }};
 $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
+$colors: (
+  "black": black
+);
+
 $opacities: (
   0: -100%,
   1: -80%,