Skip to content

Commit 617f937

Browse files
OhsweddOhswedd
committed
Close #41 
1 parent ad229f0 commit 617f937

File tree

3 files changed

+267
-0
lines changed

3 files changed

+267
-0
lines changed

‎css/components/timeline.css‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
/* Timeline Container */
2+
.timeline {
3+
position: relative;
4+
padding: clamp(var(--space-4), 2vw, var(--space-6)) 0;
5+
margin: var(--space-8) auto;
6+
list-style: none;
7+
max-width: clamp(90%, 700px, 100%);
8+
border-left: 2px solid var(--neutral-300);
9+
text-align: left;
10+
}
11+
12+
/* Optional Scrollable Timeline */
13+
.timeline[data-scroll="true"] {
14+
max-height: 70vh;
15+
overflow-y: auto;
16+
scrollbar-color: var(--primary-bg) var(--neutral-300);
17+
scrollbar-width: thin;
18+
padding-top: clamp(var(--space-6), 3vw, var(--space-8));
19+
padding-bottom: clamp(var(--space-6), 3vw, var(--space-8));
20+
padding-right: clamp(var(--space-4), 2vw, var(--space-6));
21+
}
22+
23+
/* Custom Scrollbar for Webkit Browsers */
24+
.timeline[data-scroll="true"]::-webkit-scrollbar {
25+
width: 8px;
26+
}
27+
.timeline[data-scroll="true"]::-webkit-scrollbar-track {
28+
background: var(--neutral-300);
29+
}
30+
.timeline[data-scroll="true"]::-webkit-scrollbar-thumb {
31+
background-color: var(--variant-bg, var(--primary-bg));
32+
border-radius: 4px;
33+
border: 2px solid transparent;
34+
}
35+
36+
/* Apply Global Variant to Scrollbar and Timeline Items */
37+
.timeline[data-variant="primary"] {
38+
--variant-bg: var(--primary-bg);
39+
--variant-text: var(--primary-text);
40+
--variant-shadow: var(--primary-shadow);
41+
}
42+
.timeline[data-variant="success"] {
43+
--variant-bg: var(--success-bg);
44+
--variant-text: var(--success-text);
45+
--variant-shadow: var(--success-shadow);
46+
}
47+
.timeline[data-variant="warning"] {
48+
--variant-bg: var(--warning-bg);
49+
--variant-text: var(--warning-text);
50+
--variant-shadow: var(--warning-shadow);
51+
}
52+
.timeline[data-variant="danger"] {
53+
--variant-bg: var(--danger-bg);
54+
--variant-text: var(--danger-text);
55+
--variant-shadow: var(--danger-shadow);
56+
}
57+
.timeline[data-variant="info"] {
58+
--variant-bg: var(--info-bg);
59+
--variant-text: var(--info-text);
60+
--variant-shadow: var(--info-shadow);
61+
}
62+
.timeline[data-variant="secondary"] {
63+
--variant-bg: var(--secondary-bg);
64+
--variant-text: var(--secondary-text);
65+
--variant-shadow: var(--secondary-shadow);
66+
}
67+
.timeline[data-variant="accent"] {
68+
--variant-bg: var(--accent-bg);
69+
--variant-text: var(--accent-text);
70+
--variant-shadow: var(--accent-shadow);
71+
}
72+
73+
/* Apply Variant to Scrollbar */
74+
.timeline[data-variant]::-webkit-scrollbar-thumb {
75+
background-color: var(--variant-bg);
76+
}
77+
78+
/* Start and End of Timeline Indicators */
79+
.timeline::before,
80+
.timeline::after {
81+
position: absolute;
82+
left: -calc(var(--space-10));
83+
font-size: 1.5rem;
84+
color: var(--neutral-500);
85+
}
86+
87+
/* Timeline Item */
88+
.timeline-item {
89+
position: relative;
90+
margin-left: clamp(var(--space-10), 4vw, var(--space-12));
91+
padding-bottom: clamp(var(--space-6), 2vw, var(--space-8));
92+
overflow: visible;
93+
}
94+
95+
/* First Item Margin Adjustment */
96+
.timeline-item:first-child {
97+
margin-top: clamp(var(--space-4), 2vw, var(--space-6)); /* Space for start icon */
98+
}
99+
100+
/* Date Label as Badge - Adjusted Positioning */
101+
.timeline-item::before {
102+
content: attr(data-date);
103+
position: absolute;
104+
top: 0;
105+
left: -calc(var(--space-12) + var(--space-4));
106+
transform: translateY(-50%);
107+
padding: var(--space-1) var(--space-2);
108+
font-size: clamp(0.75rem, 1vw + 0.25rem, 0.875rem);
109+
font-weight: 500;
110+
border-radius: var(--radius-md);
111+
font-family: var(--font-sans);
112+
z-index: 2;
113+
white-space: nowrap;
114+
background-color: var(--variant-bg, var(--primary-bg));
115+
color: var(--variant-text, var(--primary-text));
116+
box-shadow: var(--variant-shadow, var(--primary-shadow));
117+
}
118+
119+
/* Timeline Content Box */
120+
.timeline-content {
121+
padding: clamp(var(--space-4), 1.5vw, var(--space-6));
122+
background-color: var(--neutral-50);
123+
border-radius: var(--radius-md);
124+
box-shadow: var(--shadow-md);
125+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
126+
max-width: 100%;
127+
margin-top: var(--space-2);
128+
position: relative;
129+
border-left: 4px solid var(--variant-bg, var(--primary-bg));
130+
}
131+
132+
.timeline-content:hover {
133+
background-color: var(--neutral-100);
134+
box-shadow: var(--shadow-lg);
135+
}
136+
137+
/* Title Styling */
138+
.timeline-title {
139+
font-size: clamp(1.125rem, 2vw + 0.25rem, 1.25rem);
140+
font-weight: 700;
141+
color: var(--neutral-900);
142+
margin-bottom: var(--space-2);
143+
}
144+
145+
/* Description Styling */
146+
.timeline-description {
147+
font-size: clamp(0.875rem, 1vw + 0.25rem, 1rem);
148+
color: var(--neutral-700);
149+
}
150+
151+
/* Completed and Active States */
152+
.timeline-item[data-state="completed"] .timeline-content {
153+
background-color: var(--success-light);
154+
border-left: 4px solid var(--success);
155+
color: var(--success-dark);
156+
}
157+
158+
.timeline-item[data-state="completed"] .timeline-description {
159+
color: var(--success-dark);
160+
}
161+
162+
.timeline-item[data-state="active"] .timeline-content {
163+
background-color: var(--primary-light);
164+
border-left: 4px solid var(--primary);
165+
color: var(--primary-dark);
166+
}
167+
168+
.timeline-item[data-state="active"] .timeline-description {
169+
color: var(--primary-dark);
170+
}
171+
172+
/* Responsive Adjustments */
173+
@media (max-width: 768px) {
174+
.timeline {
175+
padding: var(--space-4) 0;
176+
max-width: 95%;
177+
margin-left: auto;
178+
margin-right: auto;
179+
}
180+
181+
.timeline-item::before {
182+
left: -clamp(80px, 10vw, 120px);
183+
width: clamp(80px, 10vw, 100px);
184+
font-size: clamp(0.7rem, 1vw, 0.875rem);
185+
}
186+
187+
.timeline-item {
188+
margin-left: var(--space-8);
189+
}
190+
191+
.timeline-content {
192+
padding: clamp(var(--space-2), 1.5vw, var(--space-3));
193+
}
194+
195+
.timeline-title {
196+
font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
197+
}
198+
199+
.timeline-description {
200+
font-size: clamp(0.75rem, 1vw, 0.875rem);
201+
}
202+
}

