Modals

Modal

The .quanta-modal component displays a centered dialog over a backdrop. Toggle visibility by adding/removing .active on both .quanta-modal-backdrop and .quanta-modal.

<div class="quanta-modal-backdrop active"></div>
<div class="quanta-modal active">
  <div class="quanta-modal-header">
    <h2>Title</h2>
    <button class="quanta-modal-close">×</button>
  </div>
  <div class="quanta-modal-body">
    Modal content goes here.
  </div>
  <div class="quanta-modal-footer footer-end">
    <button>Close</button>
    <button>Save</button>
  </div>
</div>

Structure

A modal consists of:

• .quanta-modal-backdrop – full‑screen translucent overlay
• .quanta-modal – the dialog container
• .quanta-modal-header – title and close button
• .quanta-modal-body – content area
• .quanta-modal-footer – action buttons (.footer-start, .footer-center, or .footer-end)

Responsive Sizes

Modal width and typography scale at breakpoints:

• ≥600 px: width 85%, larger padding, medium font
• ≥768 px: width 70%, max-width 36 rem
• ≥1024 px: width 60%, max-width 40 rem
• ≥1280 px: width 45%, max-width 44 rem
• ≥1600 px: width 35%, max-width 48 rem

Footer Alignment

Use modifier classes on .quanta-modal-footer:

• .footer-start – align to left
• .footer-center – center actions
• .footer-end – align to right

Dark Mode

In dark theme, modal background and text adapt automatically, and the close button hover color shifts to a light primary variant.