Skip to content

Commit ad229f0

Browse files
OhsweddOhswedd
committed
Close #40 
1 parent 6dbf27c commit ad229f0

File tree

3 files changed

+205
-0
lines changed

3 files changed

+205
-0
lines changed

‎css/components/stat-metrics.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/* Enhanced Base styling for Stat/Metric Boxes */
2+
.stat-box {
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
justify-content: center;
7+
padding: clamp(var(--space-4), 2vw, var(--space-6));
8+
border-radius: var(--radius-lg);
9+
background-color: var(--neutral-50);
10+
box-shadow: var(--shadow-md);
11+
transition: var(--transition-all);
12+
text-align: center;
13+
max-width: 350px;
14+
gap: clamp(var(--space-2), 2vw, var(--space-4));
15+
margin: var(--space-4) auto;
16+
}
17+
18+
/* Hover and Focus States for improved UI feedback */
19+
.stat-box:hover {
20+
background-color: var(--neutral-100);
21+
box-shadow: var(--shadow-lg);
22+
transform: translateY(-2px);
23+
}
24+
25+
.stat-box:focus-within {
26+
outline: 2px solid var(--primary);
27+
}
28+
29+
/* Icon Styling */
30+
.stat-box .icon {
31+
font-size: clamp(2.5rem, 5vw, 4rem);
32+
color: var(--neutral-800);
33+
}
34+
35+
/* Title and Value Styling */
36+
.stat-box .title {
37+
font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
38+
font-weight: 500;
39+
color: var(--neutral-900);
40+
margin-bottom: var(--space-1);
41+
}
42+
43+
.stat-box .value {
44+
font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
45+
font-weight: 700;
46+
color: var(--neutral-900);
47+
}
48+
49+
/* Change Indicator */
50+
.stat-box .change {
51+
display: flex;
52+
align-items: center;
53+
gap: var(--space-1);
54+
font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
55+
font-weight: 500;
56+
}
57+
58+
/* Enhanced Color Variants for better contrast */
59+
.stat-box[data-variant="primary"] {
60+
background-color: var(--primary-bg);
61+
color: var(--primary-text);
62+
box-shadow: var(--primary-shadow);
63+
}
64+
65+
.stat-box[data-variant="secondary"] {
66+
background-color: var(--secondary-bg);
67+
color: var(--secondary-text);
68+
box-shadow: var(--secondary-shadow);
69+
}
70+
71+
.stat-box[data-variant="accent"] {
72+
background-color: var(--accent-bg);
73+
color: var(--accent-text);
74+
box-shadow: var(--accent-shadow);
75+
}
76+
77+
.stat-box[data-variant="success"] {
78+
background-color: var(--success-bg);
79+
color: var(--success-text);
80+
box-shadow: var(--success-shadow);
81+
}
82+
83+
.stat-box[data-variant="warning"] {
84+
background-color: var(--warning-bg);
85+
color: var(--warning-text);
86+
box-shadow: var(--warning-shadow);
87+
}
88+
89+
.stat-box[data-variant="danger"] {
90+
background-color: var(--danger-bg);
91+
color: var(--danger-text);
92+
box-shadow: var(--danger-shadow);
93+
}
94+
95+
.stat-box[data-variant="info"] {
96+
background-color: var(--info-bg);
97+
color: var(--info-text);
98+
box-shadow: var(--info-shadow);
99+
}
100+
101+
/* Change Indicator Colors */
102+
.stat-box .change[data-change="positive"] {
103+
color: var(--success);
104+
}
105+
106+
.stat-box .change[data-change="negative"] {
107+
color: var(--danger);
108+
}
109+
110+
/* Layout Variations */
111+
.stat-box[data-layout="horizontal"] {
112+
flex-direction: row;
113+
align-items: center;
114+
gap: var(--space-4);
115+
text-align: left;
116+
padding: clamp(var(--space-3), 1vw, var(--space-4));
117+
}
118+
119+
.stat-box[data-layout="horizontal"] .icon {
120+
font-size: clamp(2rem, 3vw, 2.5rem);
121+
}
122+
123+
.stat-box[data-layout="compact"] {
124+
padding: var(--space-2);
125+
max-width: 250px;
126+
gap: var(--space-2);
127+
}
128+
129+
.stat-box[data-layout="expanded"] {
130+
padding: clamp(var(--space-6), 3vw, var(--space-8));
131+
max-width: 450px;
132+
box-shadow: var(--shadow-xl);
133+
}
134+
135+
/* Additional Shadow Options */
136+
.stat-box[data-shadow="sm"] {
137+
box-shadow: var(--shadow-sm);
138+
}
139+
140+
.stat-box[data-shadow="lg"] {
141+
box-shadow: var(--shadow-lg);
142+
}
143+
144+
.stat-box[data-shadow="none"] {
145+
box-shadow: none;
146+
}
147+
148+
/* Border-radius Options */
149+
.stat-box[data-radius="sm"] {
150+
border-radius: var(--radius-sm);
151+
}
152+
153+
.stat-box[data-radius="full"] {
154+
border-radius: var(--radius-full);
155+
}
156+
157+
/* Responsive Typography Adjustments */
158+
@media (max-width: 600px) {
159+
.stat-box {
160+
padding: var(--space-3);
161+
max-width: 90%;
162+
}
163+
.stat-box .title {
164+
font-size: clamp(0.875rem, 2vw, 1rem);
165+
}
166+
.stat-box .value {
167+
font-size: clamp(1.5rem, 4vw, 2rem);
168+
}
169+
.stat-box[data-layout="horizontal"] {
170+
flex-direction: column;
171+
align-items: center;
172+
}
173+
}

