@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.7

package/src/styles/components/overlay/modal.css

@@ -0,0 +1,482 @@
+/* Modal Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* MODAL BASE */
+/* ============================================================================ */
+
+.modal {
+  --modal-border-radius: var(--cs-border-radius-xl);
+  --modal-shadow: var(--cs-shadows-lg);
+  --modal-max-width: calc(var(--cs-spacing-scale-6xl) * 2.667);
+  --modal-min-height: auto;
+  --modal-transition: var(--cs-transitions-properties-all);
+  --modal-background: var(--cs-colors-surface-background);
+  --modal-border: var(--cs-border-width-normal) solid var(--cs-colors-border);
+}
+
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--cs-z-index-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cs-spacing-scale-4);
+}
+
+.modal__container {
+  position: relative;
+  width: 100%;
+  max-width: var(--modal-max-width);
+  min-height: var(--modal-min-height);
+  background-color: var(--modal-background);
+  border: var(--modal-border);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transform: scale(1);
+  transition: var(--modal-transition);
+}
+
+/* ============================================================================ */
+/* MODAL SIZES */
+/* ============================================================================ */
+
+.modal__container--size-sm {
+  --modal-max-width: calc(var(--cs-spacing-scale-6xl) * 2);
+}
+
+.modal__container--size-md {
+  --modal-max-width: calc(var(--cs-spacing-scale-6xl) * 2.667);
+}
+
+.modal__container--size-lg {
+  --modal-max-width: calc(var(--cs-spacing-scale-6xl) * 4);
+}
+
+.modal__container--size-xl {
+  --modal-max-width: calc(var(--cs-spacing-scale-6xl) * 5.333);
+}
+
+.modal__container--size-full {
+  --modal-max-width: calc(100vw - var(--cs-spacing-scale-8));
+  --modal-min-height: calc(100vh - var(--cs-spacing-scale-8));
+}
+
+/* ============================================================================ */
+/* MODAL VARIANTS */
+/* ============================================================================ */
+
+.modal__container--variant-default {
+  /* Uses base modal styles - no overrides needed */
+}
+
+.modal__container--variant-borderless {
+  border: none;
+}
+
+.modal__container--variant-elevated {
+  --modal-shadow: var(--cs-shadows-2xl);
+}
+
+.modal__container--variant-centered {
+  margin: auto;
+}
+
+/* ============================================================================ */
+/* MODAL HEADER */
+/* ============================================================================ */
+
+.modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--cs-spacing-scale-6);
+  border-bottom: var(--cs-borders-subtle);
+  background-color: var(--cs-colors-background-secondary);
+  flex-shrink: 0;
+}
+
+.modal__header--borderless {
+  border-bottom: none;
+}
+
+.modal__header--no-padding {
+  padding: 0;
+}
+
+.modal__title {
+  font-size: var(--cs-typography-font-size-lg);
+  font-weight: var(--cs-typography-font-weight-semibold);
+  line-height: var(--cs-typography-line-height-tight);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+  flex: 1;
+}
+
+.modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cs-spacing-scale-8);
+  height: var(--cs-spacing-scale-8);
+  border: none;
+  background: none;
+  color: var(--cs-colors-text-secondary);
+  cursor: pointer;
+  border-radius: var(--cs-border-radius-scale-2);
+  transition: var(--modal-transition);
+  flex-shrink: 0;
+  margin-left: var(--cs-spacing-scale-3);
+}
+
+.modal__close:hover {
+  background-color: var(--cs-colors-background-hover);
+  color: var(--cs-colors-text-primary);
+}
+
+.modal__close:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-primary-500);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+.modal__close:active {
+  background-color: var(--cs-colors-background-active);
+}
+
+/* ============================================================================ */
+/* MODAL BODY */
+/* ============================================================================ */
+
+.modal__body {
+  flex: 1;
+  padding: var(--cs-spacing-scale-6);
+  overflow-y: auto;
+  color: var(--cs-colors-text-primary);
+  line-height: var(--cs-typography-line-height-relaxed);
+}
+
+.modal__body--no-padding {
+  padding: 0;
+}
+
+.modal__body--compact {
+  padding: var(--cs-spacing-scale-4);
+}
+
+.modal__body--spacious {
+  padding: var(--cs-spacing-scale-8);
+}
+
+.modal__body--scrollable {
+  max-height: var(--cs-viewport-height-3-5);
+  overflow-y: auto;
+}
+
+/* ============================================================================ */
+/* MODAL FOOTER */
+/* ============================================================================ */
+
+.modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--cs-spacing-scale-3);
+  padding: var(--cs-spacing-scale-6);
+  border-top: var(--cs-borders-subtle);
+  background-color: var(--cs-colors-background-secondary);
+  flex-shrink: 0;
+}
+
+.modal__footer--borderless {
+  border-top: none;
+}
+
+.modal__footer--no-padding {
+  padding: 0;
+}
+
+.modal__footer--center {
+  justify-content: center;
+}
+
+.modal__footer--space-between {
+  justify-content: space-between;
+}
+
+.modal__footer--start {
+  justify-content: flex-start;
+}
+
+/* ============================================================================ */
+/* MODAL ANIMATIONS */
+/* ============================================================================ */
+
+.modal__container--enter {
+  animation: modal-slide-in var(--cs-transitions-durations-normal) ease-out;
+}
+
+.modal__container--exit {
+  animation: modal-slide-out var(--cs-transitions-durations-normal) ease-in;
+}
+
+.modal__container--fade-enter {
+  animation: modal-fade-in var(--cs-transitions-durations-normal) ease-out;
+}
+
+.modal__container--fade-exit {
+  animation: modal-fade-out var(--cs-transitions-durations-normal) ease-in;
+}
+
+.modal__container--scale-enter {
+  animation: modal-scale-in var(--cs-transitions-durations-normal) ease-out;
+}
+
+.modal__container--scale-exit {
+  animation: modal-scale-out var(--cs-transitions-durations-normal) ease-in;
+}
+
+@keyframes modal-slide-in {
+  from {
+    transform: translateY(calc(-1 * var(--cs-spacing-scale-5)));
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes modal-slide-out {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(calc(-1 * var(--cs-spacing-scale-5)));
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes modal-scale-in {
+  from {
+    transform: scale(var(--cs-scale-95));
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes modal-scale-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(var(--cs-scale-95));
+    opacity: 0;
+  }
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 640px) {
+  .modal__overlay {
+    padding: var(--cs-spacing-scale-2);
+    align-items: flex-end;
+  }
+
+  .modal__container {
+    max-width: 100%;
+    max-height: var(--cs-viewport-height-9-10);
+    margin: 0;
+    border-radius: var(--cs-border-radius-scale-3) var(--cs-border-radius-scale-3) 0 0;
+  }
+
+  .modal__container--size-full {
+    --modal-max-width: 100%;
+    --modal-min-height: var(--cs-viewport-height-9-10);
+    border-radius: 0;
+  }
+
+  .modal__header,
+  .modal__body,
+  .modal__footer {
+    padding: var(--cs-spacing-scale-4);
+  }
+
+  .modal__body--scrollable {
+    max-height: var(--cs-viewport-height-1-2);
+  }
+}
+
+@media (max-width: 480px) {
+  .modal__overlay {
+    padding: 0;
+  }
+
+  .modal__container {
+    min-height: var(--cs-viewport-height-full);
+    border-radius: 0;
+  }
+
+  .modal__header {
+    padding: var(--cs-spacing-scale-4) var(--cs-spacing-scale-4) var(--cs-spacing-scale-3);
+  }
+
+  .modal__body {
+    padding: var(--cs-spacing-scale-4);
+  }
+
+  .modal__footer {
+    padding: var(--cs-spacing-scale-3) var(--cs-spacing-scale-4) var(--cs-spacing-scale-4);
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.modal__container[role="dialog"] {
+  /* Ensure modal is properly announced to screen readers */
+  /* Role attribute provides semantic meaning for assistive technologies */
+}
+
+.modal__container:focus {
+  outline: none;
+}
+
+.modal__overlay[data-focus-trap] {
+  /* Focus trap is active - contains keyboard navigation within modal */
+  /* This selector ensures proper focus management for accessibility */
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .modal__container {
+    border: var(--cs-border-width-thick) solid;
+  }
+
+  .modal__header,
+  .modal__footer {
+    border-color: currentColor;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .modal__container {
+    transition: none;
+  }
+
+  .modal__container--enter,
+  .modal__container--exit,
+  .modal__container--fade-enter,
+  .modal__container--fade-exit,
+  .modal__container--scale-enter,
+  .modal__container--scale-exit {
+    animation: none;
+  }
+}
+
+/* ============================================================================ */
+/* THEME INTEGRATION */
+/* ============================================================================ */
+
+.modal__container--theme-dark {
+  --modal-background: var(--cs-colors-gray-800);
+  --modal-border: var(--cs-borders-dark);
+  color: var(--cs-colors-white);
+}
+
+.modal__container--theme-dark .modal__header,
+.modal__container--theme-dark .modal__footer {
+  background-color: var(--cs-colors-gray-900);
+  border-color: var(--cs-colors-gray-700);
+}
+
+.modal__container--theme-dark .modal__title {
+  color: var(--cs-colors-white);
+}
+
+.modal__container--theme-dark .modal__close {
+  color: var(--cs-colors-gray-400);
+}
+
+.modal__container--theme-dark .modal__close:hover {
+  background-color: var(--cs-colors-gray-700);
+  color: var(--cs-colors-white);
+}
+
+/* ============================================================================ */
+/* FOCUS MANAGEMENT */
+/* ============================================================================ */
+
+.modal__focus-trap {
+  /* Invisible element for focus trapping */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--cs-spacing-scale-0-25);
+  height: var(--cs-spacing-scale-0-25);
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.modal__container--focus-visible {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-primary-500);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* ============================================================================ */
+/* LOADING STATE */
+/* ============================================================================ */
+
+.modal__container--loading {
+  pointer-events: none;
+  opacity: var(--cs-opacity-70);
+}
+
+.modal__container--loading::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cs-colors-white-alpha-80);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}