@archerjessop/utilities 4.4.0 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles/base.css +1 -1
- package/dist/styles/components.css +157 -43
- package/package.json +1 -1
package/dist/styles/base.css
CHANGED
|
@@ -42,6 +42,53 @@
|
|
|
42
42
|
flex-shrink: 0;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
/* ===== METRICS GRID ===== */
|
|
46
|
+
|
|
47
|
+
.metrics-grid {
|
|
48
|
+
display: grid;
|
|
49
|
+
grid-template-columns: repeat(9, 1fr);
|
|
50
|
+
gap: var(--grid-gap);
|
|
51
|
+
font-size: var(--font-size-md);
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.metric-column {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
gap: var(--spacing-md);
|
|
59
|
+
min-width: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.metric {
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
gap: var(--spacing-xs);
|
|
66
|
+
min-width: 0;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
padding: var(--spacing-sm);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.metric-label {
|
|
72
|
+
font-weight: var(--font-weight-medium);
|
|
73
|
+
color: var(--text-secondary);
|
|
74
|
+
font-size: var(--font-size-sm);
|
|
75
|
+
text-transform: uppercase;
|
|
76
|
+
letter-spacing: 0.5px;
|
|
77
|
+
white-space: nowrap;
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
text-overflow: ellipsis;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.metric-value {
|
|
83
|
+
font-weight: var(--font-weight-semibold);
|
|
84
|
+
font-size: var(--font-size-lg);
|
|
85
|
+
white-space: nowrap;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
text-overflow: ellipsis;
|
|
88
|
+
color: var(--text-primary);
|
|
89
|
+
line-height: 1.2;
|
|
90
|
+
}
|
|
91
|
+
|
|
45
92
|
/* ===== FORM CONTROLS ===== */
|
|
46
93
|
|
|
47
94
|
.dropdown {
|
|
@@ -94,58 +141,63 @@
|
|
|
94
141
|
fill: currentColor;
|
|
95
142
|
}
|
|
96
143
|
|
|
97
|
-
/* =====
|
|
144
|
+
/* ===== GENERIC UTILITY CLASSES ===== */
|
|
98
145
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
gap: var(--grid-gap);
|
|
103
|
-
font-size: var(--font-size-md);
|
|
104
|
-
width: 100%;
|
|
146
|
+
/* Color utilities */
|
|
147
|
+
.color-primary {
|
|
148
|
+
color: var(--color-primary) !important;
|
|
105
149
|
}
|
|
106
150
|
|
|
107
|
-
.
|
|
108
|
-
|
|
109
|
-
flex-direction: column;
|
|
110
|
-
gap: var(--spacing-md);
|
|
111
|
-
min-width: 0;
|
|
151
|
+
.color-primary:hover {
|
|
152
|
+
color: var(--color-primary-hover) !important;
|
|
112
153
|
}
|
|
113
154
|
|
|
114
|
-
.
|
|
115
|
-
|
|
116
|
-
flex-direction: column;
|
|
117
|
-
gap: var(--spacing-xs);
|
|
118
|
-
min-width: 0;
|
|
119
|
-
overflow: hidden;
|
|
120
|
-
padding: var(--spacing-sm);
|
|
155
|
+
.color-danger {
|
|
156
|
+
color: var(--color-danger) !important;
|
|
121
157
|
}
|
|
122
158
|
|
|
123
|
-
.
|
|
124
|
-
|
|
125
|
-
color: var(--text-secondary);
|
|
126
|
-
font-size: var(--font-size-sm);
|
|
127
|
-
text-transform: uppercase;
|
|
128
|
-
letter-spacing: 0.5px;
|
|
129
|
-
white-space: nowrap;
|
|
130
|
-
overflow: hidden;
|
|
131
|
-
text-overflow: ellipsis;
|
|
159
|
+
.color-warning {
|
|
160
|
+
color: var(--color-warning) !important;
|
|
132
161
|
}
|
|
133
162
|
|
|
134
|
-
.
|
|
135
|
-
|
|
136
|
-
font-size: var(--font-size-lg);
|
|
137
|
-
white-space: nowrap;
|
|
138
|
-
overflow: hidden;
|
|
139
|
-
text-overflow: ellipsis;
|
|
140
|
-
color: var(--text-primary);
|
|
141
|
-
line-height: 1.2;
|
|
163
|
+
.color-success {
|
|
164
|
+
color: var(--color-success) !important;
|
|
142
165
|
}
|
|
143
166
|
|
|
144
|
-
/*
|
|
167
|
+
/* Weight utilities */
|
|
168
|
+
.weight-normal {
|
|
169
|
+
font-weight: var(--font-weight-normal) !important;
|
|
170
|
+
}
|
|
145
171
|
|
|
146
|
-
.
|
|
172
|
+
.weight-medium {
|
|
173
|
+
font-weight: var(--font-weight-medium) !important;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.weight-semibold {
|
|
177
|
+
font-weight: var(--font-weight-semibold) !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Interactive behaviors */
|
|
181
|
+
.interactive {
|
|
182
|
+
cursor: pointer !important;
|
|
183
|
+
color: var(--color-primary) !important;
|
|
184
|
+
transition: color 0.2s ease;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.interactive:hover {
|
|
188
|
+
color: var(--color-primary-hover) !important;
|
|
189
|
+
text-decoration: underline;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.clickable-not-selectable {
|
|
147
193
|
cursor: pointer;
|
|
194
|
+
user-select: none;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.clickable {
|
|
198
|
+
cursor: pointer !important;
|
|
148
199
|
color: var(--color-primary) !important;
|
|
200
|
+
transition: color 0.2s ease;
|
|
149
201
|
}
|
|
150
202
|
|
|
151
203
|
.clickable:hover {
|
|
@@ -153,6 +205,53 @@
|
|
|
153
205
|
text-decoration: underline;
|
|
154
206
|
}
|
|
155
207
|
|
|
208
|
+
/* Position utilities for indicators */
|
|
209
|
+
.has-indicator {
|
|
210
|
+
position: relative !important;
|
|
211
|
+
padding-right: 18px !important;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* Triangle indicators */
|
|
215
|
+
.triangle-down::after {
|
|
216
|
+
content: "";
|
|
217
|
+
position: absolute;
|
|
218
|
+
right: 2px;
|
|
219
|
+
top: 50%;
|
|
220
|
+
transform: translateY(-50%);
|
|
221
|
+
width: 0;
|
|
222
|
+
height: 0;
|
|
223
|
+
border-left: 4px solid transparent;
|
|
224
|
+
border-right: 4px solid transparent;
|
|
225
|
+
border-top: 6px solid currentColor;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.triangle-up::after {
|
|
229
|
+
content: "";
|
|
230
|
+
position: absolute;
|
|
231
|
+
right: 2px;
|
|
232
|
+
top: 50%;
|
|
233
|
+
transform: translateY(-50%);
|
|
234
|
+
width: 0;
|
|
235
|
+
height: 0;
|
|
236
|
+
border-left: 4px solid transparent;
|
|
237
|
+
border-right: 4px solid transparent;
|
|
238
|
+
border-bottom: 6px solid currentColor;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.triangle-right::after {
|
|
242
|
+
content: "";
|
|
243
|
+
position: absolute;
|
|
244
|
+
right: 2px;
|
|
245
|
+
top: 50%;
|
|
246
|
+
transform: translateY(-50%);
|
|
247
|
+
width: 0;
|
|
248
|
+
height: 0;
|
|
249
|
+
border-top: 4px solid transparent;
|
|
250
|
+
border-bottom: 4px solid transparent;
|
|
251
|
+
border-left: 6px solid currentColor;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* Loading state */
|
|
156
255
|
.loading {
|
|
157
256
|
color: var(--color-warning) !important;
|
|
158
257
|
position: relative;
|
|
@@ -160,17 +259,22 @@
|
|
|
160
259
|
|
|
161
260
|
.loading::after {
|
|
162
261
|
content: "•••";
|
|
163
|
-
animation: pulse 1.5s ease-in-out infinite;
|
|
262
|
+
animation: loading-pulse 1.5s ease-in-out infinite;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
@keyframes loading-pulse {
|
|
266
|
+
0%, 100% { opacity: 0.3; }
|
|
267
|
+
50% { opacity: 1; }
|
|
164
268
|
}
|
|
165
269
|
|
|
270
|
+
/* State modifiers */
|
|
166
271
|
.negative {
|
|
167
272
|
color: var(--color-danger) !important;
|
|
168
|
-
font-weight: var(--font-weight-semibold);
|
|
273
|
+
font-weight: var(--font-weight-semibold) !important;
|
|
169
274
|
}
|
|
170
275
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
50% { opacity: 1; }
|
|
276
|
+
.positive {
|
|
277
|
+
color: var(--color-success) !important;
|
|
174
278
|
}
|
|
175
279
|
|
|
176
280
|
/* ===== RESPONSIVE DESIGN ===== */
|
|
@@ -218,4 +322,14 @@
|
|
|
218
322
|
.btn-primary {
|
|
219
323
|
justify-content: center;
|
|
220
324
|
}
|
|
325
|
+
|
|
326
|
+
.has-indicator {
|
|
327
|
+
padding-right: 15px !important;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.triangle-down::after,
|
|
331
|
+
.triangle-up::after,
|
|
332
|
+
.triangle-right::after {
|
|
333
|
+
right: 0px;
|
|
334
|
+
}
|
|
221
335
|
}
|