@elsapiens/styles 0.1.0 → 0.1.3
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/app.css +503 -0
- package/dist/components.css +18 -3
- package/package.json +11 -7
package/dist/app.css
ADDED
|
@@ -0,0 +1,503 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* elSapiens SDK - Application Styles
|
|
3
|
+
*
|
|
4
|
+
* This file provides the complete styling setup for elSapiens applications.
|
|
5
|
+
* Import this in your app's main CSS file before Tailwind directives.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* @import '@elsapiens/styles/app';
|
|
9
|
+
* @tailwind base;
|
|
10
|
+
* @tailwind components;
|
|
11
|
+
* @tailwind utilities;
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/* Google Fonts - Inter for UI text, JetBrains Mono for code */
|
|
15
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
16
|
+
|
|
17
|
+
/* Import SDK core styles - using package paths for compatibility when installed as dependency */
|
|
18
|
+
@import '@elsapiens/styles/variables';
|
|
19
|
+
@import '@elsapiens/styles/color-schemes';
|
|
20
|
+
@import '@elsapiens/styles/backgrounds';
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Semantic Colors - Light Mode
|
|
24
|
+
* Maps semantic color tokens to the active color scheme (wisteria by default)
|
|
25
|
+
*/
|
|
26
|
+
@layer base {
|
|
27
|
+
:root {
|
|
28
|
+
/* Background and Foreground */
|
|
29
|
+
--background: 220 30% 98%;
|
|
30
|
+
--foreground: var(--wisteria-900);
|
|
31
|
+
--foreground-secondary: var(--wisteria-500);
|
|
32
|
+
|
|
33
|
+
/* Card */
|
|
34
|
+
--card: 0 0% 100%;
|
|
35
|
+
--card-foreground: var(--wisteria-900);
|
|
36
|
+
|
|
37
|
+
/* Popover */
|
|
38
|
+
--popover: 0 0% 100%;
|
|
39
|
+
--popover-foreground: var(--wisteria-900);
|
|
40
|
+
|
|
41
|
+
/* Primary */
|
|
42
|
+
--primary: var(--wisteria-500);
|
|
43
|
+
--primary-foreground: 0 0% 100%;
|
|
44
|
+
|
|
45
|
+
/* Secondary */
|
|
46
|
+
--secondary: var(--wisteria-100);
|
|
47
|
+
--secondary-foreground: var(--wisteria-800);
|
|
48
|
+
|
|
49
|
+
/* Muted */
|
|
50
|
+
--muted: var(--wisteria-100);
|
|
51
|
+
--muted-foreground: var(--wisteria-400);
|
|
52
|
+
|
|
53
|
+
/* Accent */
|
|
54
|
+
--accent: var(--wisteria-100);
|
|
55
|
+
--accent-foreground: var(--wisteria-800);
|
|
56
|
+
|
|
57
|
+
/* Destructive */
|
|
58
|
+
--destructive: 0 84% 60%;
|
|
59
|
+
--destructive-foreground: 0 0% 100%;
|
|
60
|
+
|
|
61
|
+
/* Border, Input, Ring */
|
|
62
|
+
--border: var(--wisteria-200);
|
|
63
|
+
--input: var(--wisteria-200);
|
|
64
|
+
--ring: var(--wisteria-500);
|
|
65
|
+
|
|
66
|
+
/* Border Radius */
|
|
67
|
+
--radius: 0.5rem;
|
|
68
|
+
|
|
69
|
+
/* Status colors */
|
|
70
|
+
--success: 142 71% 45%;
|
|
71
|
+
--warning: 38 92% 50%;
|
|
72
|
+
--error: 0 84% 60%;
|
|
73
|
+
--info: var(--wisteria-500);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Semantic Colors - Dark Mode
|
|
78
|
+
*/
|
|
79
|
+
.dark {
|
|
80
|
+
--background: var(--wisteria-950);
|
|
81
|
+
--foreground: var(--wisteria-50);
|
|
82
|
+
--foreground-secondary: var(--wisteria-400);
|
|
83
|
+
|
|
84
|
+
--card: var(--wisteria-900);
|
|
85
|
+
--card-foreground: var(--wisteria-50);
|
|
86
|
+
|
|
87
|
+
--popover: var(--wisteria-900);
|
|
88
|
+
--popover-foreground: var(--wisteria-50);
|
|
89
|
+
|
|
90
|
+
--primary: var(--wisteria-400);
|
|
91
|
+
--primary-foreground: var(--wisteria-950);
|
|
92
|
+
|
|
93
|
+
--secondary: var(--wisteria-800);
|
|
94
|
+
--secondary-foreground: var(--wisteria-100);
|
|
95
|
+
|
|
96
|
+
--muted: var(--wisteria-800);
|
|
97
|
+
--muted-foreground: var(--wisteria-400);
|
|
98
|
+
|
|
99
|
+
--accent: var(--wisteria-800);
|
|
100
|
+
--accent-foreground: var(--wisteria-100);
|
|
101
|
+
|
|
102
|
+
--destructive: 0 62% 50%;
|
|
103
|
+
--destructive-foreground: 0 0% 100%;
|
|
104
|
+
|
|
105
|
+
--border: var(--wisteria-700);
|
|
106
|
+
--input: var(--wisteria-700);
|
|
107
|
+
--ring: var(--wisteria-400);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Application Base Styles
|
|
113
|
+
*/
|
|
114
|
+
@layer base {
|
|
115
|
+
* {
|
|
116
|
+
@apply border-border;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
html {
|
|
120
|
+
font-size: 16px;
|
|
121
|
+
-webkit-font-smoothing: antialiased;
|
|
122
|
+
-moz-osx-font-smoothing: grayscale;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
body {
|
|
126
|
+
@apply bg-background text-foreground;
|
|
127
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
128
|
+
line-height: 1.5;
|
|
129
|
+
height: 100vh;
|
|
130
|
+
overflow: hidden;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
#root {
|
|
134
|
+
height: 100%;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Focus styles for accessibility */
|
|
138
|
+
:focus-visible {
|
|
139
|
+
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Monospace for numbers and code */
|
|
143
|
+
code, kbd, pre, samp, .font-mono {
|
|
144
|
+
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Application Component Styles
|
|
150
|
+
* These are convenience classes that use the wisteria color scheme directly
|
|
151
|
+
*/
|
|
152
|
+
@layer components {
|
|
153
|
+
/* Primary Button */
|
|
154
|
+
.btn-primary {
|
|
155
|
+
@apply bg-wisteria-500 text-white px-3 py-2 rounded-md font-medium
|
|
156
|
+
hover:bg-wisteria-600 active:bg-wisteria-700
|
|
157
|
+
focus-visible:ring-2 focus-visible:ring-wisteria-500 focus-visible:ring-offset-2
|
|
158
|
+
disabled:opacity-50 disabled:cursor-not-allowed
|
|
159
|
+
transition-colors duration-150;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Secondary Button */
|
|
163
|
+
.btn-secondary {
|
|
164
|
+
@apply bg-wisteria-100 text-wisteria-800 px-3 py-2 rounded-md font-medium
|
|
165
|
+
hover:bg-wisteria-200 active:bg-wisteria-300
|
|
166
|
+
dark:bg-wisteria-800 dark:text-wisteria-100
|
|
167
|
+
dark:hover:bg-wisteria-700 dark:active:bg-wisteria-600
|
|
168
|
+
transition-colors duration-150;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Ghost Button */
|
|
172
|
+
.btn-ghost {
|
|
173
|
+
@apply text-wisteria-600 px-3 py-2 rounded-md font-medium
|
|
174
|
+
hover:bg-wisteria-100 active:bg-wisteria-200
|
|
175
|
+
dark:text-wisteria-300 dark:hover:bg-wisteria-800
|
|
176
|
+
transition-colors duration-150;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* Card */
|
|
180
|
+
.card {
|
|
181
|
+
@apply bg-white dark:bg-wisteria-900 rounded-lg shadow-sm
|
|
182
|
+
border border-wisteria-200 dark:border-wisteria-700
|
|
183
|
+
overflow-hidden;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Form Input */
|
|
187
|
+
.input {
|
|
188
|
+
@apply w-full px-3 py-2 rounded-md border border-wisteria-200
|
|
189
|
+
bg-white dark:bg-wisteria-900
|
|
190
|
+
text-wisteria-900 dark:text-wisteria-50
|
|
191
|
+
placeholder:text-wisteria-300 dark:placeholder:text-wisteria-500
|
|
192
|
+
focus:border-wisteria-500 focus:ring-1 focus:ring-wisteria-500
|
|
193
|
+
disabled:opacity-50 disabled:cursor-not-allowed
|
|
194
|
+
transition-colors duration-150;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Label */
|
|
198
|
+
.label {
|
|
199
|
+
@apply block text-sm font-medium text-wisteria-800 dark:text-wisteria-200 mb-1;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Status Badges */
|
|
203
|
+
.badge {
|
|
204
|
+
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.badge-draft {
|
|
208
|
+
@apply bg-wisteria-100 text-wisteria-700 dark:bg-wisteria-800 dark:text-wisteria-300;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.badge-success {
|
|
212
|
+
@apply bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.badge-warning {
|
|
216
|
+
@apply bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.badge-error {
|
|
220
|
+
@apply bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Skeleton */
|
|
224
|
+
.skeleton {
|
|
225
|
+
@apply bg-wisteria-200 dark:bg-wisteria-700 rounded animate-pulse;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* Empty State */
|
|
229
|
+
.empty-state {
|
|
230
|
+
@apply flex flex-col items-center justify-center py-12 text-center;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.empty-state-icon {
|
|
234
|
+
@apply w-16 h-16 text-wisteria-300 dark:text-wisteria-600 mb-4;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.empty-state-title {
|
|
238
|
+
@apply text-lg font-medium text-wisteria-700 dark:text-wisteria-300 mb-2;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.empty-state-description {
|
|
242
|
+
@apply text-sm text-wisteria-500 dark:text-wisteria-400 max-w-sm;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/**
|
|
247
|
+
* Global Scrollbar Styling
|
|
248
|
+
* Thin scrollbar with theme-matching colors
|
|
249
|
+
*/
|
|
250
|
+
|
|
251
|
+
/* Firefox */
|
|
252
|
+
* {
|
|
253
|
+
scrollbar-width: thin;
|
|
254
|
+
scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.dark * {
|
|
258
|
+
scrollbar-color: hsl(var(--muted-foreground) / 0.5) transparent;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Chrome, Safari, Edge */
|
|
262
|
+
*::-webkit-scrollbar {
|
|
263
|
+
width: 6px;
|
|
264
|
+
height: 6px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
*::-webkit-scrollbar-track {
|
|
268
|
+
background: transparent;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
*::-webkit-scrollbar-thumb {
|
|
272
|
+
background-color: hsl(var(--muted-foreground) / 0.3);
|
|
273
|
+
border-radius: 3px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
277
|
+
background-color: hsl(var(--muted-foreground) / 0.5);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.dark *::-webkit-scrollbar-thumb {
|
|
281
|
+
background-color: hsl(var(--muted-foreground) / 0.4);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.dark *::-webkit-scrollbar-thumb:hover {
|
|
285
|
+
background-color: hsl(var(--muted-foreground) / 0.6);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
*::-webkit-scrollbar-corner {
|
|
289
|
+
background: transparent;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Hide scrollbar but keep functionality */
|
|
293
|
+
@layer utilities {
|
|
294
|
+
.scrollbar-hide {
|
|
295
|
+
-ms-overflow-style: none;
|
|
296
|
+
scrollbar-width: none;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.scrollbar-hide::-webkit-scrollbar {
|
|
300
|
+
display: none;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* Hide native scrollbar - for synced scroll containers (Summary, Table) */
|
|
305
|
+
.hide-native-scrollbar {
|
|
306
|
+
scrollbar-width: none !important;
|
|
307
|
+
-ms-overflow-style: none !important;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.hide-native-scrollbar::-webkit-scrollbar {
|
|
311
|
+
display: none !important;
|
|
312
|
+
width: 0 !important;
|
|
313
|
+
height: 0 !important;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
/* Visible scrollbar for custom scrollbars */
|
|
317
|
+
.scrollbar-visible {
|
|
318
|
+
scrollbar-width: auto;
|
|
319
|
+
scrollbar-color: hsl(var(--border)) hsl(var(--muted) / 0.3);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.scrollbar-visible::-webkit-scrollbar {
|
|
323
|
+
width: 10px;
|
|
324
|
+
height: 10px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.scrollbar-visible::-webkit-scrollbar-track {
|
|
328
|
+
background: hsl(var(--muted) / 0.3);
|
|
329
|
+
border-radius: 5px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.scrollbar-visible::-webkit-scrollbar-thumb {
|
|
333
|
+
background-color: hsl(var(--border));
|
|
334
|
+
border-radius: 5px;
|
|
335
|
+
border: 2px solid hsl(var(--muted) / 0.3);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
|
|
339
|
+
background-color: hsl(var(--muted-foreground));
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/**
|
|
343
|
+
* Adaptive Layout Spacing System
|
|
344
|
+
* Uses CSS variables that respond to data-spacing attribute on html element
|
|
345
|
+
*/
|
|
346
|
+
:root {
|
|
347
|
+
/* Default (normal) spacing values */
|
|
348
|
+
--el-layout-gap-xs: 0.25rem; /* 4px */
|
|
349
|
+
--el-layout-gap-sm: 0.5rem; /* 8px */
|
|
350
|
+
--el-layout-gap-md: 0.75rem; /* 12px */
|
|
351
|
+
--el-layout-gap-lg: 1rem; /* 16px */
|
|
352
|
+
--el-layout-gap-xl: 1.5rem; /* 24px */
|
|
353
|
+
--el-layout-gap-2xl: 2rem; /* 32px */
|
|
354
|
+
--el-field-grid-gap: 2.25rem; /* 36px - Between form fields in grid */
|
|
355
|
+
|
|
356
|
+
/* Component internal spacing */
|
|
357
|
+
--el-tabs-padding: 0.25rem; /* 4px - for switch/tabs pill container */
|
|
358
|
+
--el-tabs-gap: 0.25rem; /* 4px - gap between tabs/switches */
|
|
359
|
+
|
|
360
|
+
/* Layout dimensions */
|
|
361
|
+
--topbar-height: 48px;
|
|
362
|
+
--sidebar-width: 256px;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* Compact spacing mode */
|
|
366
|
+
[data-spacing="compact"] {
|
|
367
|
+
--el-layout-gap-xs: 0.25rem;
|
|
368
|
+
--el-layout-gap-sm: 0.5rem;
|
|
369
|
+
--el-layout-gap-md: 0.75rem;
|
|
370
|
+
--el-layout-gap-lg: 1rem;
|
|
371
|
+
--el-layout-gap-xl: 1.5rem;
|
|
372
|
+
--el-layout-gap-2xl: 2rem;
|
|
373
|
+
--el-field-grid-gap: 1.5rem;
|
|
374
|
+
--el-tabs-padding: 0.25rem;
|
|
375
|
+
--el-tabs-gap: 0.25rem;
|
|
376
|
+
--topbar-height: 40px;
|
|
377
|
+
--sidebar-width: 200px;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* Spacious spacing mode */
|
|
381
|
+
[data-spacing="spacious"] {
|
|
382
|
+
--el-layout-gap-xs: 0.5rem;
|
|
383
|
+
--el-layout-gap-sm: 0.75rem;
|
|
384
|
+
--el-layout-gap-md: 1rem;
|
|
385
|
+
--el-layout-gap-lg: 1.5rem;
|
|
386
|
+
--el-layout-gap-xl: 2rem;
|
|
387
|
+
--el-layout-gap-2xl: 3rem;
|
|
388
|
+
--el-field-grid-gap: 3rem;
|
|
389
|
+
--el-tabs-padding: 0.375rem;
|
|
390
|
+
--el-tabs-gap: 0.375rem;
|
|
391
|
+
--topbar-height: 56px;
|
|
392
|
+
--sidebar-width: 280px;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* Gap utilities
|
|
397
|
+
*/
|
|
398
|
+
.el-gap-xs { gap: var(--el-layout-gap-xs); }
|
|
399
|
+
.el-gap-sm { gap: var(--el-layout-gap-sm); }
|
|
400
|
+
.el-gap-md { gap: var(--el-layout-gap-md); }
|
|
401
|
+
.el-gap-lg { gap: var(--el-layout-gap-lg); }
|
|
402
|
+
.el-gap-xl { gap: var(--el-layout-gap-xl); }
|
|
403
|
+
.el-gap-2xl { gap: var(--el-layout-gap-2xl); }
|
|
404
|
+
|
|
405
|
+
/**
|
|
406
|
+
* Padding utilities
|
|
407
|
+
*/
|
|
408
|
+
.el-p-xs { padding: var(--el-layout-gap-xs); }
|
|
409
|
+
.el-p-sm { padding: var(--el-layout-gap-sm); }
|
|
410
|
+
.el-p-md { padding: var(--el-layout-gap-md); }
|
|
411
|
+
.el-p-lg { padding: var(--el-layout-gap-lg); }
|
|
412
|
+
.el-p-xl { padding: var(--el-layout-gap-xl); }
|
|
413
|
+
.el-p-2xl { padding: var(--el-layout-gap-2xl); }
|
|
414
|
+
|
|
415
|
+
.el-px-xs { padding-left: var(--el-layout-gap-xs); padding-right: var(--el-layout-gap-xs); }
|
|
416
|
+
.el-px-sm { padding-left: var(--el-layout-gap-sm); padding-right: var(--el-layout-gap-sm); }
|
|
417
|
+
.el-px-md { padding-left: var(--el-layout-gap-md); padding-right: var(--el-layout-gap-md); }
|
|
418
|
+
.el-px-lg { padding-left: var(--el-layout-gap-lg); padding-right: var(--el-layout-gap-lg); }
|
|
419
|
+
.el-px-xl { padding-left: var(--el-layout-gap-xl); padding-right: var(--el-layout-gap-xl); }
|
|
420
|
+
.el-px-2xl { padding-left: var(--el-layout-gap-2xl); padding-right: var(--el-layout-gap-2xl); }
|
|
421
|
+
|
|
422
|
+
.el-py-xs { padding-top: var(--el-layout-gap-xs); padding-bottom: var(--el-layout-gap-xs); }
|
|
423
|
+
.el-py-sm { padding-top: var(--el-layout-gap-sm); padding-bottom: var(--el-layout-gap-sm); }
|
|
424
|
+
.el-py-md { padding-top: var(--el-layout-gap-md); padding-bottom: var(--el-layout-gap-md); }
|
|
425
|
+
.el-py-lg { padding-top: var(--el-layout-gap-lg); padding-bottom: var(--el-layout-gap-lg); }
|
|
426
|
+
.el-py-xl { padding-top: var(--el-layout-gap-xl); padding-bottom: var(--el-layout-gap-xl); }
|
|
427
|
+
.el-py-2xl { padding-top: var(--el-layout-gap-2xl); padding-bottom: var(--el-layout-gap-2xl); }
|
|
428
|
+
|
|
429
|
+
/**
|
|
430
|
+
* Space utilities (margin between children)
|
|
431
|
+
*/
|
|
432
|
+
.el-space-y-xs > * + * { margin-top: var(--el-layout-gap-xs); }
|
|
433
|
+
.el-space-y-sm > * + * { margin-top: var(--el-layout-gap-sm); }
|
|
434
|
+
.el-space-y-md > * + * { margin-top: var(--el-layout-gap-md); }
|
|
435
|
+
.el-space-y-lg > * + * { margin-top: var(--el-layout-gap-lg); }
|
|
436
|
+
.el-space-y-xl > * + * { margin-top: var(--el-layout-gap-xl); }
|
|
437
|
+
.el-space-y-2xl > * + * { margin-top: var(--el-layout-gap-2xl); }
|
|
438
|
+
|
|
439
|
+
.el-space-x-xs > * + * { margin-left: var(--el-layout-gap-xs); }
|
|
440
|
+
.el-space-x-sm > * + * { margin-left: var(--el-layout-gap-sm); }
|
|
441
|
+
.el-space-x-md > * + * { margin-left: var(--el-layout-gap-md); }
|
|
442
|
+
.el-space-x-lg > * + * { margin-left: var(--el-layout-gap-lg); }
|
|
443
|
+
.el-space-x-xl > * + * { margin-left: var(--el-layout-gap-xl); }
|
|
444
|
+
.el-space-x-2xl > * + * { margin-left: var(--el-layout-gap-2xl); }
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* Margin utilities
|
|
448
|
+
*/
|
|
449
|
+
.el-mt-xs { margin-top: var(--el-layout-gap-xs); }
|
|
450
|
+
.el-mt-sm { margin-top: var(--el-layout-gap-sm); }
|
|
451
|
+
.el-mt-md { margin-top: var(--el-layout-gap-md); }
|
|
452
|
+
.el-mt-lg { margin-top: var(--el-layout-gap-lg); }
|
|
453
|
+
.el-mt-xl { margin-top: var(--el-layout-gap-xl); }
|
|
454
|
+
.el-mt-2xl { margin-top: var(--el-layout-gap-2xl); }
|
|
455
|
+
|
|
456
|
+
.el-mb-xs { margin-bottom: var(--el-layout-gap-xs); }
|
|
457
|
+
.el-mb-sm { margin-bottom: var(--el-layout-gap-sm); }
|
|
458
|
+
.el-mb-md { margin-bottom: var(--el-layout-gap-md); }
|
|
459
|
+
.el-mb-lg { margin-bottom: var(--el-layout-gap-lg); }
|
|
460
|
+
.el-mb-xl { margin-bottom: var(--el-layout-gap-xl); }
|
|
461
|
+
.el-mb-2xl { margin-bottom: var(--el-layout-gap-2xl); }
|
|
462
|
+
|
|
463
|
+
/**
|
|
464
|
+
* Animations
|
|
465
|
+
*/
|
|
466
|
+
@keyframes slide-in {
|
|
467
|
+
from {
|
|
468
|
+
opacity: 0;
|
|
469
|
+
transform: translateX(100%);
|
|
470
|
+
}
|
|
471
|
+
to {
|
|
472
|
+
opacity: 1;
|
|
473
|
+
transform: translateX(0);
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.animate-slide-in {
|
|
478
|
+
animation: slide-in 0.3s ease-out;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
@keyframes fade-in {
|
|
482
|
+
from { opacity: 0; }
|
|
483
|
+
to { opacity: 1; }
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.animate-fade-in {
|
|
487
|
+
animation: fade-in 0.2s ease-out;
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
@keyframes scale-in {
|
|
491
|
+
from {
|
|
492
|
+
opacity: 0;
|
|
493
|
+
transform: scale(0.95);
|
|
494
|
+
}
|
|
495
|
+
to {
|
|
496
|
+
opacity: 1;
|
|
497
|
+
transform: scale(1);
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.animate-scale-in {
|
|
502
|
+
animation: scale-in 0.2s ease-out;
|
|
503
|
+
}
|
package/dist/components.css
CHANGED
|
@@ -669,9 +669,24 @@
|
|
|
669
669
|
[class*="el-px-"] .el-tabs-list,
|
|
670
670
|
[class*="el-px-"] .el-filter-bar,
|
|
671
671
|
[class*="el-px-"] .el-info {
|
|
672
|
-
margin-inline: calc(var(--el-container-px) * -
|
|
673
|
-
padding-inline:
|
|
674
|
-
width: calc(100% + var(--el-container-px));
|
|
672
|
+
margin-inline: calc(var(--el-container-px) * -1);
|
|
673
|
+
padding-inline: var(--el-container-px);
|
|
674
|
+
width: calc(100% + var(--el-container-px) * 2);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
/* Filter bar first/last in card - extends to card edges with rounded corners */
|
|
678
|
+
[class*="el-p-"] .el-filter-bar-first,
|
|
679
|
+
[class*="el-py-"] .el-filter-bar-first {
|
|
680
|
+
margin-top: calc(var(--el-container-px) * -1);
|
|
681
|
+
border-top-left-radius: var(--el-card-radius);
|
|
682
|
+
border-top-right-radius: var(--el-card-radius);
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
[class*="el-p-"] .el-filter-bar-last,
|
|
686
|
+
[class*="el-py-"] .el-filter-bar-last {
|
|
687
|
+
margin-bottom: calc(var(--el-container-px) * -1);
|
|
688
|
+
border-bottom-left-radius: var(--el-card-radius);
|
|
689
|
+
border-bottom-right-radius: var(--el-card-radius);
|
|
675
690
|
}
|
|
676
691
|
|
|
677
692
|
/* Components with visible borders - extend edge-to-edge, inner elements handle padding */
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elsapiens/styles",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "CSS styles and Tailwind preset for elSapiens SDK",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.css",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": "./dist/index.css",
|
|
10
|
+
"./app": "./dist/app.css",
|
|
10
11
|
"./variables": "./dist/variables.css",
|
|
11
12
|
"./components": "./dist/components.css",
|
|
12
13
|
"./color-schemes": "./dist/color-schemes.css",
|
|
@@ -18,16 +19,19 @@
|
|
|
18
19
|
"dist",
|
|
19
20
|
"tailwind-preset.js"
|
|
20
21
|
],
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"access": "public"
|
|
24
|
+
},
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "mkdir -p dist && cp src/*.css dist/ && cp src/tailwind-preset.js .",
|
|
27
|
+
"dev": "npm run build",
|
|
28
|
+
"clean": "rm -rf dist tailwind-preset.js"
|
|
29
|
+
},
|
|
21
30
|
"devDependencies": {
|
|
22
31
|
"tailwindcss": "^3.4.1",
|
|
23
32
|
"tailwindcss-animate": "^1.0.7"
|
|
24
33
|
},
|
|
25
34
|
"peerDependencies": {
|
|
26
35
|
"tailwindcss": "^3.4.0"
|
|
27
|
-
},
|
|
28
|
-
"scripts": {
|
|
29
|
-
"build": "mkdir -p dist && cp src/*.css dist/ && cp src/tailwind-preset.js .",
|
|
30
|
-
"dev": "npm run build",
|
|
31
|
-
"clean": "rm -rf dist tailwind-preset.js"
|
|
32
36
|
}
|
|
33
|
-
}
|
|
37
|
+
}
|