@hummingbirdui/hummingbird/src/components/modal.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility modal {
  @layer base {
    --modal-zindex: 1055;
    --modal-width: 31.25rem;
    --modal-padding: --spacing(4);
    --modal-margin: --spacing(2);
    --modal-color: var(--text-color-default);
    --modal-bg: var(--background-color-default);
    --modal-font-size: var(--text-base);
    --modal-border-color: var(--border-color-light);
    --modal-border-width: 1px;
    --modal-border-radius: var(--radius-2xl);
    --modal-inner-border-radius: calc(var(--modal-border-radius) - var(--modal-border-width));
    --modal-header-padding-x: --spacing(4);
    --modal-header-padding-y: --spacing(4);
    --modal-header-border-color: var(--border-color-light);
    --modal-header-border-width: 1px;
    --modal-title-line-height: 1.5;
    --modal-footer-padding-x: --spacing(4);
    --modal-footer-padding-y: --spacing(4);
    --modal-footer-bg: unset;
    --modal-footer-border-color: var(--border-color-light);
    --modal-footer-border-width: 1px;
    --modal-fade-transform: translate(0, -50px);
    --modal-show-transform: none;
    --modal-scale-transform: scale(1.02);
    --modal-transition-duration: 0.3s;

    @apply fixed top-0 left-0
    z-[var(--modal-zindex)]
    hidden
    w-full h-full
    overflow-x-hidden
    overflow-y-auto
    outline-0
    text-[length:var(--modal-font-size)];

    @variant sm {
      --modal-margin: --spacing(7);
    }
  }
}

@utility modal-dialog {
  @layer base {
    @apply relative
    w-auto
    m-[var(--modal-margin)]
    pointer-events-none;

    .modal.fade & {
      @apply transform-[var(--modal-fade-transform)] transition-transform duration-[var(--modal-transition-duration)] ease-out;
    }
    .modal.show & {
      @apply transform-[var(--modal-show-transform)];
    }
    .modal.modal-static & {
      @apply transform-[var(--modal-scale-transform)];
    }

    @variant sm {
      @apply max-w-[var(--modal-width)] mx-auto;
    }
  }
}

@utility modal-dialog-scrollable {
  @layer base {
    @apply h-[calc(100%-var(--modal-margin)*2)];
    .modal-content {
      @apply max-h-full overflow-hidden;
    }

    .modal-body {
      @apply overflow-y-auto;
    }
  }
}

@utility modal-dialog-centered {
  @layer base {
    @apply flex items-center
    min-h-[calc(100%-var(--modal-margin)*2)];
  }
}

@utility modal-content {
  @layer base {
    @apply relative
    flex flex-col
    w-full
    text-[var(--modal-color)]
    pointer-events-auto
    bg-[var(--modal-bg)]
    bg-clip-padding
    dark:border-[length:var(--modal-border-width)]
    border-[var(--modal-border-color)]
    rounded-[var(--modal-border-radius)]
    outline-0;
  }
}

.modal-backdrop {
  --backdrop-zindex: 1050;
  --backdrop-bg: --alpha(var(--color-gray-950) / 20%);

  @apply fixed top-0 left-0 z-[var(--backdrop-zindex)] w-screen h-screen bg-[var(--backdrop-bg)];
}

@utility modal-header {
  @layer base {
    @apply flex flex-shrink-0 items-center
    px-[var(--modal-header-padding-x)]
    py-[var(--modal-header-padding-y)]
    border-b-[length:var(--modal-header-border-width)]
    border-[var(--modal-header-border-color)]
    rounded-t-[var(--modal-inner-border-radius)];
  }
}

@utility modal-title {
  @layer base {
    @apply mb-0 leading-[var(--modal-title-line-height)];
  }
}

@utility modal-body {
  @layer base {
    @apply relative flex-[1_1_auto] p-[var(--modal-padding)];
  }
}

@utility modal-footer {
  @layer base {
    @apply flex flex-shrink-0 flex-wrap items-center justify-end
    px-[var(--modal-footer-padding-x)]
    py-[var(--modal-footer-padding-y)]
    bg-[var(--modal-footer-bg)]
    border-t-[length:var(--modal-footer-border-width)]
    border-[var(--modal-footer-border-color)]
    rounded-b-[var(--modal-inner-border-radius)];
  }
}

@utility modal-sm {
  @layer base {
    @variant sm {
      --modal-width: 18.75rem;
    }
  }
}
@utility modal-lg {
  @layer base {
    @variant lg {
      --modal-width: 50rem;
    }
  }
}
@utility modal-xl {
  @layer base {
    @variant lg {
      --modal-width: 50rem;
    }
    @variant xl {
      --modal-width: 71.25rem;
    }
  }
}

@utility modal-fullscreen {
  @layer base {
    @apply w-screen max-w-none h-screen m-0;

    .modal-content {
      @apply h-full border-0 rounded-none;
    }

    .modal-header,
    .modal-footer {
      @apply rounded-none;
    }

    .modal-body {
      @apply overflow-y-auto;
    }
  }
}

@utility modal-fullscreen-sm-down {
  @variant max-sm {
    @apply modal-fullscreen;
  }
}
@utility modal-fullscreen-md-down {
  @variant max-md {
    @apply modal-fullscreen;
  }
}
@utility modal-fullscreen-lg-down {
  @variant max-lg {
    @apply modal-fullscreen;
  }
}
@utility modal-fullscreen-xl-down {
  @variant max-xl {
    @apply modal-fullscreen;
  }
}
@utility modal-fullscreen-2xl-down {
  @variant max-2xl {
    @apply modal-fullscreen;
  }
}