Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
<div class="input input--actor input--copyable flex items-center gap" data-controller="copyable-input">
  <input type="text" name="copyable_input" id="copyable_input" value="Yqr14uEZJWTsWWUcd9rTobngsfTqCGTa" readonly="readonly" data-copyable-input-target="input" />
  <button type="button" class="btn btn--plain" data-action="copyable-input#copy">
    <span class="icon icon--copy" aria-hidden="true"></span>
    <span class="sr-only">Copy to clipboard</span>
  </button>
</div>
1
2
3
4
5
6
7
<div class="input input--actor input--copyable 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-action="copyable-input#copy">
    <span class="icon icon--copy" aria-hidden="true"></span>
    <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
20
21
22
.input--revealable > button > .icon {
  --svg: url("eye.svg");
}
.input--revealed > button > .icon {
  --svg: url("eye-off.svg");
}
.input--copied > button > .icon {
  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.

The javascript is avilable at copyable_input_controller.js