x
1
2
3
<div popover class="flash flash--extended" style="--flash-position: 1rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"> Contact info was updated for 3590.8768.6191@hey.com</div>
1
2
3
<div popover class="flash flash--extended" style="--flash-position: 1rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"> Contact info was updated for 3590.8768.6191@hey.com</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.flash { align-items: center; animation: appear-then-fade 4s 300ms both; backdrop-filter: var(--blur) var(--contrast-75); background-color: rgb(from var(--color-text) r g b / .65); border-radius: var(--rounded-full); color: var(--color-text-reversed); display: flex; gap: var(--size-2); justify-content: center; line-height: var(--leading-none); margin-block-start: var(--flash-position, 0); margin-inline: auto; min-block-size: var(--size-11); padding: var(--size-1) var(--size-4); text-align: center; [data-turbo-preview] & { display: none; } @media (width >= 40rem) { font-size: var(--text-lg); } @media (width >= 64rem) { font-size: var(--text-xl); }}.flash--extended { animation-name: appear-then-fade-extended; animation-duration: 12s;}@keyframes appear-then-fade { 0%, 100% { opacity: 0; } 5%, 60% { opacity: 1; }}@keyframes appear-then-fade-extended { 0%, 100% { opacity: 0; } 2%, 90% { opacity: 1; }}
1
2
3
4
5
6
7
import { Controller } from "@hotwired/stimulus"export default class extends Controller { remove() { this.element.remove() }}
No notes provided.