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-");
|
||||
$bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
||||
|
||||
$colors: (
|
||||
"black": black
|
||||
);
|
||||
|
||||
$opacities: (
|
||||
0: -100%,
|
||||
1: -80%,
|
||||
|
|
Loading…
Reference in a new issue