x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button type="button" class="btn" popovertarget="popover"> Open popover</button><div popover id="popover" class="popover popover--block-end-start" role="dialog" style="--popover-size: 16rem"> <form class="flex flex-col gap p-3" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="k9YbxvHPhlER-7cyI9bEpgoMjbbzmyKSiWJjo1MMe9gfFCcJwxweKP6GjjApYjsrrySNId7bsyVJSiWWgs1UHA" autocomplete="off" /> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Dimensions</h3> <p class="text-sm text-subtle">Set the dimensions for the layer.</p> </div> <div class="flex flex-col gap"> <div class="flex items-center gap"> <label class="text-sm font-medium leading-none" style="inline-size: 50%;" for="width">Width</label> <input value="100%" class="input" autofocus="autofocus" type="text" name="width" id="width" /> </div> <div class="flex items-center gap"> <label class="text-sm font-medium leading-none" style="inline-size: 50%;" for="height">Height</label> <input value="25px" class="input" type="text" name="height" id="height" /> </div> </div> </form></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<button type="button" class="btn" popovertarget="popover"> Open popover</button><div popover id="popover" class="popover popover--block-end-start" role="dialog" style="--popover-size: 16rem"> <%= form_with url: nil, class: "flex flex-col gap p-3" do |form| %> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Dimensions</h3> <p class="text-sm text-subtle">Set the dimensions for the layer.</p> </div> <div class="flex flex-col gap"> <div class="flex items-center gap"> <%= form.label :width, class: "text-sm font-medium leading-none", style: "inline-size: 50%;" %> <%= form.text_field :width, value: "100%", class: "input", autofocus: true %> </div> <div class="flex items-center gap"> <%= form.label :height, class: "text-sm font-medium leading-none", style: "inline-size: 50%;" %> <%= form.text_field :height, value: "25px", class: "input" %> </div> </div> <% end %></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
73
74
.popover { background-color: var(--color-surface); border-radius: var(--rounded-lg); border-width: var(--border); box-shadow: var(--shadow-md); color: var(--color-text); inline-size: var(--popover-size, max-content); /* Anchor position */ position-area: var(--popover-position, block-end); position-try-fallbacks: var(--popover-position-try-fallbacks, flip-block); margin-block: var(--popover-margin-block, .25rem 0); /* Setup transition */ transition-behavior: allow-discrete; transition-duration: var(--time-100); transition-property: display, opacity, overlay, transform; transition-timing-function: var(--ease-out-3); /* Exit stage to */ opacity: 0; transform: var(--scale-95); /* On stage */ &:popover-open { opacity: 1; transform: var(--scale-100); } /* Enter stage from */ @starting-style { &:popover-open { opacity: 0; transform: var(--scale-95); } } @supports (-webkit-hyphens: none) { transition-behavior: normal; }}.popover--unanchored { --popover-position: none; --popover-position-try-fallbacks: none; --popover-margin-block: 0;}.popover--block-end-center { --popover-position: block-end; --popover-margin-block: .25rem 0;}.popover--block-end-start { --popover-position: block-end span-inline-end; --popover-margin-block: .25rem 0;}.popover--block-end-end { --popover-position: block-end span-inline-start; --popover-margin-block: .25rem 0;}.popover--block-start-center { --popover-position: block-start; --popover-margin-block: 0 .25rem;}.popover--block-start-start { --popover-position: block-start span-inline-end; --popover-margin-block: 0 .25rem;}.popover--block-start-end { --popover-position: block-start span-inline-start; --popover-margin-block: 0 .25rem;}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.