‎css/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,5 @@
3636
@import './components/slideshow.css';
3737
@import './components/dropdown.css';
3838
@import './components/pagination.css';
39+
@import './components/stat-metrics.css';
3940

‎demo.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1088,6 +1088,37 @@ <h2 class="font-lg text-primary my-4">Pagination Component Demo</h2>
10881088
<button class="pagination-button" aria-label="Next page">Next</button>
10891089
</div>
10901090
</section>
1091+
1092+
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1093+
<h2 class="font-lg text-primary my-4">Stat Box Component Demo</h2>
1094+
<section class="stat-box" data-variant="primary" data-layout="vertical" data-shadow="lg" tabindex="0" aria-label="Monthly Sales">
1095+
<div class="icon">💵</div>
1096+
<div class="title">Monthly Sales</div>
1097+
<div class="value">$35,000</div>
1098+
<div class="change" data-change="positive">+12%</div>
1099+
</section>
1100+
1101+
<section class="stat-box" data-variant="success" data-layout="horizontal" data-shadow="sm" aria-label="Active Users">
1102+
<div class="icon">👥</div>
1103+
<div class="title">Active Users</div>
1104+
<div class="value">5,720</div>
1105+
<div class="change" data-change="positive">+5%</div>
1106+
</section>
1107+
1108+
<section class="stat-box" data-variant="danger" data-layout="expanded" data-radius="full" aria-label="Churn Rate">
1109+
<div class="icon">⚠️</div>
1110+
<div class="title">Churn Rate</div>
1111+
<div class="value">8%</div>
1112+
<div class="change" data-change="negative">-2%</div>
1113+
</section>
1114+
1115+
<section class="stat-box" data-variant="warning" data-layout="compact" aria-label="Pending Tickets">
1116+
<div class="icon">📩</div>
1117+
<div class="title">Pending Tickets</div>
1118+
<div class="value">27</div>
1119+
<div class="change" data-change="neutral">+0%</div>
1120+
</section>
1121+
</section>
10911122

10921123
</body>
10931124
<script type="module" src="js/main.js"></script>

0 commit comments

Comments
 (0)