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">Show dialog</button>
<dialog class="dialog" style="max-inline-size: 430px;" data-dialog-target="menu" data-action="click->dialog#closeOnClickOutside" aria-label="Edit profile">
<button class="btn btn--plain dialog__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="dialog__content">
<form class="flex flex-col gap" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="HoX_c8mLGSUC90p400fO7FagFuntWNgrRu_hZQzGIKMSwGkTNjxYdJNl48PSCE9Jtmr4Nx7cQA06Gw2u9_t9ug" 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">Show dialog</button>
<dialog class="dialog" style="max-inline-size: 430px;" data-dialog-target="menu" data-action="click->dialog#closeOnClickOutside" aria-label="Edit profile">
<button class="btn btn--plain dialog__close" data-action="click->dialog#close">
<%= image_tag "x.svg", size: 16, aria: { hidden: true } %>
<span class="sr-only">Close</span>
</button>
<div class="dialog__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
.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()
}
}