Skip to content

Commit 41d123b

Browse files
OhsweddOhswedd
committed
Close #44 
1 parent 7236987 commit 41d123b

File tree

3 files changed

+198
-0
lines changed

3 files changed

+198
-0
lines changed

‎css/components/stepper.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/* Base Stepper Container */
2+
.stepper {
3+
display: flex;
4+
gap: var(--space-6);
5+
padding: var(--space-4) 0;
6+
width: 100%;
7+
color: var(--neutral-700);
8+
}
9+
10+
.stepper[data-orientation="vertical"] {
11+
flex-direction: column;
12+
align-items: flex-start;
13+
}
14+
15+
/* Step Styling */
16+
.step {
17+
display: flex;
18+
align-items: center;
19+
gap: var(--space-3);
20+
position: relative;
21+
font-family: var(--font-sans);
22+
}
23+
24+
.step:not(:last-child) .step-bar {
25+
display: block;
26+
}
27+
28+
/* Step Icon */
29+
.step-icon {
30+
display: inline-flex;
31+
align-items: center;
32+
justify-content: center;
33+
font-size: clamp(0.875rem, 1.5vw, 1rem);
34+
font-weight: bold;
35+
width: clamp(2.2rem, 4vw, 2.5rem);
36+
height: clamp(2.2rem, 4vw, 2.5rem);
37+
border-radius: 50%;
38+
background-color: var(--neutral-300);
39+
color: var(--neutral-700);
40+
box-shadow: var(--shadow-md);
41+
transition: var(--transition-all);
42+
position: relative;
43+
}
44+
45+
/* Step Label */
46+
.step-label {
47+
font-size: clamp(0.875rem, 1vw, 1rem);
48+
font-weight: 500;
49+
color: var(--neutral-800);
50+
transition: var(--transition-colors);
51+
}
52+
53+
/* Step Bar - Horizontal and Vertical Orientation */
54+
.step-bar {
55+
flex-grow: 1;
56+
height: 3px;
57+
background-color: var(--neutral-300);
58+
transition: background-color 0.3s ease;
59+
}
60+
61+
.stepper[data-orientation="vertical"] .step-bar {
62+
height: auto;
63+
width: 3px;
64+
align-self: stretch;
65+
}
66+
67+
/* State Styling for Completed, Active, and Pending */
68+
.step[data-state="completed"] .step-icon {
69+
background-color: var(--primary);
70+
color: var(--primary-text);
71+
box-shadow: var(--primary-shadow);
72+
}
73+
74+
.step[data-state="completed"] .step-bar {
75+
background-color: var(--primary);
76+
}
77+
78+
.step[data-state="completed"] .step-label {
79+
color: var(--primary-dark);
80+
}
81+
82+
.step[data-state="active"] .step-icon {
83+
border: 2px solid var(--primary-hover);
84+
color: var(--primary-hover);
85+
}
86+
87+
.step[data-state="pending"] .step-icon {
88+
background-color: var(--neutral-200);
89+
color: var(--neutral-500);
90+
}
91+
92+
/* Variant Styling */
93+
.stepper[data-variant="primary"] .step[data-state="completed"] .step-icon,
94+
.stepper[data-variant="primary"] .step[data-state="completed"] .step-bar {
95+
background-color: var(--primary);
96+
color: var(--primary-text);
97+
box-shadow: var(--primary-shadow);
98+
}
99+
100+
.stepper[data-variant="secondary"] .step[data-state="completed"] .step-icon,
101+
.stepper[data-variant="secondary"] .step[data-state="completed"] .step-bar {
102+
background-color: var(--secondary);
103+
color: var(--secondary-text);
104+
box-shadow: var(--secondary-shadow);
105+
}
106+
107+
/* Additional Variants: Success, Warning, Danger, Info, Accent */
108+
.stepper[data-variant="success"] .step[data-state="completed"] .step-icon,
109+
.stepper[data-variant="success"] .step[data-state="completed"] .step-bar {
110+
background-color: var(--success);
111+
color: var(--success-text);
112+
box-shadow: var(--success-shadow);
113+
}
114+
115+
.stepper[data-variant="warning"] .step[data-state="completed"] .step-icon,
116+
.stepper[data-variant="warning"] .step[data-state="completed"] .step-bar {
117+
background-color: var(--warning);
118+
color: var(--warning-text);
119+
box-shadow: var(--warning-shadow);
120+
}
121+
122+
.stepper[data-variant="danger"] .step[data-state="completed"] .step-icon,
123+
.stepper[data-variant="danger"] .step[data-state="completed"] .step-bar {
124+
background-color: var(--danger);
125+
color: var(--danger-text);
126+
box-shadow: var(--danger-shadow);
127+
}
128+
129+
.stepper[data-variant="info"] .step[data-state="completed"] .step-icon,
130+
.stepper[data-variant="info"] .step[data-state="completed"] .step-bar {
131+
background-color: var(--info);
132+
color: var(--info-text);
133+
box-shadow: var(--info-shadow);
134+
}
135+
136+
.stepper[data-variant="accent"] .step[data-state="completed"] .step-icon,
137+
.stepper[data-variant="accent"] .step[data-state="completed"] .step-bar {
138+
background-color: var(--accent);
139+
color: var(--accent-text);
140+
box-shadow: var(--accent-shadow);
141+
}
142+
143+
/* Responsive Adjustments */
144+
@media (max-width: 768px) {
145+
.stepper {
146+
flex-direction: column;
147+
}
148+
.step-bar {
149+
display: none;
150+
}
151+
.step {
152+
text-align: center;
153+
}
154+
.step-label {
155+
font-size: clamp(0.75rem, 1vw, 0.875rem);
156+
}
157+
}

