Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Push approval

Check your phone: a pulsing device with the incoming request and number matching (the two digits to tap on the phone). State classes for approved, denied and expired change the color, stop the pulse and show a badge.

Two factor and sign in10 classesNo JavaScriptLight and dark

Example

Full

Classes

10 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the push approval. On a <div> in the example. Sets grid display, alignment, gap and text style, and --tone.
CSS
.auth-push {
  --tone: var(--primary);
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}
Part Part of the push approval. On a <div> in the example. Sets grid display, alignment, width and height.
CSS
.auth-push-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 9rem;
  height: 9rem;
}

.auth-push-denied .auth-push-visual::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
Part Part of the push approval. On a <span> in the example. Sets absolute position, offsets, border, corner radius, opacity and animation.
CSS
.auth-push-ring + .auth-push-ring {
  animation-delay: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  .auth-push-ring {
    opacity: .5;
    scale: .9;
  }
}
Part Part of the push approval. On a <div> in the example. Sets width, height, padding, background, border and corner radius.
CSS
.auth-push-device::before {
  content: "";
  position: absolute;
  top: .3125rem;
  left: 50%;
  width: 1.125rem;
  height: .25rem;
  background-color: color-mix(in oklab, var(--foreground) 70%, var(--surface));
  border-radius: var(--m-radius-full);
  translate: -50% 0;
}

.auth-push-device {
  position: relative;
  width: 4.25rem;
  height: 7.5rem;
  padding: .875rem .3125rem .5rem;
  background-color: var(--surface);
  border: 2px solid color-mix(in oklab, var(--foreground) 75%, var(--surface));
  border-radius: var(--m-radius-2xl);
  box-shadow: var(--m-shadow-md);
}
Part Part of the push approval. On a <div> in the example. Sets grid display, gap, padding, background, border and corner radius.
CSS
.auth-push-notice::before, .auth-push-notice::after {
  content: "";
  height: .25rem;
  background-color: color-mix(in oklab, var(--foreground) 22%, transparent);
  border-radius: var(--m-radius-full);
}

.auth-push-notice::after {
  width: 70%;
  height: .5rem;
  margin-top: .125rem;
  background: linear-gradient(90deg, var(--tone) 0 46%, transparent 0 54%, color-mix(in oklab, var(--foreground) 18%, transparent) 0);
}
Part Part of the push approval. On a <p> in the example. Sets flex display, alignment, gap, margin, text size and font weight.
CSS
.auth-push-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.auth-push-number > strong {
  display: block;
  min-width: 5.5rem;
  padding: .375rem 1rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  background-color: var(--surface-2);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
}
Part Part of the push approval. On a <p> in the example. Sets inline-flex display, alignment, gap, margin, text size and font weight.
CSS
.auth-push-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.auth-push-status::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background-color: var(--tone);
  border-radius: var(--m-radius-full);
  animation: m-auth-blink 1.4s ease-in-out infinite;
}
Modifier Modifier, combined with the auth-push class. On a <div> in the example. Sets hidden by default, animation, text color, generated content, absolute position and offsets, and --tone and --tone-fg.
CSS
.auth-push-approved {
  --tone: var(--success);
}

.auth-push-approved {
  --tone-fg: var(--success-foreground);
}
Modifier Modifier, combined with the auth-push class. On a <div> in the example. Sets hidden by default, animation, text color, generated content, absolute position and offsets, and --tone and --tone-fg.
CSS
.auth-push-denied {
  --tone: var(--danger);
}

.auth-push-denied {
  --tone-fg: var(--danger-foreground);
}
Modifier Modifier, combined with the auth-push class. Not used in the example above. Sets hidden by default, animation and opacity, and --tone.
CSS
.auth-push-expired .auth-push-device {
  opacity: .55;
}

.auth-push-expired {
  --tone: var(--muted-foreground);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Push approval: start from the base class, then add modifiers -->
<div class="grid gap-4 sm:grid-cols-2 items-start">
  <div class="auth-card">
    <div class="auth-push">
      <div class="auth-push-visual" aria-hidden="true">
        <span class="auth-push-ring"></span><span class="auth-push-ring"></span>
        <div class="auth-push-device"><div class="auth-push-notice"></div></div>
      </div>
      <header class="auth-header">
        <h2 class="auth-title">Check your phone</h2>
        <p class="auth-description">We sent a sign in request to your Pixel 8. Tap the number below to approve it.</p>
      </header>
      <p class="auth-push-number">Number to tap <strong>47</strong></p>
      <p class="auth-push-status" role="status">Waiting for approval</p>
    </div>
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Announces itself with role="status" (polite) or role="alert" (assertive). Use alert only for messages that need immediate attention.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Two factor and sign inMethod pickerSecond factor choices as selectable cards on native radio inputs: icon, title, a short explanation, a Recommended badge and when it was last used. Arrow keys move between methods; unavailable methods can be disabled.Two factor and sign inVerify screenThe second step after the password: masked destination, code cells that submit when complete, a resend link with a countdown, another method link and a "Don't ask again on this device for 30 days" checkbox. Needs monsoon.js for the cells and the countdown.Two factor and sign inSecurity key and passkeyPrompt for a passkey or a hardware security key: an animated key mark, the steps, platform hints (Touch ID, Windows Hello, Android, USB or NFC keys) and error, retry and success states through classes. The page calls WebAuthn and switches the classes.Two factor and sign inPhone numberPhone number with a country picker: a searchable list with flags and dial codes, formatting as you type for the selected country, typing or pasting +44 or 0044 switches the country, and a hidden field with the E.164 number. Without the script the native select and tel input still work. Needs monsoon.js.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.