alertas flotantes
This commit is contained in:
parent
126ad3ee8f
commit
a6725b62ea
4 changed files with 38 additions and 0 deletions
6
_includes/floating_alert.html
Normal file
6
_includes/floating_alert.html
Normal 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>
|
18
_packs/controllers/floating_alert_controller.js
Normal file
18
_packs/controllers/floating_alert_controller.js
Normal 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
10
_sass/floating_alert.scss
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
.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-");
|
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
||||||
$bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
$bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
||||||
|
|
||||||
|
$colors: (
|
||||||
|
"black": black
|
||||||
|
);
|
||||||
|
|
||||||
$opacities: (
|
$opacities: (
|
||||||
0: -100%,
|
0: -100%,
|
||||||
1: -80%,
|
1: -80%,
|
||||||
|
|
Loading…
Reference in a new issue