Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

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 contents data-controller="dialog">
  <button type="button" class="btn" data-action="dialog#showModal">Open sheet</button>
  <dialog class="sheet sheet--right" data-dialog-target="menu" data-action="click->dialog#closeOnClickOutside" aria-label="Edit profile">
    <button type="button" class="btn btn--plain sheet__close" data-action="click->dialog#close">
      <span class="icon icon--x" aria-hidden="true"></span>
      <span class="sr-only">Close</span>
    </button>
    <div class="sheet__content">
      <form class="flex flex-col gap" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="QUJeqsBmlQVBn2eTGyIw6jcbowcpp937Fbc0ltRYMv0WOqbtGfM5pMwnHZcFe76LXSzKG-dUDwURlMn7fCN5QA" autocomplete="off" />
        <div class="flex flex-col">
          <h3 class="font-semibold leading-none mbe-1">Edit profile</h3>
          <p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p>
        </div>
        <div class="flex flex-col gap mb-2">
          <div class="flex items-center gap">
            <label class="text-sm font-medium leading-none text-end" style="min-inline-size: 25%;" for="name">Name</label>
            <input value="Lázaro Nixon" class="input" type="text" name="name" id="name" />
          </div>
          <div class="flex items-center gap">
            <label class="text-sm font-medium leading-none text-end" style="min-inline-size: 25%;" for="username">Username</label>
            <input value="@lazaronixon" class="input" type="text" name="username" id="username" />
          </div>
        </div>
        <div class="flex items-center justify-end">
          <input type="submit" name="commit" value="Save changes" class="btn btn--primary" data-disable-with="Save changes" />
        </div>
      </form>
    </div>
  </dialog>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div contents data-controller="dialog">
  <button type="button" class="btn" data-action="dialog#showModal">Open sheet</button>
  <dialog class="sheet sheet--right" data-dialog-target="menu" data-action="click->dialog#closeOnClickOutside" aria-label="Edit profile">
    <button type="button" class="btn btn--plain sheet__close" data-action="click->dialog#close">
      <span class="icon icon--x" aria-hidden="true"></span>
      <span class="sr-only">Close</span>
    </button>
    <div class="sheet__content">
      <%= render "profile_form" %>
    </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
.sheet {
  background-color: var(--color-bg);
  border-inline-width: var(--sheet-border);
  box-shadow: var(--shadow-lg);
  block-size: var(--size-full);
  color: var(--color-text);
  inline-size: var(--sheet-size, var(--size-3-4));
  margin-inline: var(--sheet-margin);
  max-block-size: unset;
  &::backdrop {
    background-color: rgba(0, 0, 0, .5);
  }
  /* Setup transition */
  transition-behavior: allow-discrete;
  transition-duration: var(--time-300);
  transition-property: display, overlay, transform;
  &::backdrop {
    transition-behavior: allow-discrete;
    transition-duration: var(--time-150);
    transition-property: display, overlay, opacity;
  }
  /* Exit stage to */
  & { transform: var(--sheet-transform); }
  &::backdrop { opacity: 0; }
  /* On stage */
  &[open] { transform: translateX(0); }
  &[open]::backdrop { opacity: 1; }
  /* Enter stage from */
  @starting-style {
    &[open] { transform: var(--sheet-transform); }
    &[open]::backdrop { opacity: 0;}
  }
  @media (width >= 40rem) {
    max-inline-size: var(--sheet-size, var(--max-i-sm));
  }
}
.sheet--left {
  --sheet-border: 0 1px;
  --sheet-margin: 0 auto;
  --sheet-transform: translateX(-100%);
}
.sheet--right {
  --sheet-border: 1px 0;
  --sheet-margin: auto 0;
  --sheet-transform: translateX(100%);
}
.sheet__content {
  block-size: var(--size-full);
  padding: var(--size-6);
}
.sheet__close {
  inset-block-start: var(--size-3);
  inset-inline-end:  var(--size-3);
  position: absolute;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "menu" ]
  show() {
    this.menuTarget.show()
  }
  showModal() {
    this.menuTarget.showModal()
  }
  close() {
    this.menuTarget.close()
  }
  closeOnClickOutside({ target }) {
    target.nodeName === "DIALOG" && this.close()
  }
}