‎css/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,5 @@
4040
@import './components/timeline.css';
4141
@import './components/rating.css';
4242
@import './components/fab.css';
43+
@import './components/stepper.css';
4344

‎demo.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1206,6 +1206,46 @@ <h2 class="font-lg text-primary my-4">Rating Component Demo</h2>
12061206
<span class="star" role="button" tabindex="0">★</span>
12071207
</div>
12081208
</section>
1209+
1210+
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1211+
<h2 class="font-lg text-primary my-4">Stepper Component Showcase</h2>
1212+
1213+
<!-- Horizontal Stepper -->
1214+
<div class="stepper" data-variant="primary">
1215+
<div class="step" data-state="completed">
1216+
<div class="step-icon">1</div>
1217+
<div class="step-label">Step 1</div>
1218+
<div class="step-bar"></div>
1219+
</div>
1220+
<div class="step" data-state="active">
1221+
<div class="step-icon">2</div>
1222+
<div class="step-label">Step 2</div>
1223+
<div class="step-bar"></div>
1224+
</div>
1225+
<div class="step" data-state="pending">
1226+
<div class="step-icon">3</div>
1227+
<div class="step-label">Step 3</div>
1228+
</div>
1229+
</div>
1230+
1231+
<!-- Vertical Stepper -->
1232+
<div class="stepper" data-orientation="vertical" data-variant="success">
1233+
<div class="step" data-state="completed">
1234+
<div class="step-icon">1</div>
1235+
<div class="step-label">Step 1</div>
1236+
<div class="step-bar"></div>
1237+
</div>
1238+
<div class="step" data-state="active">
1239+
<div class="step-icon">2</div>
1240+
<div class="step-label">Step 2</div>
1241+
<div class="step-bar"></div>
1242+
</div>
1243+
<div class="step" data-state="pending">
1244+
<div class="step-icon">3</div>
1245+
<div class="step-label">Step 3</div>
1246+
</div>
1247+
</div>
1248+
</section>
12091249

12101250
</body>
12111251
<script type="module" src="js/main.js"></script>

0 commit comments

Comments
 (0)