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

package/src/styles/components/data-display/timeline.css

@@ -0,0 +1,764 @@
+/* Timeline Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* TIMELINE CONTAINER */
+/* ============================================================================ */
+
+.timeline {
+  --timeline-bg: var(--cs-colors-surface-background);
+  --timeline-border: var(--cs-colors-surface-border);
+  --timeline-radius: var(--cs-border-radius-md);
+  --timeline-shadow: var(--cs-shadows-sm);
+  --timeline-spacing: var(--cs-spacing-scale-4);
+  --timeline-connector: var(--cs-colors-surface-divider);
+  --timeline-connector-width: var(--cs-border-width-thick);
+}
+
+.timeline__container {
+  position: relative;
+  background-color: var(--timeline-bg);
+  border: var(--cs-border-width-normal) solid var(--timeline-border);
+  border-radius: var(--timeline-radius);
+  box-shadow: var(--timeline-shadow);
+  overflow: hidden;
+}
+
+/* Timeline container sizes */
+.timeline__container--sm {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+}
+
+.timeline__container--md {
+  font-size: var(--cs-fonts-primary-sizes-base);
+}
+
+.timeline__container--lg {
+  font-size: var(--cs-fonts-primary-sizes-lg);
+}
+
+/* Timeline variants */
+.timeline__container--bordered {
+  border-width: var(--cs-border-width-thick);
+  border-color: var(--cs-colors-primary-500);
+}
+
+.timeline__container--striped .timeline__item:nth-child(even) {
+  background-color: var(--cs-colors-surface-surface);
+}
+
+/* ============================================================================ */
+/* TIMELINE HEADER */
+/* ============================================================================ */
+
+.timeline__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--timeline-spacing);
+  border-bottom: var(--cs-border-width-normal) solid var(--cs-colors-surface-divider);
+  background-color: var(--cs-colors-surface-surface);
+}
+
+.timeline__title {
+  font-size: var(--cs-fonts-primary-sizes-lg);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+}
+
+.timeline__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-2);
+}
+
+.timeline__search {
+  position: relative;
+  max-width: var(--cs-spacing-scale-64);
+}
+
+.timeline__search-input {
+  width: 100%;
+  padding: var(--cs-spacing-scale-2) var(--cs-spacing-scale-10) var(--cs-spacing-scale-2) var(--cs-spacing-scale-3);
+  border: var(--cs-border-width-normal) solid var(--timeline-border);
+  border-radius: var(--cs-border-radius-md);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  background-color: var(--timeline-bg);
+  transition: var(--cs-transitions-colors);
+}
+
+.timeline__search-input:focus {
+  outline: none;
+  border-color: var(--cs-colors-primary-500);
+  box-shadow: var(--cs-shadows-focus);
+}
+
+.timeline__search-icon {
+  position: absolute;
+  right: var(--cs-spacing-scale-3);
+  top: var(--cs-percentage-50);
+  transform: translateY(calc(-1 * var(--cs-percentage-50)));
+  width: var(--cs-spacing-scale-4);
+  height: var(--cs-spacing-scale-4);
+  color: var(--cs-colors-text-muted);
+  pointer-events: none;
+}
+
+.timeline__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-2);
+  margin-top: var(--cs-spacing-scale-3);
+  padding-top: var(--cs-spacing-scale-3);
+  border-top: var(--cs-border-width-normal) solid var(--cs-colors-surface-divider);
+}
+
+/* ============================================================================ */
+/* TIMELINE WRAPPER */
+/* ============================================================================ */
+
+.timeline__wrapper {
+  position: relative;
+  padding: var(--timeline-spacing);
+  max-height: var(--cs-spacing-scale-96);
+  overflow-y: auto;
+}
+
+.timeline__list {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Timeline modes */
+.timeline__list--left {
+  padding-left: var(--cs-spacing-scale-8);
+}
+
+.timeline__list--right {
+  padding-right: var(--cs-spacing-scale-8);
+}
+
+.timeline__list--alternate {
+  padding-left: var(--cs-spacing-scale-8);
+  padding-right: var(--cs-spacing-scale-8);
+}
+
+/* ============================================================================ */
+/* TIMELINE CONNECTOR LINE */
+/* ============================================================================ */
+
+.timeline__connector {
+  position: absolute;
+  width: var(--timeline-connector-width);
+  background-color: var(--timeline-connector);
+  z-index: 1;
+}
+
+.timeline__connector--left {
+  left: var(--cs-spacing-scale-4);
+  top: var(--cs-spacing-scale-2);
+  bottom: var(--cs-spacing-scale-2);
+}
+
+.timeline__connector--right {
+  right: var(--cs-spacing-scale-4);
+  top: var(--cs-spacing-scale-2);
+  bottom: var(--cs-spacing-scale-2);
+}
+
+.timeline__connector--alternate {
+  left: var(--cs-percentage-50);
+  top: var(--cs-spacing-scale-2);
+  bottom: var(--cs-spacing-scale-2);
+  transform: translateX(calc(-1 * var(--cs-percentage-50)));
+}
+
+/* ============================================================================ */
+/* TIMELINE ITEMS */
+/* ============================================================================ */
+
+.timeline__item {
+  position: relative;
+  margin-bottom: var(--cs-spacing-scale-6);
+  display: flex;
+  align-items: flex-start;
+}
+
+.timeline__item:last-child {
+  margin-bottom: var(--cs-spacing-scale-0);
+}
+
+/* Timeline item positioning */
+.timeline__item--left {
+  justify-content: flex-start;
+  padding-left: var(--cs-spacing-scale-12);
+}
+
+.timeline__item--right {
+  justify-content: flex-end;
+  padding-right: var(--cs-spacing-scale-12);
+}
+
+.timeline__item--alternate-left {
+  justify-content: flex-end;
+  padding-right: calc(50% + var(--cs-spacing-scale-8));
+}
+
+.timeline__item--alternate-right {
+  justify-content: flex-start;
+  padding-left: calc(50% + var(--cs-spacing-scale-8));
+}
+
+/* Size variants for timeline items */
+.timeline__container--sm .timeline__item {
+  margin-bottom: var(--cs-spacing-scale-4);
+}
+
+.timeline__container--lg .timeline__item {
+  margin-bottom: var(--cs-spacing-scale-8);
+}
+
+/* ============================================================================ */
+/* TIMELINE ITEM INDICATOR */
+/* ============================================================================ */
+
+.timeline__indicator {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cs-spacing-scale-8);
+  height: var(--cs-spacing-scale-8);
+  border-radius: var(--cs-border-radius-full);
+  background-color: var(--timeline-bg);
+  border: var(--timeline-connector-width) solid var(--timeline-connector);
+}
+
+.timeline__indicator--left {
+  left: 0;
+  top: var(--cs-spacing-scale-2);
+}
+
+.timeline__indicator--right {
+  right: 0;
+  top: var(--cs-spacing-scale-2);
+}
+
+.timeline__indicator--alternate {
+  left: var(--cs-percentage-50);
+  top: var(--cs-spacing-scale-2);
+  transform: translateX(calc(-1 * var(--cs-percentage-50)));
+}
+
+/* Timeline indicator status variants */
+.timeline__indicator--success {
+  background-color: var(--cs-colors-semantic-success);
+  border-color: var(--cs-colors-semantic-success);
+  color: var(--cs-colors-text-onPrimary);
+}
+
+.timeline__indicator--warning {
+  background-color: var(--cs-colors-semantic-warning);
+  border-color: var(--cs-colors-semantic-warning);
+  color: var(--cs-colors-text-onPrimary);
+}
+
+.timeline__indicator--error {
+  background-color: var(--cs-colors-semantic-error);
+  border-color: var(--cs-colors-semantic-error);
+  color: var(--cs-colors-text-onPrimary);
+}
+
+.timeline__indicator--info {
+  background-color: var(--cs-colors-primary-500);
+  border-color: var(--cs-colors-primary-500);
+  color: var(--cs-colors-text-onPrimary);
+}
+
+.timeline__indicator--pending {
+  background-color: var(--cs-colors-gray-300);
+  border-color: var(--cs-colors-gray-300);
+  color: var(--cs-colors-text-secondary);
+}
+
+.timeline__indicator--processing {
+  background-color: var(--cs-colors-primary-100);
+  border-color: var(--cs-colors-primary-500);
+  color: var(--cs-colors-primary-600);
+  animation: timeline-pulse var(--cs-transitions-durations-slow) infinite;
+}
+
+@keyframes timeline-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: var(--cs-opacity-50); }
+}
+
+.timeline__indicator--completed {
+  background-color: var(--cs-colors-semantic-success);
+  border-color: var(--cs-colors-semantic-success);
+  color: var(--cs-colors-text-onPrimary);
+}
+
+.timeline__indicator-icon {
+  width: var(--cs-spacing-scale-4);
+  height: var(--cs-spacing-scale-4);
+}
+
+/* Size variants for timeline indicators */
+.timeline__container--sm .timeline__indicator {
+  width: var(--cs-spacing-scale-6);
+  height: var(--cs-spacing-scale-6);
+}
+
+.timeline__container--sm .timeline__indicator-icon {
+  width: var(--cs-spacing-scale-3);
+  height: var(--cs-spacing-scale-3);
+}
+
+.timeline__container--lg .timeline__indicator {
+  width: var(--cs-spacing-scale-10);
+  height: var(--cs-spacing-scale-10);
+}
+
+.timeline__container--lg .timeline__indicator-icon {
+  width: var(--cs-spacing-scale-5);
+  height: var(--cs-spacing-scale-5);
+}
+
+/* ============================================================================ */
+/* TIMELINE ITEM CONTENT */
+/* ============================================================================ */
+
+.timeline__content {
+  flex: 1;
+  max-width: calc(100% - var(--cs-spacing-scale-16));
+  background-color: var(--timeline-bg);
+  border: var(--cs-border-width-normal) solid var(--timeline-border);
+  border-radius: var(--timeline-radius);
+  padding: var(--timeline-spacing);
+  box-shadow: var(--cs-shadows-sm);
+  transition: var(--cs-transitions-all);
+}
+
+.timeline__content:hover {
+  box-shadow: var(--cs-shadows-md);
+  transform: translateY(calc(-1 * var(--cs-spacing-scale-0-25)));
+}
+
+.timeline__content--clickable {
+  cursor: pointer;
+}
+
+.timeline__content--clickable:hover {
+  border-color: var(--cs-colors-primary-300);
+}
+
+/* Timeline content positioning */
+.timeline__content--left::before,
+.timeline__content--alternate-left::before {
+  content: '';
+  position: absolute;
+  right: calc(-1 * var(--cs-spacing-scale-2));
+  top: var(--cs-spacing-scale-4);
+  width: 0;
+  height: 0;
+  border-left: var(--cs-spacing-scale-2) solid var(--timeline-border);
+  border-top: var(--cs-spacing-scale-2) solid transparent;
+  border-bottom: var(--cs-spacing-scale-2) solid transparent;
+}
+
+.timeline__content--right::before,
+.timeline__content--alternate-right::before {
+  content: '';
+  position: absolute;
+  left: calc(-1 * var(--cs-spacing-scale-2));
+  top: var(--cs-spacing-scale-4);
+  width: 0;
+  height: 0;
+  border-right: var(--cs-spacing-scale-2) solid var(--timeline-border);
+  border-top: var(--cs-spacing-scale-2) solid transparent;
+  border-bottom: var(--cs-spacing-scale-2) solid transparent;
+}
+
+.timeline__content--left::after,
+.timeline__content--alternate-left::after {
+  content: '';
+  position: absolute;
+  right: calc(-1 * var(--cs-spacing-scale-1-75));
+  top: var(--cs-spacing-scale-4);
+  width: 0;
+  height: 0;
+  border-left: var(--cs-spacing-scale-2) solid var(--timeline-bg);
+  border-top: var(--cs-spacing-scale-2) solid transparent;
+  border-bottom: var(--cs-spacing-scale-2) solid transparent;
+}
+
+.timeline__content--right::after,
+.timeline__content--alternate-right::after {
+  content: '';
+  position: absolute;
+  left: calc(-1 * var(--cs-spacing-scale-1-75));
+  top: var(--cs-spacing-scale-4);
+  width: 0;
+  height: 0;
+  border-right: var(--cs-spacing-scale-2) solid var(--timeline-bg);
+  border-top: var(--cs-spacing-scale-2) solid transparent;
+  border-bottom: var(--cs-spacing-scale-2) solid transparent;
+}
+
+/* ============================================================================ */
+/* TIMELINE ITEM HEADER */
+/* ============================================================================ */
+
+.timeline__item-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: var(--cs-spacing-scale-2);
+}
+
+.timeline__item-title {
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+  line-height: var(--cs-fonts-primary-line-heights-tight);
+}
+
+.timeline__item-timestamp {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-colors-text-muted);
+  white-space: nowrap;
+  margin-left: var(--cs-spacing-scale-3);
+}
+
+/* ============================================================================ */
+/* TIMELINE ITEM BODY */
+/* ============================================================================ */
+
+.timeline__item-description {
+  color: var(--cs-colors-text-secondary);
+  line-height: var(--cs-fonts-primary-line-heights-normal);
+  margin-bottom: var(--cs-spacing-scale-3);
+}
+
+.timeline__item-description:last-child {
+  margin-bottom: var(--cs-spacing-scale-0);
+}
+
+.timeline__item-custom-content {
+  margin-bottom: var(--cs-spacing-scale-3);
+}
+
+.timeline__item-custom-content:last-child {
+  margin-bottom: var(--cs-spacing-scale-0);
+}
+
+/* ============================================================================ */
+/* TIMELINE ITEM METADATA */
+/* ============================================================================ */
+
+.timeline__item-metadata {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-3);
+  margin-bottom: var(--cs-spacing-scale-3);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+}
+
+.timeline__item-metadata:last-child {
+  margin-bottom: var(--cs-spacing-scale-0);
+}
+
+.timeline__item-author {
+  color: var(--cs-colors-text-secondary);
+}
+
+.timeline__item-category {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cs-spacing-scale-1) var(--cs-spacing-scale-2);
+  background-color: var(--cs-colors-gray-100);
+  color: var(--cs-colors-gray-800);
+  border-radius: var(--cs-border-radius-md);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+}
+
+.timeline__item-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cs-spacing-scale-1);
+}
+
+.timeline__item-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cs-spacing-scale-1) var(--cs-spacing-scale-2);
+  background-color: var(--cs-colors-primary-100);
+  color: var(--cs-colors-primary-800);
+  border-radius: var(--cs-border-radius-md);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+}
+
+/* ============================================================================ */
+/* TIMELINE ITEM ACTIONS */
+/* ============================================================================ */
+
+.timeline__item-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-2);
+  margin-top: var(--cs-spacing-scale-3);
+  padding-top: var(--cs-spacing-scale-3);
+  border-top: var(--cs-border-width-normal) solid var(--cs-colors-surface-divider);
+}
+
+.timeline__item-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-1);
+  padding: var(--cs-spacing-scale-1) var(--cs-spacing-scale-2);
+  border: var(--cs-border-width-normal) solid var(--timeline-border);
+  background-color: var(--timeline-bg);
+  border-radius: var(--cs-border-radius-sm);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  cursor: pointer;
+  transition: var(--cs-transitions-colors);
+  text-decoration: none;
+  color: var(--cs-colors-text-secondary);
+}
+
+.timeline__item-action:hover {
+  background-color: var(--cs-colors-surface-surface);
+  color: var(--cs-colors-text-primary);
+}
+
+.timeline__item-action--primary {
+  background-color: var(--cs-colors-primary-500);
+  color: var(--cs-colors-text-onPrimary);
+  border-color: var(--cs-colors-primary-500);
+}
+
+.timeline__item-action--primary:hover {
+  background-color: var(--cs-colors-primary-600);
+}
+
+.timeline__item-action--danger {
+  color: var(--cs-colors-semantic-error);
+  border-color: var(--cs-colors-semantic-error);
+}
+
+.timeline__item-action--danger:hover {
+  background-color: var(--cs-colors-semantic-error-50);
+}
+
+.timeline__item-action-icon {
+  width: var(--cs-spacing-scale-4);
+  height: var(--cs-spacing-scale-4);
+}
+
+/* ============================================================================ */
+/* TIMELINE STATES */
+/* ============================================================================ */
+
+.timeline__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cs-spacing-scale-16) var(--timeline-spacing);
+  color: var(--cs-colors-text-secondary);
+}
+
+.timeline__loading-spinner {
+  width: var(--cs-spacing-scale-8);
+  height: var(--cs-spacing-scale-8);
+  border: var(--cs-border-width-thick) solid var(--cs-colors-surface-divider);
+  border-top: var(--cs-border-width-thick) solid var(--cs-colors-primary-500);
+  border-radius: var(--cs-border-radius-full);
+  animation: timeline-loading-spin var(--cs-transitions-durations-normal) linear infinite;
+  margin-right: var(--cs-spacing-scale-3);
+}
+
+@keyframes timeline-loading-spin {
+  0% { transform: rotate(var(--cs-rotation-none)); }
+  100% { transform: rotate(var(--cs-rotation-full)); }
+}
+
+.timeline__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cs-spacing-scale-16) var(--timeline-spacing);
+  color: var(--cs-colors-semantic-error);
+  text-align: center;
+}
+
+.timeline__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cs-spacing-scale-16) var(--timeline-spacing);
+  color: var(--cs-colors-text-muted);
+  text-align: center;
+}
+
+.timeline__empty-icon {
+  width: var(--cs-spacing-scale-16);
+  height: var(--cs-spacing-scale-16);
+  margin-bottom: var(--cs-spacing-scale-4);
+  opacity: var(--cs-opacity-50);
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 768px) {
+  .timeline__header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--cs-spacing-scale-3);
+  }
+
+  .timeline__search {
+    max-width: none;
+  }
+
+  .timeline__list--alternate {
+    padding-left: var(--cs-spacing-scale-8);
+    padding-right: 0;
+  }
+
+  .timeline__item--alternate-left,
+  .timeline__item--alternate-right {
+    justify-content: flex-start;
+    padding-left: var(--cs-spacing-scale-12);
+    padding-right: 0;
+  }
+
+  .timeline__connector--alternate {
+    left: var(--cs-spacing-scale-4);
+    transform: none;
+  }
+
+  .timeline__indicator--alternate {
+    left: 0;
+    transform: none;
+  }
+
+  .timeline__content {
+    max-width: calc(100% - var(--cs-spacing-scale-12));
+  }
+
+  .timeline__content--alternate-left::before,
+  .timeline__content--alternate-right::before {
+    left: calc(-1 * var(--cs-spacing-scale-2));
+    border-left: none;
+    border-right: var(--cs-spacing-scale-2) solid var(--timeline-border);
+  }
+
+  .timeline__content--alternate-left::after,
+  .timeline__content--alternate-right::after {
+    left: calc(-1 * var(--cs-spacing-scale-1-75));
+    border-left: none;
+    border-right: var(--cs-spacing-scale-2) solid var(--timeline-bg);
+  }
+}
+
+@media (max-width: 640px) {
+  .timeline__item {
+    margin-bottom: var(--cs-spacing-scale-4);
+  }
+
+  .timeline__item-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--cs-spacing-scale-1);
+  }
+
+  .timeline__item-timestamp {
+    margin-left: 0;
+  }
+
+  .timeline__item-actions {
+    flex-wrap: wrap;
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.timeline__container:focus-within {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+.timeline__content:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+.timeline__item-action:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .timeline__container {
+    border-width: var(--cs-border-width-thick);
+  }
+
+  .timeline__content {
+    border-width: var(--cs-border-width-thick);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .timeline__content,
+  .timeline__item-action {
+    transition: none;
+  }
+
+  .timeline__indicator--processing {
+    animation: none;
+  }
+
+  .timeline__loading-spinner {
+    animation: none;
+  }
+}
+
+/* ============================================================================ */
+/* PRINT STYLES */
+/* ============================================================================ */
+
+@media print {
+  .timeline__container {
+    box-shadow: none;
+    border: var(--cs-border-width-normal) solid var(--cs-colors-black);
+  }
+
+  .timeline__actions,
+  .timeline__item-actions {
+    display: none;
+  }
+
+  .timeline__loading,
+  .timeline__error {
+    display: none;
+  }
+
+  .timeline__content:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}