@buun_group/brutalist-ui/src/react/dialog/Dialog.module.css

A brutalist-styled component library

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--brutal-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--brutal-space-4);
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Ensure dialog appears above dropdowns */
.backdrop {
  z-index: 1000;
}

.backdrop.visible {
  background-color: rgba(0, 0, 0, 0.5);
}

.backdrop.exiting {
  background-color: transparent;
}

/* Dialog container */
.dialog {
  position: relative;
  background-color: var(--brutal-white);
  border: 4px solid var(--brutal-black);
  box-shadow: 8px 8px 0px var(--brutal-black);
  max-height: calc(100vh - var(--brutal-space-8));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dialog:focus {
  outline: none;
}

/* Animation */
.dialog.animate {
  animation: dialogEnter 0.3s ease-out;
}

.dialog.animate.exiting {
  animation: dialogExit 0.3s ease-in;
}

@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes dialogExit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
}

/* Sizes */
.dialog.sm {
  width: 100%;
  max-width: 400px;
}

.dialog.md {
  width: 100%;
  max-width: 600px;
}

.dialog.lg {
  width: 100%;
  max-width: 800px;
}

.dialog.xl {
  width: 100%;
  max-width: 1200px;
}

.dialog.full {
  width: calc(100vw - var(--brutal-space-8));
  height: calc(100vh - var(--brutal-space-8) - 88px); /* Subtract header height */
  max-width: none;
  max-height: calc(100vh - var(--brutal-space-8) - 88px);
  margin-top: 88px; /* Push down by header height */
}

/* Position variants */
.backdrop:has(.dialog.top) {
  align-items: flex-start;
  padding-top: var(--brutal-space-16);
}

.backdrop:has(.dialog.bottom) {
  align-items: flex-end;
  padding-bottom: var(--brutal-space-16);
}

/* Dialog sections */
.header {
  padding: var(--brutal-space-6);
  border-bottom: 3px solid var(--brutal-black);
  background-color: var(--brutal-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.title {
  font-family: var(--brutal-font-mono);
  font-size: var(--brutal-text-xl);
  font-weight: var(--brutal-font-black);
  text-transform: uppercase;
  margin: 0;
}

.body {
  padding: var(--brutal-space-6);
  overflow-y: auto;
  flex: 1;
  font-family: var(--brutal-font-sans);
  font-size: var(--brutal-text-base);
  line-height: 1.6;
}

.footer {
  padding: var(--brutal-space-6);
  border-top: 3px solid var(--brutal-black);
  background-color: var(--brutal-gray-100);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--brutal-space-3);
  flex-shrink: 0;
}

/* Close button */
.close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brutal-white);
  border: 3px solid var(--brutal-black);
  font-family: var(--brutal-font-mono);
  font-weight: var(--brutal-font-black);
  font-size: var(--brutal-text-sm);
  cursor: pointer;
  transition: var(--brutal-transition-fast);
}

.close:hover {
  background-color: var(--brutal-black);
  color: var(--brutal-white);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0px var(--brutal-black);
}

.close:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .backdrop {
    padding: var(--brutal-space-2);
  }

  .dialog {
    border-width: 3px;
    box-shadow: 4px 4px 0px var(--brutal-black);
  }

  .dialog.full {
    width: 100vw;
    height: calc(100vh - 88px); /* Subtract header height */
    margin-top: 88px; /* Push down by header height */
    border: none;
    box-shadow: none;
  }

  .header,
  .body,
  .footer {
    padding: var(--brutal-space-4);
  }

  .title {
    font-size: var(--brutal-text-lg);
  }
}