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

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

@@ -0,0 +1,607 @@
+/* Popover Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* POPOVER BASE */
+/* ============================================================================ */
+
+.popover {
+  --popover-border-radius: var(--cs-border-radius-md);
+  --popover-shadow: var(--cs-shadows-lg);
+  --popover-background: var(--cs-colors-surface-background);
+  --popover-border: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  --popover-transition: var(--cs-transitions-properties-all);
+  --popover-z-index: var(--cs-z-index-popover);
+  --popover-arrow-size: var(--cs-spacing-scale-2);
+  --popover-offset: var(--cs-spacing-scale-2);
+}
+
+.popover__trigger {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.popover__content {
+  position: absolute;
+  z-index: var(--popover-z-index);
+  background-color: var(--popover-background);
+  border: var(--popover-border);
+  border-radius: var(--popover-border-radius);
+  box-shadow: var(--popover-shadow);
+  transform-origin: var(--popover-transform-origin, center);
+  transition: var(--popover-transition);
+  overflow: hidden;
+  max-width: var(--popover-max-width, var(--cs-spacing-scale-80));
+  min-width: var(--popover-min-width, var(--cs-spacing-scale-50));
+}
+
+/* ============================================================================ */
+/* POPOVER SIZES */
+/* ============================================================================ */
+
+.popover__content--size-sm {
+  --popover-max-width: var(--cs-spacing-scale-60);
+  --popover-min-width: var(--cs-spacing-scale-40);
+}
+
+.popover__content--size-md {
+  --popover-max-width: var(--cs-spacing-scale-80);
+  --popover-min-width: var(--cs-spacing-scale-50);
+}
+
+.popover__content--size-lg {
+  --popover-max-width: var(--cs-spacing-scale-120);
+  --popover-min-width: var(--cs-spacing-scale-70);
+}
+
+/* ============================================================================ */
+/* POPOVER VARIANTS */
+/* ============================================================================ */
+
+.popover__content--variant-default {
+  /* Uses base styles */
+}
+
+.popover__content--variant-filled {
+  background-color: var(--cs-colors-surface-surface);
+  border: none;
+}
+
+.popover__content--variant-outlined {
+  border-width: var(--cs-border-width-thick);
+  box-shadow: none;
+}
+
+/* ============================================================================ */
+/* POPOVER POSITIONING */
+/* ============================================================================ */
+
+.popover__content--position-top {
+  --popover-transform-origin: bottom center;
+  margin-bottom: var(--popover-offset);
+}
+
+.popover__content--position-top-start {
+  --popover-transform-origin: bottom left;
+  margin-bottom: var(--popover-offset);
+}
+
+.popover__content--position-top-end {
+  --popover-transform-origin: bottom right;
+  margin-bottom: var(--popover-offset);
+}
+
+.popover__content--position-bottom {
+  --popover-transform-origin: top center;
+  margin-top: var(--popover-offset);
+}
+
+.popover__content--position-bottom-start {
+  --popover-transform-origin: top left;
+  margin-top: var(--popover-offset);
+}
+
+.popover__content--position-bottom-end {
+  --popover-transform-origin: top right;
+  margin-top: var(--popover-offset);
+}
+
+.popover__content--position-left {
+  --popover-transform-origin: center right;
+  margin-right: var(--popover-offset);
+}
+
+.popover__content--position-left-start {
+  --popover-transform-origin: top right;
+  margin-right: var(--popover-offset);
+}
+
+.popover__content--position-left-end {
+  --popover-transform-origin: bottom right;
+  margin-right: var(--popover-offset);
+}
+
+.popover__content--position-right {
+  --popover-transform-origin: center left;
+  margin-left: var(--popover-offset);
+}
+
+.popover__content--position-right-start {
+  --popover-transform-origin: top left;
+  margin-left: var(--popover-offset);
+}
+
+.popover__content--position-right-end {
+  --popover-transform-origin: bottom left;
+  margin-left: var(--popover-offset);
+}
+
+/* ============================================================================ */
+/* POPOVER ARROW */
+/* ============================================================================ */
+
+.popover__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  pointer-events: none;
+}
+
+.popover__content--position-top .popover__arrow {
+  bottom: calc(-1 * var(--popover-arrow-size));
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-top: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-top-start .popover__arrow {
+  bottom: calc(-1 * var(--popover-arrow-size));
+  left: var(--cs-spacing-scale-4);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-top: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-top-end .popover__arrow {
+  bottom: calc(-1 * var(--popover-arrow-size));
+  right: var(--cs-spacing-scale-4);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-top: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-bottom .popover__arrow {
+  top: calc(-1 * var(--popover-arrow-size));
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-bottom-start .popover__arrow {
+  top: calc(-1 * var(--popover-arrow-size));
+  left: var(--cs-spacing-scale-4);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-bottom-end .popover__arrow {
+  top: calc(-1 * var(--popover-arrow-size));
+  right: var(--cs-spacing-scale-4);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-left .popover__arrow {
+  right: calc(-1 * var(--popover-arrow-size));
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-left: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-left-start .popover__arrow {
+  right: calc(-1 * var(--popover-arrow-size));
+  top: var(--cs-spacing-scale-4);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-left: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-left-end .popover__arrow {
+  right: calc(-1 * var(--popover-arrow-size));
+  bottom: var(--cs-spacing-scale-4);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-left: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-right .popover__arrow {
+  left: calc(-1 * var(--popover-arrow-size));
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-right-start .popover__arrow {
+  left: calc(-1 * var(--popover-arrow-size));
+  top: var(--cs-spacing-scale-4);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+.popover__content--position-right-end .popover__arrow {
+  left: calc(-1 * var(--popover-arrow-size));
+  bottom: var(--cs-spacing-scale-4);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid var(--popover-background);
+}
+
+/* ============================================================================ */
+/* POPOVER HEADER */
+/* ============================================================================ */
+
+.popover__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--cs-spacing-scale-4);
+  border-bottom: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  background-color: var(--cs-colors-surface-surface);
+  flex-shrink: 0;
+}
+
+.popover__header--borderless {
+  border-bottom: none;
+}
+
+.popover__header--no-padding {
+  padding: 0;
+}
+
+.popover__title {
+  font-size: var(--cs-fonts-primary-sizes-base);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  line-height: var(--cs-fonts-primary-line-heights-tight);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+  flex: 1;
+}
+
+.popover__subtitle {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-colors-text-secondary);
+  margin: var(--cs-spacing-scale-1) 0 0;
+}
+
+.popover__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cs-spacing-scale-6);
+  height: var(--cs-spacing-scale-6);
+  border: none;
+  background: none;
+  color: var(--cs-colors-text-secondary);
+  cursor: pointer;
+  border-radius: var(--cs-border-radius-sm);
+  transition: var(--popover-transition);
+  flex-shrink: 0;
+  margin-left: var(--cs-spacing-scale-2);
+}
+
+.popover__close:hover {
+  background-color: var(--cs-colors-interactive-hover);
+  color: var(--cs-colors-text-primary);
+}
+
+.popover__close:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+.popover__close:active {
+  background-color: var(--cs-colors-interactive-active);
+}
+
+/* ============================================================================ */
+/* POPOVER BODY */
+/* ============================================================================ */
+
+.popover__body {
+  padding: var(--cs-spacing-scale-4);
+  color: var(--cs-colors-text-primary);
+  line-height: var(--cs-fonts-primary-line-heights-relaxed);
+}
+
+.popover__body--no-padding {
+  padding: 0;
+}
+
+.popover__body--compact {
+  padding: var(--cs-spacing-scale-3);
+}
+
+.popover__body--spacious {
+  padding: var(--cs-spacing-scale-6);
+}
+
+.popover__body--scrollable {
+  max-height: var(--popover-max-height, var(--cs-spacing-scale-75));
+  overflow-y: auto;
+}
+
+/* ============================================================================ */
+/* POPOVER FOOTER */
+/* ============================================================================ */
+
+.popover__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--cs-spacing-scale-2);
+  padding: var(--cs-spacing-scale-4);
+  border-top: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  background-color: var(--cs-colors-surface-surface);
+  flex-shrink: 0;
+}
+
+.popover__footer--borderless {
+  border-top: none;
+}
+
+.popover__footer--no-padding {
+  padding: 0;
+}
+
+.popover__footer--center {
+  justify-content: center;
+}
+
+.popover__footer--space-between {
+  justify-content: space-between;
+}
+
+.popover__footer--start {
+  justify-content: flex-start;
+}
+
+/* ============================================================================ */
+/* POPOVER ANIMATIONS */
+/* ============================================================================ */
+
+.popover__content--enter {
+  animation: popover-fade-in var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-out);
+}
+
+.popover__content--exit {
+  animation: popover-fade-out var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in);
+}
+
+.popover__content--slide-enter {
+  animation: popover-slide-in var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-out);
+}
+
+.popover__content--slide-exit {
+  animation: popover-slide-out var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in);
+}
+
+.popover__content--scale-enter {
+  animation: popover-scale-in var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-out);
+}
+
+.popover__content--scale-exit {
+  animation: popover-scale-out var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in);
+}
+
+@keyframes popover-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popover-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes popover-slide-in {
+  from {
+    opacity: 0;
+    transform: var(--popover-slide-from, translateY(calc(-1 * var(--cs-spacing-scale-2))));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: var(--popover-slide-to, translateY(calc(-1 * var(--cs-spacing-scale-2))));
+  }
+}
+
+@keyframes popover-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes popover-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 640px) {
+  .popover__content {
+    --popover-max-width: calc(100vw - var(--cs-spacing-scale-4));
+    --popover-min-width: var(--cs-spacing-scale-50);
+  }
+
+  .popover__header,
+  .popover__body,
+  .popover__footer {
+    padding: var(--cs-spacing-scale-3);
+  }
+
+  .popover__body--scrollable {
+    --popover-max-height: var(--cs-spacing-scale-62-5);
+  }
+}
+
+@media (max-width: 480px) {
+  .popover__content {
+    --popover-max-width: calc(100vw - var(--cs-spacing-scale-2));
+    --popover-min-width: var(--cs-spacing-scale-45);
+  }
+
+  .popover__header,
+  .popover__body,
+  .popover__footer {
+    padding: var(--cs-spacing-scale-2);
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.popover__content[role="dialog"] {
+  /* Ensure popover is properly announced to screen readers */
+}
+
+.popover__content:focus {
+  outline: none;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .popover__content {
+    border: var(--cs-border-width-thick) solid;
+  }
+
+  .popover__header,
+  .popover__footer {
+    border-color: currentColor;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .popover__content {
+    transition: none;
+  }
+
+  .popover__content--enter,
+  .popover__content--exit,
+  .popover__content--slide-enter,
+  .popover__content--slide-exit,
+  .popover__content--scale-enter,
+  .popover__content--scale-exit {
+    animation: none;
+  }
+}
+
+/* ============================================================================ */
+/* THEME INTEGRATION */
+/* ============================================================================ */
+
+.popover__content--theme-dark {
+  --popover-background: var(--cs-colors-gray-800);
+  --popover-border: var(--cs-border-width-normal) solid var(--cs-colors-gray-700);
+  color: var(--cs-colors-white);
+}
+
+.popover__content--theme-dark .popover__header,
+.popover__content--theme-dark .popover__footer {
+  background-color: var(--cs-colors-gray-900);
+  border-color: var(--cs-colors-gray-700);
+}
+
+.popover__content--theme-dark .popover__title {
+  color: var(--cs-colors-white);
+}
+
+.popover__content--theme-dark .popover__subtitle {
+  color: var(--cs-colors-gray-400);
+}
+
+.popover__content--theme-dark .popover__close {
+  color: var(--cs-colors-gray-400);
+}
+
+.popover__content--theme-dark .popover__close:hover {
+  background-color: var(--cs-colors-gray-700);
+  color: var(--cs-colors-white);
+}
+
+/* ============================================================================ */
+/* FOCUS MANAGEMENT */
+/* ============================================================================ */
+
+.popover__content--focus-visible {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* ============================================================================ */
+/* INTERACTION STATES */
+/* ============================================================================ */
+
+.popover__trigger:focus-visible {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+  border-radius: var(--cs-border-radius-sm);
+}
+
+.popover__trigger--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.popover__content--no-pointer-events {
+  pointer-events: none;
+}
+
+.popover__content--no-pointer-events * {
+  pointer-events: auto;
+}