Commit a6725b62 authored by f's avatar f
Browse files

alertas flotantes

parent 126ad3ee
<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>
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)
})
}
}
.floating-alert {
&.floating-alert-bottom {
bottom: 2rem;
}
.floating-alert-content {
border-radius: 2rem;
padding: .5rem 1rem;
}
}
......@@ -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%,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment