alertas flotantes

This commit is contained in:
f 2021-01-25 16:46:16 -03:00
parent 126ad3ee8f
commit a6725b62ea
4 changed files with 38 additions and 0 deletions

View file

@ -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>

View file

@ -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)
})
}
}

10
_sass/floating_alert.scss Normal file
View file

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

View file

@ -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%,