zenkit-css 1.0.0

package/scss/components/_timeline.scss

@@ -0,0 +1,341 @@
+// ========================================
+// ZenKit - Timeline
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Base Timeline
+// ----------------------------------------
+.timeline {
+  --timeline-color: var(--gray-300);
+  --timeline-dot-size: 0.75rem;
+  --timeline-dot-color: var(--primary);
+  --timeline-line-width: 2px;
+
+  position: relative;
+  padding-left: 1.5rem;
+}
+
+// Timeline Line
+.timeline::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
+  top: 0;
+  bottom: 0;
+  width: var(--timeline-line-width);
+  background-color: var(--timeline-color);
+}
+
+// ----------------------------------------
+// Timeline Item
+// ----------------------------------------
+.timeline-item {
+  position: relative;
+  padding-bottom: 1.5rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+}
+
+// Timeline Dot
+.timeline-dot {
+  position: absolute;
+  left: calc(-1.5rem + (var(--timeline-dot-size) / 2) * -1);
+  top: 0.25rem;
+  width: var(--timeline-dot-size);
+  height: var(--timeline-dot-size);
+  background-color: var(--timeline-dot-color);
+  border: 2px solid var(--bg);
+  border-radius: 50%;
+  z-index: 1;
+}
+
+// Timeline Dot Colors
+.timeline-dot-success {
+  background-color: $success;
+}
+
+.timeline-dot-danger {
+  background-color: $danger;
+}
+
+.timeline-dot-warning {
+  background-color: $warning;
+}
+
+.timeline-dot-info {
+  background-color: $info;
+}
+
+.timeline-dot-gray {
+  background-color: var(--gray-400);
+}
+
+// ----------------------------------------
+// Timeline Content
+// ----------------------------------------
+.timeline-content {
+  padding-left: 0.5rem;
+}
+
+.timeline-title {
+  font-size: var(--text-base);
+  font-weight: $font-weight-semibold;
+  color: var(--text);
+  margin-bottom: 0.25rem;
+}
+
+.timeline-time {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.timeline-description {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: $line-height-relaxed;
+}
+
+// ----------------------------------------
+// Timeline with Icon
+// ----------------------------------------
+.timeline-icon {
+  position: absolute;
+  left: calc(-1.5rem - 0.5rem);
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  background-color: var(--primary);
+  color: var(--white);
+  border-radius: 50%;
+  z-index: 1;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.timeline-icon-success {
+  background-color: $success;
+}
+
+.timeline-icon-danger {
+  background-color: $danger;
+}
+
+.timeline-icon-warning {
+  background-color: $warning;
+  color: var(--gray-900);
+}
+
+.timeline-icon-info {
+  background-color: $info;
+}
+
+.timeline-icon-gray {
+  background-color: var(--gray-400);
+}
+
+// When using icon, adjust timeline padding
+.timeline-has-icons {
+  padding-left: 2.5rem;
+
+  &::before {
+    left: calc(1.75rem / 2 - var(--timeline-line-width) / 2);
+  }
+
+  .timeline-icon {
+    left: -2.5rem;
+  }
+}
+
+// ----------------------------------------
+// Timeline Sizes
+// ----------------------------------------
+.timeline-sm {
+  --timeline-dot-size: 0.5rem;
+  padding-left: 1rem;
+
+  &::before {
+    left: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
+  }
+
+  .timeline-dot {
+    left: calc(-1rem + (var(--timeline-dot-size) / 2) * -1);
+  }
+
+  .timeline-item {
+    padding-bottom: 1rem;
+  }
+
+  .timeline-title {
+    font-size: var(--text-sm);
+  }
+
+  .timeline-description {
+    font-size: var(--text-xs);
+  }
+}
+
+.timeline-lg {
+  --timeline-dot-size: 1rem;
+  --timeline-line-width: 3px;
+  padding-left: 2rem;
+
+  &::before {
+    left: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
+  }
+
+  .timeline-dot {
+    left: calc(-2rem + (var(--timeline-dot-size) / 2) * -1);
+  }
+
+  .timeline-item {
+    padding-bottom: 2rem;
+  }
+}
+
+// ----------------------------------------
+// Horizontal Timeline
+// ----------------------------------------
+.timeline-horizontal {
+  display: flex;
+  padding-left: 0;
+  padding-top: 1.5rem;
+
+  &::before {
+    left: 0;
+    right: 0;
+    top: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
+    bottom: auto;
+    width: 100%;
+    height: var(--timeline-line-width);
+  }
+
+  .timeline-item {
+    flex: 1;
+    padding-bottom: 0;
+    padding-right: 1rem;
+    text-align: center;
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  .timeline-dot {
+    left: 50%;
+    top: calc(-1.5rem + (var(--timeline-dot-size) / 2) * -1);
+    transform: translateX(-50%);
+  }
+
+  .timeline-content {
+    padding-left: 0;
+    padding-top: 0.5rem;
+  }
+}
+
+// ----------------------------------------
+// Alternate Timeline (Zigzag)
+// ----------------------------------------
+.timeline-alternate {
+  padding-left: 50%;
+
+  &::before {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .timeline-item {
+    width: 50%;
+    padding-right: 2rem;
+    text-align: right;
+
+    &:nth-child(even) {
+      margin-left: 50%;
+      padding-left: 2rem;
+      padding-right: 0;
+      text-align: left;
+    }
+  }
+
+  .timeline-dot {
+    left: auto;
+    right: calc(-1 * var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
+  }
+
+  .timeline-item:nth-child(even) .timeline-dot {
+    right: auto;
+    left: calc(-1 * var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
+  }
+
+  .timeline-content {
+    padding-left: 0;
+  }
+}
+
+// ----------------------------------------
+// Timeline States
+// ----------------------------------------
+.timeline-item-pending {
+  .timeline-dot {
+    background-color: var(--gray-300);
+    border-style: dashed;
+  }
+}
+
+.timeline-item-active {
+  .timeline-dot {
+    box-shadow: 0 0 0 4px rgba($primary, 0.2);
+  }
+}
+
+// ----------------------------------------
+// Timeline Card Style
+// ----------------------------------------
+.timeline-card {
+  .timeline-content {
+    padding: 1rem;
+    background-color: var(--bg);
+    border: $border-width solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+  }
+}
+
+// ----------------------------------------
+// Dashed Line Variant
+// ----------------------------------------
+.timeline-dashed::before {
+  background: repeating-linear-gradient(
+    to bottom,
+    var(--timeline-color) 0,
+    var(--timeline-color) 4px,
+    transparent 4px,
+    transparent 8px
+  );
+}
+
+// ----------------------------------------
+// Timeline Label (Date on Left)
+// ----------------------------------------
+.timeline-labeled {
+  padding-left: 8rem;
+
+  .timeline-label {
+    position: absolute;
+    left: -8rem;
+    width: 6rem;
+    text-align: right;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+  }
+}