Css Zero Showcase
x
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
<div popover class="flash flash--negative" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert">
  Contact info was updated for 3590.8768.6191@hey.com
</div>
<div class="container flex flex-col gap">
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
  <div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div>
</div>
1
2
3
4
5
6
7
<div popover class="flash flash--negative" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert">
  Contact info was updated for 3590.8768.6191@hey.com
</div>
<div class="container flex flex-col gap">
  <% 25.times do %><div class="rounded-lg bg-shade" style="min-block-size: 3rem"></div><% end %>
</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
45
46
47
.flash {
  align-items: center;
  animation: appear-then-fade 4s 300ms both;
  backdrop-filter: var(--blur-sm) var(--contrast-75);
  background-color: var(--flash-background, rgb(from var(--color-text) r g b / .65));
  border-radius: var(--rounded-full);
  color: var(--flash-color, var(--color-text-reversed));
  column-gap: var(--size-2);
  display: flex;
  font-size: var(--text-fluid-base);
  justify-content: center;
  line-height: var(--leading-none);
  margin-block-start: var(--flash-position, var(--size-4));
  margin-inline: auto;
  min-block-size: var(--size-11);
  padding: var(--size-1) var(--size-4);
  text-align: center;
  [data-turbo-preview] & {
    display: none;
  }
}
.flash--positive {
  --flash-background: var(--color-positive);
  --flash-color: white;
}
.flash--negative {
  --flash-background: var(--color-negative);
  --flash-color: white;
}
.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.