mautourco-components 0.1.1 → 0.2.0

package/src/styles/components/organism/dialog.css

@@ -0,0 +1,241 @@
+/* ===== Dialog Component ===== */
+
+/* Dialog overlay - Semi-transparent backdrop */
+.dialog-overlay {
+  @apply fixed inset-0 z-[1000] bg-black/50;
+}
+
+.dialog-overlay--hidden {
+  @apply hidden;
+}
+
+/* Dialog container - Centers the dialog */
+.dialog {
+  @apply fixed inset-0 z-[1001] flex items-center justify-center p-4 pointer-events-none;
+}
+
+.dialog--hidden {
+  @apply hidden;
+}
+
+/* Dialog content - The actual dialog box */
+.dialog__content {
+  @apply relative flex flex-col bg-white overflow-hidden rounded-2xl max-h-[90vh] pointer-events-auto;
+  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* Size variants - Desktop */
+.dialog__content--desktop {
+  @apply w-[78.4375rem] max-w-full;
+}
+
+/* Size variants - Tablet */
+.dialog__content--tablet {
+  @apply w-[49.875rem] max-w-full;
+}
+
+/* Size variants - Mobile */
+.dialog__content--mobile {
+  @apply w-[27.4375rem] max-w-full;
+}
+
+/* Size variants - Full width */
+.dialog__content--full {
+  @apply w-full max-w-[78.4375rem];
+}
+
+/* ===== Dialog Header ===== */
+.dialog__header {
+  @apply flex items-center justify-between flex-shrink-0 py-4 px-6;
+}
+
+.dialog__header--mobile {
+  @apply py-3 px-4;
+}
+
+.dialog__title {
+  @apply font-bold text-[var(--color-text-default)] text-2xl leading-8;
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+}
+
+.dialog__title--tablet {
+  @apply text-lg leading-6;
+}
+
+.dialog__title--mobile {
+  @apply text-base leading-5;
+}
+
+.dialog__close-button {
+  @apply flex items-center justify-center flex-shrink-0 transition-colors cursor-pointer w-[3.25rem] h-[3.25rem] rounded-lg border border-[var(--color-neutral-100)] bg-[var(--color-neutral-100)] text-[var(--color-black)];
+}
+
+.dialog__close-button:hover {
+  @apply border-[var(--color-neutral-200)];
+}
+
+.dialog__close-button:focus {
+  @apply border-[var(--color-neutral-200)];
+}
+
+/* ===== Dialog Body ===== */
+.dialog__body {
+  @apply flex-1 overflow-y-auto px-6 pb-4 pt-0;
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+}
+
+.dialog__body--mobile {
+  @apply px-4 pb-3 pt-0;
+}
+
+.dialog__body-content {
+  @apply flex flex-col gap-4;
+}
+
+/* Form content styles within dialog */
+.dialog__form-field {
+  @apply flex flex-col gap-2;
+}
+
+.dialog__form-label {
+  @apply text-sm font-medium text-[var(--color-text-default)];
+}
+
+.dialog__form-input {
+  @apply w-full px-4 py-3 text-sm rounded-lg border border-[var(--color-border-input-default)] bg-[#f8f7f4] text-[var(--color-text-default)];
+}
+
+.dialog__form-input::placeholder {
+  @apply text-[var(--color-text-light)];
+}
+
+.dialog__form-input:focus {
+  @apply outline-none border-[var(--color-border-input-focused)];
+}
+
+/* ===== Dialog Footer ===== */
+.dialog__footer {
+  @apply flex items-center justify-end flex-shrink-0 py-4 px-6 gap-4;
+}
+
+.dialog__footer--mobile {
+  @apply flex-col py-3 px-4;
+}
+
+.dialog__footer-buttons {
+  @apply flex items-center gap-4;
+}
+
+.dialog__footer-buttons--mobile {
+  @apply w-full;
+}
+
+.dialog__footer-buttons--mobile .button {
+  @apply flex-1;
+}
+
+/* ===== Animation States ===== */
+.dialog-overlay--entering,
+.dialog--entering {
+  animation: fadeIn 200ms ease-out forwards;
+}
+
+.dialog-overlay--exiting,
+.dialog--exiting {
+  animation: fadeOut 150ms ease-in forwards;
+}
+
+.dialog__content--entering {
+  animation: slideUp 200ms ease-out forwards;
+}
+
+.dialog__content--exiting {
+  animation: slideDown 150ms ease-in forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    @apply opacity-0;
+  }
+  to {
+    @apply opacity-100;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    @apply opacity-100;
+  }
+  to {
+    @apply opacity-0;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    @apply opacity-0;
+    transform: translateY(1.25rem) scale(0.95);
+  }
+  to {
+    @apply opacity-100;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    @apply opacity-100;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    @apply opacity-0;
+    transform: translateY(1.25rem) scale(0.95);
+  }
+}
+
+/* ===== Responsive Adjustments ===== */
+@media (max-width: 768px) {
+  .dialog__content--responsive {
+    @apply w-full max-w-[27.4375rem];
+  }
+
+  .dialog__header--responsive {
+    @apply py-3 px-4;
+  }
+
+  .dialog__title--responsive {
+    @apply leading-5;
+  }
+
+  .dialog__body--responsive {
+    @apply px-4 pb-3 pt-0;
+  }
+
+  .dialog__footer--responsive {
+    @apply flex-col py-3 px-4;
+  }
+
+  .dialog__footer-buttons--responsive {
+    @apply w-full;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .dialog__content--responsive {
+    @apply w-[49.875rem] max-w-full;
+  }
+
+  .dialog__title--responsive {
+    @apply text-lg leading-6;
+  }
+}
+
+@media (min-width: 1025px) {
+  .dialog__content--responsive {
+    @apply w-[78.4375rem] max-w-full;
+  }
+
+  .dialog__title--responsive {
+    @apply text-2xl leading-8;
+  }
+}