nitropage/src/components/dialog.module.css

A free and open source, extensible visual page builder based on SolidStart.

.buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.75rem;
  gap: 0.5rem;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background-color: #0003;
}

.overlay:global {
  animation: npFadeOut 125ms var(--np-ease-in-out-cubic) 75ms forwards;
}

.overlay[data-expanded]:global {
  animation: npFadeIn 125ms var(--np-ease-in-out-cubic);
}

.positioner {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  outline: none;
  z-index: 2100;
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #fff;
  box-shadow:
    0 10px 15px -3px #0000001a,
    0 4px 6px -4px #0000001a;
  max-width: min(calc(100vw - 1rem), var(--dialog-max-width, 32rem));
}

.content:global {
  animation: npMoveOut 150ms var(--np-ease-in-out-expo) forwards;
}
.content[data-expanded]:global {
  animation: npMoveIn 150ms var(--np-ease-in-out-expo);
}

.header {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.header__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--np-slate-700);
}

.confirmDialog__description strong {
  font-weight: 600;
  white-space: nowrap;
}