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
<button type="button" class="btn" commandfor="sheet" command="show-modal">Open</button>
<dialog id="sheet" class="sheet sheet--right" data-controller="dialog" data-action="click->dialog#closeOnClickOutside" aria-labelledby="sheet_label" aria-describedby="sheet_desc">
  <button type="button" class="btn btn--plain sheet__close" commandfor="sheet" command="close">
    <span class="icon icon--x" aria-hidden="true"></span>
    <span class="sr-only">Close</span>
  </button>
  <form class="sheet__content flex flex-col gap" autocomplete="off" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="-D6kVuqUAgYiEtAGTp3-hA6mxXf5D95WfLC-1cJ_qRxu_LztzWYs2yVGmnPgI4Forzks-EHBn4UqvKX1sYFP-A" autocomplete="off" />
    <div class="flex flex-col">
      <h3 class="font-medium leading-none mbe-1" id="sheet_label">Edit profile</h3>
      <p class="text-sm text-subtle" id="sheet_desc">Make changes to your profile here. Click save when you're done.</p>
    </div>
    <div class="flex-1 flex flex-col gap">
      <div class="flex flex-col gap-half">
        <label class="text-sm font-medium leading-none" for="name">Name</label>
        <input value="Pedro Duarte" class="input" autofocus="autofocus" type="text" name="name" id="name" />
      </div>
      <div class="flex flex-col gap-half">
        <label class="text-sm font-medium leading-none" for="username">Username</label>
        <input value="@peduarte" class="input" type="text" name="username" id="username" />
      </div>
    </div>
    <div class="flex flex-col gap-half">
      <input type="submit" name="commit" value="Save changes" class="btn btn--primary" data-disable-with="Save changes" />
      <button type="button" class="btn" commandfor="sheet" command="close">Close</button>
    </div>
  </form>
</dialog>
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
<button type="button" class="btn" commandfor="sheet" command="show-modal">Open</button>
<dialog id="sheet" class="sheet sheet--right" data-controller="dialog" data-action="click->dialog#closeOnClickOutside" aria-labelledby="sheet_label" aria-describedby="sheet_desc">
  <button type="button" class="btn btn--plain sheet__close" commandfor="sheet" command="close">
    <span class="icon icon--x" aria-hidden="true"></span>
    <span class="sr-only">Close</span>
  </button>
  <%= form_with url: nil, html: { autocomplete: "off" }, class: "sheet__content flex flex-col gap" do |form| %>
    <div class="flex flex-col">
      <h3 class="font-medium leading-none mbe-1" id="sheet_label">Edit profile</h3>
      <p class="text-sm text-subtle" id="sheet_desc">Make changes to your profile here. Click save when you're done.</p>
    </div>
    <div class="flex-1 flex flex-col gap">
      <div class="flex flex-col gap-half">
        <%= form.label :name, class: "text-sm font-medium leading-none" %>
        <%= form.text_field :name, value: "Pedro Duarte", class: "input", autofocus: true %>
      </div>
      <div class="flex flex-col gap-half">
        <%= form.label :username, class: "text-sm font-medium leading-none" %>
        <%= form.text_field :username, value: "@peduarte", class: "input" %>
      </div>
    </div>
    <div class="flex flex-col gap-half">
      <%= form.submit "Save changes", class: "btn btn--primary" %>
      <button type="button" class="btn" commandfor="sheet" command="close">Close</button>
    </div>
  <% end %>
</dialog>
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
67
68
69
70
71
.sheet {
  background-color: var(--color-surface);
  block-size: var(--size-full);
  border-inline-width: var(--sheet-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  inline-size: var(--sheet-size, var(--size-3-4));
  margin-inline: var(--sheet-margin-inline);
  max-block-size: none;
  &::backdrop {
    backdrop-filter: var(--blur-xs);
  }
  /* Setup transition */
  transition-behavior: allow-discrete;
  transition-duration: var(--time-200);
  transition-property: display, overlay, opacity, transform;
  transition-timing-function: var(--ease-out-3);
  &::backdrop {
    transition-behavior: allow-discrete;
    transition-duration: var(--time-150);
    transition-property: display, overlay, opacity;
    transition-timing-function: var(--ease-out-3);
  }
  /* Exit stage to */
  & { opacity: 0; transform: var(--sheet-transform); }
  &::backdrop { opacity: 0; }
  /* On stage */
  &[open] { opacity: 1; transform: translateX(0); }
  &[open]::backdrop { opacity: 1; }
  /* Enter stage from */
  @starting-style {
    &[open] { opacity: 0; transform: var(--sheet-transform); }
    &[open]::backdrop { opacity: 0; }
  }
  @supports (-webkit-hyphens: none) {
    transition-behavior: normal;
  }
  @media (width >= 40rem) {
    max-inline-size: var(--sheet-size, var(--max-i-sm));
  }
}
.sheet--left {
  --sheet-border: 0 1px;
  --sheet-margin-inline: 0 auto;
  --sheet-transform: translateX(-2.5rem);
}
.sheet--right {
  --sheet-border: 1px 0;
  --sheet-margin-inline: auto 0;
  --sheet-transform: translateX(2.5rem);
}
.sheet__content {
  block-size: inherit; padding: var(--size-4);
}
.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
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  show() {
    this.element.show()
  }
  showModal() {
    this.element.showModal()
  }
  close() {
    this.element.close()
  }
  closeOnClickOutside({ target }) {
    target.nodeName === "DIALOG" && this.close()
  }
}

No notes provided.