Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div data-controller="dialog">
  <button class="btn" data-action="dialog#showModal">Show dialog</button>
  <dialog class="dialog" data-dialog-target="menu" role="alertdialog" aria-labelledby="dialog_label" aria-describedby="dialog_desc">
    <div class="dialog__content">
      <h1 class="text-lg font-semibold leading-none" id="dialog_label">Are you absolutely sure?</h1>
      <p class="text-sm text-subtle mbs-2" id="dialog_desc">
        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
      </p>
      <div class="flex items-center justify-end gap mbs-4">
        <button class="btn" data-action="click->dialog#close">Cancel</button>
        <button class="btn btn--primary">Continue</button>
      </div>
    </div>
  </dialog>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div data-controller="dialog">
  <button class="btn" data-action="dialog#showModal">Show dialog</button>
  <dialog class="dialog" data-dialog-target="menu" role="alertdialog" aria-labelledby="dialog_label" aria-describedby="dialog_desc">
    <div class="dialog__content">
      <h1 class="text-lg font-semibold leading-none" id="dialog_label">Are you absolutely sure?</h1>
      <p class="text-sm text-subtle mbs-2" id="dialog_desc">
        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
      </p>
      <div class="flex items-center justify-end gap mbs-4">
        <button class="btn" data-action="click->dialog#close">Cancel</button>
        <button class="btn btn--primary">Continue</button>
      </div>
    </div>
  </dialog>
</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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.dialog {
  background-color: var(--color-bg);
  border-radius: var(--rounded-lg);
  border-width: var(--border);  
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  inline-size: var(--size-full);
  margin: auto;
  max-inline-size: var(--max-i-lg);
  &::backdrop {
    background-color: rgba(0, 0, 0, .8);
  }
  /* Setup animation */
  opacity: 0;
  transform: var(--scale-95);
  transition-behavior: allow-discrete;
  transition-duration: var(--time-150);
  transition-property: display, overlay, opacity, transform;
  &::backdrop {
    opacity: 0;
    transition-behavior: allow-discrete;
    transition-duration: var(--time-150);
    transition-property: display, overlay, opacity;
  }
  /* In animation */
  &[open] {
    opacity: 1; transform: var(--scale-100);
  }
  &[open]::backdrop {
    opacity: 1;
  }
  /* Out animation */
  @starting-style {
    &[open] {
      opacity: 0; transform: var(--scale-95);
    }
    &[open]::backdrop {
      opacity: 0;
    }
  }
  /* Drawer component on mobile  */
  @media (width < 40rem) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    margin-block-end: 0;
    max-inline-size: none;
  }
}
.dialog__content {
  padding: var(--size-6);
}
.dialog__close {
  inset-block-start: var(--size-4);
  inset-inline-end: var(--size-4);
  position: absolute;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "menu" ]
  showModal() {
    this.menuTarget.showModal()
  }
  close() {
    this.menuTarget.close()
  }
  closeOnClickOutside({ target }) {
    target.nodeName === "DIALOG" && this.close()
  }
}

No notes provided.