Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
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
<form class="card flex flex-col gap" data-controller="form" data-action="input-otp:complete->form#submit" action="/slow_action" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="jxso0bjzqY946mYvwTaYtgMVoVOa5VhTOihAEkuhaIwZsJ13hHzyobystmKkaH-w-d2sSZnV5d4hK1WEj73syQ" autocomplete="off" />
  <div class="flex flex-col">
    <h3 class="font-medium leading-none mbe-1">Verify your login</h3>
    <p class="text-sm text-subtle">Enter the verification code we sent to your email address: <span class="font-medium">m@example.com</span>.</p>
  </div>
  <div class="flex flex-col gap-half">
    <div class="flex items-center justify-between">
      <label class="text-sm font-medium leading-none" for="otp_verification">Verification code</label>
      <button type="button" class="btn btn--xs">
        <span class="icon icon--refresh-cw" aria-hidden="true"></span>
        Resend Code
      </button>
    </div>
    <input-otp appearance="seamless" required class="input-otp--lg i-fit">
      <input-otp-group>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
      </input-otp-group>
      <input-otp-separator role="separator">
        <span class="icon icon--minus" aria-hidden="true"></span>
      </input-otp-separator>
      <input-otp-group>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
      </input-otp-group>
      <input type="text" name="otp_verification" id="otp_verification" />
    </input-otp>
    <p class="text-sm text-subtle"><a class="text-primary" style="text-decoration: underline" href="#">I no longer have access to this email address.</a></p>
  </div>
  <div class="card__footer flex flex-col gap-half">
    <input type="submit" name="commit" value="Verify" class="btn btn--primary i-full" data-disable-with="Verify" />
    <p class="text-sm text-subtle">Having trouble signing in? <a class="text-primary" style="text-decoration: underline" href="#">Contact support</a></p>
  </div>
</form>
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
<%= form_with url: main_app.slow_action_path, class: "card flex flex-col gap", data: { controller: "form", action: "input-otp:complete->form#submit" } do |form| %>
  <div class="flex flex-col">
    <h3 class="font-medium leading-none mbe-1">Verify your login</h3>
    <p class="text-sm text-subtle">Enter the verification code we sent to your email address: <span class="font-medium">m@example.com</span>.</p>
  </div>
  <div class="flex flex-col gap-half">
    <div class="flex items-center justify-between">
      <%= label_tag :otp_verification, "Verification code", class: "text-sm font-medium leading-none" %>
      <button type="button" class="btn btn--xs">
        <span class="icon icon--refresh-cw" aria-hidden="true"></span>
        Resend Code
      </button>
    </div>
    <input-otp appearance="seamless" required class="input-otp--lg i-fit">
      <input-otp-group>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
      </input-otp-group>
      <input-otp-separator role="separator">
        <span class="icon icon--minus" aria-hidden="true"></span>
      </input-otp-separator>
      <input-otp-group>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
        <input-otp-slot></input-otp-slot>
      </input-otp-group>
      <%= text_field_tag :otp_verification %>
    </input-otp>
    <p class="text-sm text-subtle"><%= link_to "I no longer have access to this email address.", "#", class: "text-primary", style: "text-decoration: underline" %></p>
  </div>
  <div class="card__footer flex flex-col gap-half">
    <%= form.submit "Verify", class: "btn btn--primary i-full" %>
    <p class="text-sm text-subtle">Having trouble signing in? <%= link_to "Contact support", "#", class: "text-primary", style: "text-decoration: underline" %></p>
  </div>
<% end %>
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
@import url("https://esm.sh/input-otp-zero@0.0.3/dist/input-otp-zero.css");
input-otp {
  --input-otp-gap: var(--size-2);
  --input-otp-group-gap: var(--size-3);
  --input-otp-slot-width: var(--size-8);
  --input-otp-slot-height: var(--size-8);
  --input-otp-slot-radius: var(--rounded-lg);
  --input-otp-slot-background: var(--color-surface);
  --input-otp-slot-background-active: var(--color-surface);
  --input-otp-border-color: var(--color-border);
  --input-otp-border-color-active: var(--color-border-dark);
  --input-otp-ring-color: var(--color-selected-dark);
  --input-otp-color: var(--color-text);
  --input-otp-placeholder-color: var(--color-text-subtle);
  --input-otp-font-family: var(--font-monospace-code);
  --input-otp-font-size: var(--text-sm);
  --input-otp-font-weight: var(--font-medium);
  --input-otp-caret-color: var(--color-text);
  --input-otp-caret-height: var(--size-4);
  --input-otp-caret-blink-duration: var(--time-1000);
  --input-otp-separator-color: var(--color-text-subtle);
  --input-otp-separator-width: var(--size-6);
  --input-otp-transition-duration: var(--time-150);
  --input-otp-transition-easing: var(--ease-out-3);
  --input-otp-disabled-opacity: var(--opacity-50);
}
.input-otp--lg {
  --input-otp-slot-width: var(--size-11);
  --input-otp-slot-height: var(--size-12);
  --input-otp-font-size: var(--text-xl);
  --input-otp-caret-height: var(--size-6);
}
1
2
3
4
5
6
7
8
import { Controller } from "@hotwired/stimulus"
import { defineElements } from "https://esm.sh/input-otp-zero@0.0.3?standalone"
export default class extends Controller {
  connect() {
    defineElements()
  }
}

No notes provided.