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 data-controller="dialog"> <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 class="btn btn--plain sheet__close" data-action="click->dialog#close"> <img aria-hidden="true" src="/assets/x-2fabf707.svg" width="16" height="16" /> <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="AW-u9pFkYpOOroHwsbbL3ZKxlwZkw0kbMoH9SxihjX5h1o52DYx2aCKkIDO8p0gNuGvN8QZ57EjN1ayqdV0skA" autocomplete="off" /> <div class="flex flex-col gap-half"> <h1 class="text-lg font-semibold leading-none">Edit profile</h1> <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 data-controller="dialog"> <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 class="btn btn--plain sheet__close" data-action="click->dialog#close"> <%= image_tag "x.svg", size: 16, aria: { hidden: true } %> <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
67
68
69
70
71
72
.sheet { background-color: var(--color-bg); border-inline-start-width: var(--border); box-shadow: var(--shadow-lg); block-size: var(--size-full); color: var(--color-text); inline-size: var(--size-3-4); margin-inline: var(--sheet-margin); max-block-size: unset; &::backdrop { background-color: rgba(0, 0, 0, .8); } /* Setup animation */ transform: var(--sheet-transform); transition-behavior: allow-discrete; transition-duration: var(--time-500); transition-property: display, overlay, transform; &::backdrop { opacity: 0; transition-behavior: allow-discrete; transition-duration: var(--time-150); transition-property: display, overlay, opacity; } /* In animation */ &[open] { transform: translateX(0); } &[open]::backdrop { opacity: 1; } /* Out animation */ @starting-style { &[open] { transform: var(--sheet-transform); } &[open]::backdrop { opacity: 0; } } @media (width >= 40rem) { max-inline-size: var(--max-i-sm); }}.sheet--left { --sheet-margin: 0 auto; --sheet-transform: translateX(-100%);}.sheet--right { --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-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() }}