Pages

No matching results.

x
1
2
3
4
5
6
7
<div class="input input--actor input--revealable flex items-center gap" data-controller="revealable-input">
<input type="password" name="revealable_input" id="revealable_input" data-revealable-input-target="input" />
<button type="button" class="btn btn--plain" data-action="revealable-input#reveal">
<span class="icon" aria-hidden="true"></span>
<span class="sr-only">Toggle password visibility</span>
</button>
</div>
1
2
3
4
5
6
7
<div class="input input--actor input--revealable flex items-center gap" data-controller="revealable-input">
<%= password_field_tag "revealable_input", nil, data: { revealable_input_target: "input" } %>
<button type="button" class="btn btn--plain" data-action="revealable-input#reveal">
<span class="icon" aria-hidden="true"></span>
<span class="sr-only">Toggle password visibility</span>
</button>
</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
.input--revealable > button > .icon {
background-image: url("eye.svg");
background-size: cover;
block-size: var(--icon-size, var(--size-5));
filter: var(--color-filter-text);
inline-size: var(--icon-size, var(--size-5));
}
.input--revealed > button > .icon {
background-image: url("eye-off.svg");
}
.input--copied > button > img {
animation: var(--animate-fade-out), var(--animate-slide-out-up);
animation-duration: var(--time-500);
}
.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.