mithril-materialized 2.0.0-beta.9 → 2.0.0-rc.2

package/sass/components/_timeline.scss

@@ -0,0 +1,452 @@
+// Timeline Component Styles
+// Material Design inspired timeline with vertical and horizontal orientations
+
+@use "sass:map";
+@use 'variables' as *;
+@use 'theme-variables' as *;
+
+// Timeline colors mapping
+$timeline-colors: (
+  'primary': var(--mm-primary-color, #{$primary-color}),
+  'secondary': var(--mm-secondary-color, #{$secondary-color}),
+  'success': var(--mm-success-color, #4caf50),
+  'warning': var(--mm-warning-color, #ff9800),
+  'error': var(--mm-error-color, #f44336),
+  'info': var(--mm-info-color, #2196f3),
+  'default': var(--mm-primary-color, #{$primary-color})
+);
+
+// Base timeline styles
+.timeline {
+  position: relative;
+  padding: 16px;
+  margin: 0;
+  list-style: none;
+
+  // Vertical timeline (default)
+  &.timeline-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Horizontal timeline
+  &.timeline-horizontal {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  // Compact mode
+  &.timeline-compact {
+    .timeline-item {
+      margin-bottom: 16px;
+      
+      .timeline-content {
+        margin-top: -6px;
+        padding: 0px 16px;
+      }
+    }
+    
+    &.timeline-horizontal .timeline-item {
+      margin-right: 16px;
+    }
+  }
+}
+
+// Timeline item base styles
+.timeline-item {
+  position: relative;
+  display: flex;
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+    align-items: flex-start;
+    
+    .timeline-separator {
+      align-items: flex-start;
+    }
+  }
+
+  // Clickable items
+  &[role="button"] {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover:not(.timeline-item-disabled) {
+      .timeline-content {
+        background: var(--mm-hover-color, rgba(0, 0, 0, 0.04));
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      
+      .timeline-dot {
+        transform: scale(1.1);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--mm-primary-color, #{$primary-color});
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+  }
+
+  // Disabled state
+  &.timeline-item-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    
+    .timeline-content,
+    .timeline-dot {
+      pointer-events: none;
+    }
+  }
+
+  // Vertical timeline item positioning
+  .timeline-vertical & {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    
+    &.timeline-item-left {
+      // timestamp - separator - content (content on right)
+      .timeline-timestamp-separate {
+        order: 1;
+        margin-left: 16px;
+        text-align: right;
+        min-width: 80px;
+      }
+      
+      .timeline-separator {
+        order: 2;
+      }
+      
+      .timeline-content {
+        order: 3;
+        margin-left: 16px;
+        flex: 1;
+        text-align: left;
+      }
+    }
+    
+    &.timeline-item-right {
+      // content - separator - timestamp (content on left)
+      .timeline-content {
+        order: 1;
+        margin-right: 16px;
+        flex: 1;
+        text-align: right;
+      }
+      
+      .timeline-separator {
+        order: 2;
+      }
+      
+      .timeline-timestamp-separate {
+        order: 3;
+        margin-left: 16px;
+        text-align: left;
+        min-width: 80px;
+      }
+      
+      .timeline-timestamp-separate.timeline-dot-small {
+        margin-top: -6px;
+      }
+    }
+  }
+  
+  // Special positioning for alternating mode
+  .timeline-alternate & {
+    justify-content: center;
+    
+    .timeline-separator {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 2;
+    }
+    
+    // Hide timestamps in alternating mode (following Material-UI pattern)
+    .timeline-timestamp-separate {
+      display: none;
+    }
+    
+    &.timeline-item-left {
+      .timeline-content {
+        width: calc(50% - 40px);
+        margin-right: calc(50% + 16px);
+        text-align: right;
+      }
+    }
+    
+    &.timeline-item-right {
+      .timeline-content {
+        width: calc(50% - 40px);
+        margin-left: calc(50% + 16px);
+        text-align: left;
+      }
+    }
+  }
+
+  // Horizontal timeline item positioning
+  .timeline-horizontal & {
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    min-width: 120px;
+    margin-right: 32px;
+    margin-bottom: 0;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+    
+    .timeline-content {
+      margin-top: 16px;
+      margin-left: 0;
+      margin-right: 0;
+      text-align: center;
+    }
+  }
+}
+
+// Timeline separator (contains dot and connector)
+.timeline-separator {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  align-self: stretch;
+  
+  .timeline-horizontal & {
+    flex-direction: row;
+  }
+}
+
+// Timeline dot/marker
+.timeline-dot {
+  position: relative;
+  z-index: 2;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--mm-primary-color, #{$primary-color});
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  // box-shadow: 0 0 0 3px var(--mm-surface-color, #ffffff);
+
+  .timeline-icon {
+    font-size: 16px;
+    color: var(--mm-background-color, #4caf50)
+  }
+
+  .timeline-marker {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--mm-on-primary-color, #ffffff);
+  }
+  
+  // Smaller dot when no icon is present
+  &.timeline-dot-small {
+    width: 12px;
+    height: 12px;
+    
+    .timeline-marker {
+      width: 6px;
+      height: 6px;
+    }
+  }
+}
+
+// Timeline connector line
+.timeline-connector {
+  background: var(--mm-divider-color, rgba(0, 0, 0, 0.12));
+  flex-shrink: 0;
+  
+  [data-theme="dark"] & {
+    background: var(--mm-divider-color, rgba(255, 255, 255, 0.12));
+  }
+  
+  // Vertical connectors
+  .timeline-vertical & {
+    width: 4px;
+    flex: 1;
+    min-height: 24px;
+    margin-top: 4px;
+    margin-bottom: -4px;
+  }
+  
+  // Horizontal connectors  
+  .timeline-horizontal & {
+    height: 4px;
+    min-width: 32px;
+    margin-left: 8px;
+  }
+}
+
+// Timeline content
+.timeline-content {
+  flex: 1;
+  padding: 0 8px;
+  transition: all 0.2s ease;
+  min-width: 0; // Allow text truncation
+  
+  // Align first line with timeline dot (24px height, center = 12px from top)
+  .timeline-label:first-child {
+    margin-top: 2px; // Adjust to align with dot center
+  }
+  
+  // Add background for custom content (cards, etc.)
+  .card {
+    background: var(--mm-surface-color, #ffffff);
+    border-radius: 8px;
+    padding: 12px 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin: 4px 0;
+    
+    [data-theme="dark"] & {
+      background: var(--mm-surface-variant-color, #424242);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+// Timeline timestamp
+.timeline-timestamp {
+  font-size: 0.75rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  margin-bottom: 4px;
+  font-weight: 500;
+  
+  [data-theme="dark"] & {
+    color: var(--mm-text-secondary, rgba(255, 255, 255, 0.7));
+  }
+}
+
+// Separate timestamp for vertical layouts
+.timeline-timestamp-separate {
+  font-size: 0.75rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  
+  [data-theme="dark"] & {
+    color: var(--mm-text-secondary, rgba(255, 255, 255, 0.7));
+  }
+}
+
+// Timeline text content
+.timeline-label {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  margin-bottom: 4px;
+  line-height: 1.4;
+  
+  [data-theme="dark"] & {
+    color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+  }
+}
+
+.timeline-description {
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  line-height: 1.5;
+  margin: 0;
+  
+  [data-theme="dark"] & {
+    color: var(--mm-text-secondary, rgba(255, 255, 255, 0.7));
+  }
+}
+
+// Color variations
+@each $name, $color in $timeline-colors {
+  .timeline-#{$name} {
+    .timeline-dot {
+      background: #{$color};
+      
+      .timeline-icon {
+        color: var(--mm-on-primary-color, #ffffff);
+      }
+      
+      .timeline-marker {
+        background: var(--mm-on-primary-color, #ffffff);
+      }
+    }
+  }
+}
+
+// Responsive design
+@media screen and (max-width: 600px) {
+  .timeline {
+    &.timeline-horizontal {
+      flex-direction: column;
+      
+      &::before {
+        display: none;
+      }
+      
+      .timeline-item {
+        margin-right: 0;
+        margin-bottom: 16px;
+        min-width: auto;
+        
+        .timeline-content {
+          margin-top: 0;
+          margin-left: 16px;
+          text-align: left;
+        }
+      }
+    }
+    
+    &.timeline-vertical {
+      &.timeline-left,
+      &.timeline-alternate {
+        .timeline-item {
+          flex-direction: row;
+          text-align: left;
+          
+          .timeline-content {
+            margin-left: 16px;
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Animation support
+@media (prefers-reduced-motion: no-preference) {
+  .timeline-item {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: timeline-fade-in 0.5s ease forwards;
+    
+    @for $i from 1 through 20 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 0.1s};
+      }
+    }
+  }
+  
+  .timeline-horizontal .timeline-item {
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes timeline-fade-in {
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}