‎css/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,5 @@
3737
@import './components/dropdown.css';
3838
@import './components/pagination.css';
3939
@import './components/stat-metrics.css';
40+
@import './components/timeline.css';
4041

‎demo.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1119,6 +1119,70 @@ <h2 class="font-lg text-primary my-4">Stat Box Component Demo</h2>
11191119
<div class="change" data-change="neutral">+0%</div>
11201120
</section>
11211121
</section>
1122+
1123+
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1124+
<h2 class="font-lg text-primary my-4">Timeline Component Demo</h2>
1125+
1126+
<section class="timeline" data-variant="primary" data-scroll="true">
1127+
<div class="timeline-item" data-date="2023-01-01" data-state="completed">
1128+
<div class="timeline-content">
1129+
<h3 class="timeline-title">Project Initiation</h3>
1130+
<p class="timeline-description">The project was officially initiated, and initial planning began.</p>
1131+
</div>
1132+
</div>
1133+
<div class="timeline-item" data-date="2023-03-15">
1134+
<div class="timeline-content">
1135+
<h3 class="timeline-title">Phase 1 Completion</h3>
1136+
<p class="timeline-description">Completion of phase 1 with significant milestones achieved.</p>
1137+
</div>
1138+
</div>
1139+
<div class="timeline-item" data-date="2023-06-30">
1140+
<div class="timeline-content">
1141+
<h3 class="timeline-title">Phase 2 Kickoff</h3>
1142+
<p class="timeline-description">The project moves into phase 2 with updated goals and deliverables.</p>
1143+
</div>
1144+
</div>
1145+
<div class="timeline-item" data-date="2023-09-30" data-state="active">
1146+
<div class="timeline-content">
1147+
<h3 class="timeline-title">Current Development</h3>
1148+
<p class="timeline-description">Active development stage with ongoing updates and improvements.</p>
1149+
</div>
1150+
</div>
1151+
<div class="timeline-item" data-date="2023-12-31">
1152+
<div class="timeline-content">
1153+
<h3 class="timeline-title">Project Completion</h3>
1154+
<p class="timeline-description">The project is scheduled for completion, with final deliverables submitted.</p>
1155+
</div>
1156+
</div>
1157+
</section>
1158+
1159+
<section class="timeline" data-variant="success">
1160+
<div class="timeline-item" data-date="2023-01-01" data-state="completed">
1161+
<div class="timeline-content">
1162+
<h3 class="timeline-title">Idea Development</h3>
1163+
<p class="timeline-description">The initial idea was developed, and key objectives were outlined.</p>
1164+
</div>
1165+
</div>
1166+
<div class="timeline-item" data-date="2023-02-15">
1167+
<div class="timeline-content">
1168+
<h3 class="timeline-title">Prototype Created</h3>
1169+
<p class="timeline-description">A prototype was created to visualize the project’s potential.</p>
1170+
</div>
1171+
</div>
1172+
<div class="timeline-item" data-date="2023-04-01">
1173+
<div class="timeline-content">
1174+
<h3 class="timeline-title">Market Testing</h3>
1175+
<p class="timeline-description">Initial market testing was conducted with positive feedback.</p>
1176+
</div>
1177+
</div>
1178+
<div class="timeline-item" data-date="2023-06-01" data-state="active">
1179+
<div class="timeline-content">
1180+
<h3 class="timeline-title">Final Product Development</h3>
1181+
<p class="timeline-description">Currently refining the product based on user feedback and data.</p>
1182+
</div>
1183+
</div>
1184+
</section>
1185+
</section>
11221186

11231187
</body>
11241188
<script type="module" src="js/main.js"></script>

0 commit comments

Comments
 (0)