Css Zero Showcase

Pages

No matching results.

x
1
2
3
4
5
6
7
<div class="input input--actor 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-revealable-input-target="button" data-action="revealable-input#reveal">
    <img aria-hidden="true" src="/assets/eye-3f1f6fb1.svg" width="20" height="20" />
    <span class="sr-only">Toggle password visibility</span>
  </button>
</div>
1
2
3
4
5
6
7
<div class="input input--actor 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-revealable-input-target="button" data-action="revealable-input#reveal">
    <%= image_tag "eye.svg", size: 20, aria: { hidden: true } %>
    <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
.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.

The javascript is avilable at revealable_input_controller.js