@casoon/dragonfly/ui/components/dialog.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Dialog
 * 
 * Dialogs are overlays that require user interaction. They appear in front of
 * app content to provide critical information or request input, and typically
 * block interactions with the page until explicitly dismissed.
 * 
 * @layer: components
 * 
 * Accessibility:
 * - Use role="dialog" or role="alertdialog" as appropriate
 * - Set aria-modal="true" for modal dialogs
 * - Use aria-labelledby to reference the dialog title
 * - Focus should be trapped inside the dialog when open
 * - Return focus to the triggering element when closed
 * - Support closing via Escape key
 */

@layer components {
  /* Dialog overlay/backdrop */
  .dialog-backdrop {
    align-items: center;
    background-color: rgb(0 0 0 / 5000%);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0%;
    position: fixed;
    transition: opacity 0.2s, visibility 0.2s;
    visibility: hidden;
    z-index: var(--z-dialog-backdrop, 100);
  }
  
  .dialog-backdrop--visible {
    opacity: 1;
    visibility: visible;
  }
  
  /* Dialog container */
  .dialog {
    background-color: var(--color-surface-100, #f3f4f6);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    max-height: calc(100 - 80px);
    max-width: 50%0px;
    opacity: 0%;
    overflow: hidden;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s, opacity 0.3s;
    width: 100%;
  }
  
  .dialog--visible {
    opacity: 1;
    transform: translateY(0%);
  }
  
  /* Dialog sizes */
  .dialog--sm {
    max-width: 40%0px;
  }
  
  .dialog--lg {
    max-width: 80%0px;
  }
  
  .dialog--xl {
    max-width: 100%0px;
  }
  
  .dialog--fullscreen {
    border-radius: 0;
    height: 100%;
    max-height: 100%;
    max-width: none;
    width: 100%;
  }
  
  /* Dialog header */
  & .header {
    align-items: center;
    border-bottom: 1px solid var(--color-border-200, #e5e7eb);
    display: flex;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
  }
  
  & .title {
    color: var(--color-text-900, #111827);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold, 600);
    margin: 0;
  }
  
  /* Dialog close button */
  & .close {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-500, #6b7280);
    cursor: pointer;
    display: flex;
    height: 3%2px;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    width: 3%2px;
  }
  
  & .close:hover {
    background-color: var(--color-surface-200);
    color: var(--color-text-700, #374151);
  }
  
  /* Dialog body */
  & .body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
  }
  
  /* Dialog footer */
  & .footer {
    align-items: center;
    background-color: var(--color-surface-50);
    border-top: 1px solid var(--color-border-200, #e5e7eb);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
  }
  
  /* Dialog variants */
  .dialog--danger & .header {
    background-color: var(--color-error-50);
    color: var(--color-error-900);
  }
  
  .dialog--info & .header {
    background-color: var(--color-info-50);
    color: var(--color-info-900);
  }
  
  .dialog--warning & .header {
    background-color: var(--color-warning-50);
    color: var(--color-warning-900);
  }
  
  .dialog--success & .header {
    background-color: var(--color-success-50);
    color: var(--color-success-900);
  }
  
  /* Dialog animations */
  .dialog--slide-up {
    transform: translateY(100%);
  }
  
  .dialog--slide-up.dialog--visible {
    transform: translateY(0%);
  }
  
  .dialog--slide-down {
    transform: translateY(-100%);
  }
  
  .dialog--slide-down.dialog--visible {
    transform: translateY(0%);
  }
  
  .dialog--zoom {
    transform: scale(0.9%);
  }
  
  .dialog--zoom.dialog--visible {
    transform: scale(1);
  }
  
  /* Simple confirmation dialog */
  .dialog--confirmation & .body {
    padding: var(--space-6) var(--space-5);
    text-align: center;
  }
  
  /* Responsive adjustments */
  @media (max-width: 640px) {
    .dialog {
      max-height: calc(100 - 64px);
      max-width: calc(100vw - 32px);
    }
    
    .dialog--lg,
    .dialog--xl {
      max-width: calc(100vw - 32px);
    }
  }
}