Pages

No matching results.

x
1
2
3
4
5
6
7
<div class="input input--actor flex items-center gap" data-controller="copyable-input">
<input type="text" name="copyable_input" id="copyable_input" value="LdvT9oXpx3GCXszCkuBmu25Ub4eN6nss" readonly="readonly" data-copyable-input-target="input" />
<button type="button" class="btn btn--plain" data-copyable-input-target="button" data-action="copyable-input#copy">
<img aria-hidden="true" src="/assets/copy-6b663b6e.svg" width="20" height="20" />
<span class="sr-only">Copy to clipboard</span>
</button>
</div>
1
2
3
4
5
6
7
<div class="input input--actor flex items-center gap" data-controller="copyable-input">
<%= text_field_tag "copyable_input", SecureRandom.base58(32), readonly: "readonly", data: { copyable_input_target: "input" } %>
<button type="button" class="btn btn--plain" data-copyable-input-target="button" data-action="copyable-input#copy">
<%= image_tag "copy.svg", size: 20, aria: { hidden: true } %>
<span class="sr-only">Copy to clipboard</span>
</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.btn--copied img {
animation: var(--animate-fade-out), var(--animate-slide-out-up);
animation-duration: var(--time-500);
}
.btn--revealed img {
background-image: url("off.svg");
background-size: cover;
}
.input--clearable {
input::-webkit-search-cancel-button {
display: none;
}
&:has(:placeholder-shown) > button {
display: none;
}
}
Java Script is not required or multiple files are needed, check the notes.