juxscript 1.1.112 → 1.1.113
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/css-classes-inventory.json +154 -2
- package/dom-structure-map.json +114 -2
- package/index.d.ts +4 -0
- package/index.d.ts.map +1 -1
- package/index.js +4 -0
- package/lib/components/base/LayoutExtensions.d.ts +6 -0
- package/lib/components/base/LayoutExtensions.d.ts.map +1 -1
- package/lib/components/base/LayoutExtensions.js +19 -0
- package/lib/components/base/LayoutExtensions.ts +29 -0
- package/lib/components/image.d.ts +42 -0
- package/lib/components/image.d.ts.map +1 -0
- package/lib/components/image.js +204 -0
- package/lib/components/image.ts +260 -0
- package/lib/components/layer.d.ts +72 -0
- package/lib/components/layer.d.ts.map +1 -0
- package/lib/components/layer.js +219 -0
- package/lib/components/layer.ts +304 -0
- package/lib/styles/gradients.css +326 -0
- package/package.json +1 -1
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
2
|
+
* JUX GRADIENT BACKGROUNDS
|
|
3
|
+
* 50+ gradient variations for body, hero, card backgrounds
|
|
4
|
+
* Usage: Add class to element (e.g., <div class="jux-gradient-ocean">)
|
|
5
|
+
* ═══════════════════════════════════════════════════════════════════ */
|
|
6
|
+
|
|
7
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
8
|
+
* LINEAR GRADIENTS - Smooth Directional Transitions
|
|
9
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
10
|
+
|
|
11
|
+
.jux-gradient-ocean {
|
|
12
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.jux-gradient-sunset {
|
|
16
|
+
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.jux-gradient-forest {
|
|
20
|
+
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.jux-gradient-fire {
|
|
24
|
+
background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.jux-gradient-ice {
|
|
28
|
+
background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.jux-gradient-candy {
|
|
32
|
+
background: linear-gradient(135deg, #d9a7c7 0%, #fffcdc 100%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.jux-gradient-emerald {
|
|
36
|
+
background: linear-gradient(135deg, #348f50 0%, #56b4d3 100%);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.jux-gradient-midnight {
|
|
40
|
+
background: linear-gradient(135deg, #232526 0%, #414345 100%);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.jux-gradient-peach {
|
|
44
|
+
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.jux-gradient-royal {
|
|
48
|
+
background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.jux-gradient-coral {
|
|
52
|
+
background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.jux-gradient-mint {
|
|
56
|
+
background: linear-gradient(135deg, #80ff72 0%, #7ee8fa 100%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.jux-gradient-grape {
|
|
60
|
+
background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.jux-gradient-cherry {
|
|
64
|
+
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.jux-gradient-sky {
|
|
68
|
+
background: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
72
|
+
* MULTI-STOP LINEAR GRADIENTS - Complex Color Transitions
|
|
73
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
74
|
+
|
|
75
|
+
.jux-gradient-aurora {
|
|
76
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.jux-gradient-tropical {
|
|
80
|
+
background: linear-gradient(135deg, #fdbb2d 0%, #22c1c3 50%, #3a7bd5 100%);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.jux-gradient-cosmic {
|
|
84
|
+
background: linear-gradient(135deg, #4e00c2 0%, #7303c0 33%, #ec38bc 66%, #fdeff9 100%);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.jux-gradient-neon {
|
|
88
|
+
background: linear-gradient(135deg, #f12711 0%, #f5af19 33%, #11998e 66%, #38ef7d 100%);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.jux-gradient-volcano {
|
|
92
|
+
background: linear-gradient(135deg, #2c3e50 0%, #bdc3c7 50%, #e74c3c 100%);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
96
|
+
* RADIAL GRADIENTS - Center-Focused Effects
|
|
97
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
98
|
+
|
|
99
|
+
.jux-gradient-radial-sun {
|
|
100
|
+
background: radial-gradient(circle, #fff5b4 0%, #ff6b6b 100%);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.jux-gradient-radial-moon {
|
|
104
|
+
background: radial-gradient(circle, #e0e0e0 0%, #3d3d3d 100%);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.jux-gradient-radial-blue {
|
|
108
|
+
background: radial-gradient(circle at top left, #4facfe 0%, #00f2fe 100%);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.jux-gradient-radial-purple {
|
|
112
|
+
background: radial-gradient(circle at bottom right, #667eea 0%, #764ba2 100%);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.jux-gradient-radial-fire {
|
|
116
|
+
background: radial-gradient(circle at center, #ffcc00 0%, #ff6b6b 50%, #8b0000 100%);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.jux-gradient-radial-ocean {
|
|
120
|
+
background: radial-gradient(circle at top, #56ccf2 0%, #2f80ed 50%, #0a2463 100%);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.jux-gradient-radial-emerald {
|
|
124
|
+
background: radial-gradient(ellipse at bottom, #80ff72 0%, #1de9b6 50%, #004d40 100%);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.jux-gradient-radial-sunset {
|
|
128
|
+
background: radial-gradient(ellipse at top, #fa709a 0%, #fee140 50%, #764ba2 100%);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
132
|
+
* CONIC GRADIENTS - Circular Rainbow Effects
|
|
133
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
134
|
+
|
|
135
|
+
.jux-gradient-conic-rainbow {
|
|
136
|
+
background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.jux-gradient-conic-sunset {
|
|
140
|
+
background: conic-gradient(from 90deg, #ff6b6b, #ffcc00, #fa709a, #fee140);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.jux-gradient-conic-ocean {
|
|
144
|
+
background: conic-gradient(from 180deg, #56ccf2, #2f80ed, #667eea, #56ccf2);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.jux-gradient-conic-fire {
|
|
148
|
+
background: conic-gradient(from 45deg, #ff0844, #ff6b6b, #ffcc00, #ff0844);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.jux-gradient-conic-neon {
|
|
152
|
+
background: conic-gradient(from 0deg at 50% 50%, #ff00ff, #00ffff, #ffff00, #ff00ff);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
156
|
+
* DARK GRADIENTS - Low-Key Backgrounds
|
|
157
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
158
|
+
|
|
159
|
+
.jux-gradient-dark-space {
|
|
160
|
+
background: linear-gradient(135deg, #000000 0%, #1a1a2e 100%);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.jux-gradient-dark-navy {
|
|
164
|
+
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.jux-gradient-dark-purple {
|
|
168
|
+
background: linear-gradient(135deg, #141e30 0%, #243b55 50%, #4e54c8 100%);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.jux-gradient-dark-forest {
|
|
172
|
+
background: linear-gradient(135deg, #134e4a 0%, #1e293b 50%, #0f172a 100%);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.jux-gradient-dark-crimson {
|
|
176
|
+
background: linear-gradient(135deg, #1a0000 0%, #4a0000 50%, #8b0000 100%);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.jux-gradient-dark-slate {
|
|
180
|
+
background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
184
|
+
* TRANSPARENT/OVERLAY GRADIENTS - For Layering
|
|
185
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
186
|
+
|
|
187
|
+
.jux-gradient-overlay-dark {
|
|
188
|
+
background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.jux-gradient-overlay-light {
|
|
192
|
+
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 100%);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.jux-gradient-overlay-blue {
|
|
196
|
+
background: linear-gradient(135deg, rgba(86,204,242,0.8) 0%, rgba(47,128,237,0.4) 100%);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.jux-gradient-overlay-purple {
|
|
200
|
+
background: linear-gradient(135deg, rgba(102,126,234,0.8) 0%, rgba(118,75,162,0.4) 100%);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.jux-gradient-overlay-sunset {
|
|
204
|
+
background: linear-gradient(135deg, rgba(250,112,154,0.9) 0%, rgba(254,225,64,0.5) 100%);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
208
|
+
* MESH/TEXTURED GRADIENTS - Complex Multi-Direction
|
|
209
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
210
|
+
|
|
211
|
+
.jux-gradient-mesh-purple {
|
|
212
|
+
background:
|
|
213
|
+
linear-gradient(135deg, rgba(102,126,234,0.8) 0%, transparent 70%),
|
|
214
|
+
linear-gradient(225deg, rgba(118,75,162,0.8) 10%, transparent 80%),
|
|
215
|
+
linear-gradient(315deg, rgba(249,168,212,0.6) 0%, transparent 70%),
|
|
216
|
+
linear-gradient(45deg, rgba(240,147,251,0.7) 0%, transparent 70%);
|
|
217
|
+
background-color: #1a1a2e;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.jux-gradient-mesh-ocean {
|
|
221
|
+
background:
|
|
222
|
+
linear-gradient(135deg, rgba(86,204,242,0.7) 0%, transparent 60%),
|
|
223
|
+
linear-gradient(225deg, rgba(47,128,237,0.6) 10%, transparent 70%),
|
|
224
|
+
linear-gradient(315deg, rgba(102,126,234,0.5) 20%, transparent 80%),
|
|
225
|
+
linear-gradient(45deg, rgba(56,239,125,0.4) 0%, transparent 90%);
|
|
226
|
+
background-color: #0a2463;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.jux-gradient-mesh-fire {
|
|
230
|
+
background:
|
|
231
|
+
linear-gradient(135deg, rgba(255,8,68,0.8) 0%, transparent 60%),
|
|
232
|
+
linear-gradient(225deg, rgba(255,107,107,0.7) 10%, transparent 70%),
|
|
233
|
+
linear-gradient(315deg, rgba(255,204,0,0.6) 20%, transparent 80%),
|
|
234
|
+
linear-gradient(45deg, rgba(254,225,64,0.5) 0%, transparent 90%);
|
|
235
|
+
background-color: #1a0000;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.jux-gradient-mesh-neon {
|
|
239
|
+
background:
|
|
240
|
+
linear-gradient(135deg, rgba(255,0,255,0.6) 0%, transparent 70%),
|
|
241
|
+
linear-gradient(225deg, rgba(0,255,255,0.6) 10%, transparent 80%),
|
|
242
|
+
linear-gradient(315deg, rgba(255,255,0,0.5) 20%, transparent 85%),
|
|
243
|
+
linear-gradient(45deg, rgba(255,0,128,0.5) 0%, transparent 90%);
|
|
244
|
+
background-color: #000000;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
248
|
+
* SUBTLE/PASTEL GRADIENTS - Soft Backgrounds
|
|
249
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
250
|
+
|
|
251
|
+
.jux-gradient-pastel-pink {
|
|
252
|
+
background: linear-gradient(135deg, #ffeef8 0%, #ffe5f1 100%);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.jux-gradient-pastel-blue {
|
|
256
|
+
background: linear-gradient(135deg, #e0f7fa 0%, #e1f5fe 100%);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.jux-gradient-pastel-green {
|
|
260
|
+
background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.jux-gradient-pastel-purple {
|
|
264
|
+
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.jux-gradient-pastel-peach {
|
|
268
|
+
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.jux-gradient-pastel-lavender {
|
|
272
|
+
background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
276
|
+
* ANIMATED GRADIENTS - Requires Animation Setup
|
|
277
|
+
* Add these classes for animated backgrounds (CSS animations needed)
|
|
278
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
279
|
+
|
|
280
|
+
.jux-gradient-animated {
|
|
281
|
+
background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
|
|
282
|
+
background-size: 800% 800%;
|
|
283
|
+
animation: jux-gradient-shift 15s ease infinite;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
@keyframes jux-gradient-shift {
|
|
287
|
+
0% { background-position: 0% 50%; }
|
|
288
|
+
50% { background-position: 100% 50%; }
|
|
289
|
+
100% { background-position: 0% 50%; }
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.jux-gradient-animated-fast {
|
|
293
|
+
background: linear-gradient(270deg, #ff0844, #ffb199, #ff6a88, #ff0844);
|
|
294
|
+
background-size: 600% 600%;
|
|
295
|
+
animation: jux-gradient-shift 8s ease infinite;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.jux-gradient-animated-slow {
|
|
299
|
+
background: linear-gradient(270deg, #56ccf2, #2f80ed, #667eea, #56ccf2);
|
|
300
|
+
background-size: 1000% 1000%;
|
|
301
|
+
animation: jux-gradient-shift 25s ease infinite;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
305
|
+
* UTILITY CLASSES - Combine with Gradients
|
|
306
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
307
|
+
|
|
308
|
+
.jux-gradient-fixed {
|
|
309
|
+
background-attachment: fixed;
|
|
310
|
+
background-size: cover;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.jux-gradient-overlay::before {
|
|
314
|
+
content: '';
|
|
315
|
+
position: absolute;
|
|
316
|
+
inset: 0;
|
|
317
|
+
background: rgba(0, 0, 0, 0.3);
|
|
318
|
+
pointer-events: none;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.jux-gradient-text {
|
|
322
|
+
background-clip: text;
|
|
323
|
+
-webkit-background-clip: text;
|
|
324
|
+
-webkit-text-fill-color: transparent;
|
|
325
|
+
background-size: 200% 200%;
|
|
326
|
+
}
|