juxscript 1.1.107 → 1.1.108
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/dom-structure-map.json +1 -1
- package/lib/components/stack/BaseStack.d.ts +13 -3
- package/lib/components/stack/BaseStack.d.ts.map +1 -1
- package/lib/components/stack/BaseStack.js +60 -7
- package/lib/components/stack/BaseStack.ts +77 -8
- package/lib/styles/stack.css +55 -0
- package/package.json +1 -1
package/dom-structure-map.json
CHANGED
|
@@ -93,13 +93,23 @@ export declare abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
93
93
|
elasticInItems(): this;
|
|
94
94
|
blurInItems(): this;
|
|
95
95
|
glowItems(): this;
|
|
96
|
+
instant(): this;
|
|
97
|
+
fast(): this;
|
|
98
|
+
normal(): this;
|
|
99
|
+
slow(): this;
|
|
100
|
+
slower(): this;
|
|
101
|
+
linear(): this;
|
|
102
|
+
ease(): this;
|
|
103
|
+
easeIn(): this;
|
|
104
|
+
easeOut(): this;
|
|
105
|
+
easeInOut(): this;
|
|
106
|
+
bounceTiming(): this;
|
|
107
|
+
elasticTiming(): this;
|
|
108
|
+
delay(ms: 100 | 200 | 300 | 500 | 1000): this;
|
|
96
109
|
staggered(): this;
|
|
97
110
|
interactive(): this;
|
|
98
111
|
smooth(): this;
|
|
99
112
|
smoothItems(): this;
|
|
100
|
-
/**
|
|
101
|
-
* Combine animation with stagger
|
|
102
|
-
*/
|
|
103
113
|
animateStagger(animation?: 'fade' | 'slide' | 'scale' | 'bounce', direction?: 'up' | 'down' | 'left' | 'right'): this;
|
|
104
114
|
protected buildClasses(): string;
|
|
105
115
|
protected renderChild(child: any, index: number): HTMLElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAMpE,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACjD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IAC/B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,UAAU,UAAW,SAAQ,SAAS;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACrB,WAAW,CAAC,EAAE,kBAAkB,GAAG,MAAM,EAAE,CAAC;CAC/C;AAED;;GAEG;AACH,8BAAsB,SAAU,SAAQ,aAAa,CAAC,UAAU,CAAC;IAC7D,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IACzC,OAAO,CAAC,aAAa,CAAkC;IAChD,UAAU,EAAE,WAAW,GAAG,IAAI,CAAQ;gBAEjC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB;IAsBzF,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK5D,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI;IAKlF,OAAO,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAKpC,UAAU,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IASvC,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACjC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACzB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACpC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM9B,UAAU,CAAC,gBAAgB,EAAE,MAAM,EAAE,GAAG,kBAAkB,GAAG,IAAI;IAKjE,OAAO,CAAC,UAAU,GAAE,MAAW,EAAE,IAAI,GAAE,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,IAAa,GAAG,IAAI;IAc5G,GAAG,CAAC,KAAK,GAAE,MAAU,EAAE,MAAM,GAAE,MAAwB,GAAG,IAAI;IAQ9D,gBAAgB,CAAC,UAAU,GAAE,MAAU,EAAE,IAAI,GAAE,MAAa,EAAE,MAAM,GAAE,MAAiB,GAAG,IAAI;IAQ9F,IAAI,CAAC,YAAY,GAAE,MAAU,EAAE,IAAI,GAAE,MAAa,GAAG,IAAI;IAQzD,IAAI,CAAC,SAAS,GAAE,MAAU,EAAE,IAAI,GAAE,MAAU,GAAG,IAAI;IAQnD,OAAO,CAAC,SAAS,GAAE,MAAY,GAAG,IAAI;IAgBtC,MAAM,IAAI,IAAI;IAId,OAAO,CAAC,SAAS,GAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAc,GAAG,IAAI;IAIjE,OAAO,IAAI,IAAI;IAIf,MAAM,IAAI,IAAI;IAId,QAAQ,IAAI,IAAI;IAIhB,MAAM,CAAC,IAAI,GAAE,GAAG,GAAG,GAAS,GAAG,IAAI;IAInC,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAIjB,MAAM,IAAI,IAAI;IAId,IAAI,IAAI,IAAI;IAQZ,WAAW,IAAI,IAAI;IAInB,YAAY,CAAC,SAAS,GAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAc,GAAG,IAAI;IAItE,YAAY,IAAI,IAAI;IAIpB,WAAW,IAAI,IAAI;IAInB,aAAa,IAAI,IAAI;IAIrB,WAAW,CAAC,IAAI,GAAE,GAAG,GAAG,GAAS,GAAG,IAAI;IAIxC,aAAa,IAAI,IAAI;IAIrB,cAAc,IAAI,IAAI;IAItB,WAAW,IAAI,IAAI;IAInB,SAAS,IAAI,IAAI;IAQjB,OAAO,IAAI,IAAI;IAIf,IAAI,IAAI,IAAI;IAIZ,MAAM,IAAI,IAAI;IAId,IAAI,IAAI,IAAI;IAIZ,MAAM,IAAI,IAAI;IAQd,MAAM,IAAI,IAAI;IAId,IAAI,IAAI,IAAI;IAIZ,MAAM,IAAI,IAAI;IAId,OAAO,IAAI,IAAI;IAIf,SAAS,IAAI,IAAI;IAIjB,YAAY,IAAI,IAAI;IAIpB,aAAa,IAAI,IAAI;IAQrB,KAAK,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI;IAQ7C,SAAS,IAAI,IAAI;IAIjB,WAAW,IAAI,IAAI;IAInB,MAAM,IAAI,IAAI;IAId,WAAW,IAAI,IAAI;IAQnB,cAAc,CAAC,SAAS,GAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAiB,EAAE,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI;IAiB7H,SAAS,CAAC,YAAY,IAAI,MAAM;IAgChC,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW;IAkD7D,OAAO,CAAC,aAAa;IAoBrB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IA2BlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC"}
|
|
@@ -160,7 +160,9 @@ export class BaseStack extends BaseComponent {
|
|
|
160
160
|
/* ═════════════════════════════════════════════════════════════════
|
|
161
161
|
* ANIMATION API (Fluent)
|
|
162
162
|
* ═════════════════════════════════════════════════════════════════ */
|
|
163
|
-
/*
|
|
163
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
164
|
+
* Stack-Level Animations (Animate the container)
|
|
165
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
164
166
|
fadeIn() {
|
|
165
167
|
return this.addClass('jux-stack-fade-in');
|
|
166
168
|
}
|
|
@@ -191,7 +193,9 @@ export class BaseStack extends BaseComponent {
|
|
|
191
193
|
glow() {
|
|
192
194
|
return this.addClass('jux-stack-glow');
|
|
193
195
|
}
|
|
194
|
-
/*
|
|
196
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
197
|
+
* Item-Level Animations (Animate the children)
|
|
198
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
195
199
|
fadeInItems() {
|
|
196
200
|
return this.addClass('jux-stack-fade-in-items');
|
|
197
201
|
}
|
|
@@ -222,11 +226,60 @@ export class BaseStack extends BaseComponent {
|
|
|
222
226
|
glowItems() {
|
|
223
227
|
return this.addClass('jux-stack-glow-items');
|
|
224
228
|
}
|
|
225
|
-
/*
|
|
229
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
230
|
+
* Speed Modifiers (Control animation duration)
|
|
231
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
232
|
+
instant() {
|
|
233
|
+
return this.addClass('jux-stack-instant');
|
|
234
|
+
}
|
|
235
|
+
fast() {
|
|
236
|
+
return this.addClass('jux-stack-fast');
|
|
237
|
+
}
|
|
238
|
+
normal() {
|
|
239
|
+
return this.addClass('jux-stack-normal');
|
|
240
|
+
}
|
|
241
|
+
slow() {
|
|
242
|
+
return this.addClass('jux-stack-slow');
|
|
243
|
+
}
|
|
244
|
+
slower() {
|
|
245
|
+
return this.addClass('jux-stack-slower');
|
|
246
|
+
}
|
|
247
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
248
|
+
* Timing Functions (Control animation easing)
|
|
249
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
250
|
+
linear() {
|
|
251
|
+
return this.addClass('jux-stack-linear');
|
|
252
|
+
}
|
|
253
|
+
ease() {
|
|
254
|
+
return this.addClass('jux-stack-ease');
|
|
255
|
+
}
|
|
256
|
+
easeIn() {
|
|
257
|
+
return this.addClass('jux-stack-ease-in');
|
|
258
|
+
}
|
|
259
|
+
easeOut() {
|
|
260
|
+
return this.addClass('jux-stack-ease-out');
|
|
261
|
+
}
|
|
262
|
+
easeInOut() {
|
|
263
|
+
return this.addClass('jux-stack-ease-in-out');
|
|
264
|
+
}
|
|
265
|
+
bounceTiming() {
|
|
266
|
+
return this.addClass('jux-stack-bounce-timing');
|
|
267
|
+
}
|
|
268
|
+
elasticTiming() {
|
|
269
|
+
return this.addClass('jux-stack-elastic-timing');
|
|
270
|
+
}
|
|
271
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
272
|
+
* Delay Control
|
|
273
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
274
|
+
delay(ms) {
|
|
275
|
+
return this.addClass(`jux-stack-delay-${ms}`);
|
|
276
|
+
}
|
|
277
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
278
|
+
* Stagger & Interactive
|
|
279
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
226
280
|
staggered() {
|
|
227
281
|
return this.addClass('jux-stack-stagger');
|
|
228
282
|
}
|
|
229
|
-
/* Interactive & Utility */
|
|
230
283
|
interactive() {
|
|
231
284
|
return this.addClass('jux-stack-interactive');
|
|
232
285
|
}
|
|
@@ -236,9 +289,9 @@ export class BaseStack extends BaseComponent {
|
|
|
236
289
|
smoothItems() {
|
|
237
290
|
return this.addClass('jux-stack-smooth-items');
|
|
238
291
|
}
|
|
239
|
-
|
|
240
|
-
*
|
|
241
|
-
*/
|
|
292
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
293
|
+
* Convenience Combos
|
|
294
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
242
295
|
animateStagger(animation = 'fade', direction) {
|
|
243
296
|
if (animation === 'slide' && direction) {
|
|
244
297
|
this.slideIn(direction);
|
|
@@ -210,7 +210,9 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
210
210
|
* ANIMATION API (Fluent)
|
|
211
211
|
* ═════════════════════════════════════════════════════════════════ */
|
|
212
212
|
|
|
213
|
-
/*
|
|
213
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
214
|
+
* Stack-Level Animations (Animate the container)
|
|
215
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
214
216
|
|
|
215
217
|
fadeIn(): this {
|
|
216
218
|
return this.addClass('jux-stack-fade-in');
|
|
@@ -252,7 +254,9 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
252
254
|
return this.addClass('jux-stack-glow');
|
|
253
255
|
}
|
|
254
256
|
|
|
255
|
-
/*
|
|
257
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
258
|
+
* Item-Level Animations (Animate the children)
|
|
259
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
256
260
|
|
|
257
261
|
fadeInItems(): this {
|
|
258
262
|
return this.addClass('jux-stack-fade-in-items');
|
|
@@ -294,14 +298,78 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
294
298
|
return this.addClass('jux-stack-glow-items');
|
|
295
299
|
}
|
|
296
300
|
|
|
297
|
-
/*
|
|
301
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
302
|
+
* Speed Modifiers (Control animation duration)
|
|
303
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
304
|
+
|
|
305
|
+
instant(): this {
|
|
306
|
+
return this.addClass('jux-stack-instant');
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
fast(): this {
|
|
310
|
+
return this.addClass('jux-stack-fast');
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
normal(): this {
|
|
314
|
+
return this.addClass('jux-stack-normal');
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
slow(): this {
|
|
318
|
+
return this.addClass('jux-stack-slow');
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
slower(): this {
|
|
322
|
+
return this.addClass('jux-stack-slower');
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
326
|
+
* Timing Functions (Control animation easing)
|
|
327
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
328
|
+
|
|
329
|
+
linear(): this {
|
|
330
|
+
return this.addClass('jux-stack-linear');
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
ease(): this {
|
|
334
|
+
return this.addClass('jux-stack-ease');
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
easeIn(): this {
|
|
338
|
+
return this.addClass('jux-stack-ease-in');
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
easeOut(): this {
|
|
342
|
+
return this.addClass('jux-stack-ease-out');
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
easeInOut(): this {
|
|
346
|
+
return this.addClass('jux-stack-ease-in-out');
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
bounceTiming(): this {
|
|
350
|
+
return this.addClass('jux-stack-bounce-timing');
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
elasticTiming(): this {
|
|
354
|
+
return this.addClass('jux-stack-elastic-timing');
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
358
|
+
* Delay Control
|
|
359
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
360
|
+
|
|
361
|
+
delay(ms: 100 | 200 | 300 | 500 | 1000): this {
|
|
362
|
+
return this.addClass(`jux-stack-delay-${ms}`);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
366
|
+
* Stagger & Interactive
|
|
367
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
298
368
|
|
|
299
369
|
staggered(): this {
|
|
300
370
|
return this.addClass('jux-stack-stagger');
|
|
301
371
|
}
|
|
302
372
|
|
|
303
|
-
/* Interactive & Utility */
|
|
304
|
-
|
|
305
373
|
interactive(): this {
|
|
306
374
|
return this.addClass('jux-stack-interactive');
|
|
307
375
|
}
|
|
@@ -314,9 +382,10 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
314
382
|
return this.addClass('jux-stack-smooth-items');
|
|
315
383
|
}
|
|
316
384
|
|
|
317
|
-
|
|
318
|
-
*
|
|
319
|
-
*/
|
|
385
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
386
|
+
* Convenience Combos
|
|
387
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
388
|
+
|
|
320
389
|
animateStagger(animation: 'fade' | 'slide' | 'scale' | 'bounce' = 'fade', direction?: 'up' | 'down' | 'left' | 'right'): this {
|
|
321
390
|
if (animation === 'slide' && direction) {
|
|
322
391
|
this.slideIn(direction);
|
package/lib/styles/stack.css
CHANGED
|
@@ -215,6 +215,61 @@
|
|
|
215
215
|
50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
219
|
+
* SPEED MODIFIERS (Global)
|
|
220
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
221
|
+
|
|
222
|
+
/* Apply to stack or items */
|
|
223
|
+
.jux-stack-instant,
|
|
224
|
+
.jux-stack-instant > * { animation-duration: 0.15s !important; }
|
|
225
|
+
|
|
226
|
+
.jux-stack-fast,
|
|
227
|
+
.jux-stack-fast > * { animation-duration: 0.3s !important; }
|
|
228
|
+
|
|
229
|
+
.jux-stack-normal,
|
|
230
|
+
.jux-stack-normal > * { animation-duration: 0.5s !important; }
|
|
231
|
+
|
|
232
|
+
.jux-stack-slow,
|
|
233
|
+
.jux-stack-slow > * { animation-duration: 0.8s !important; }
|
|
234
|
+
|
|
235
|
+
.jux-stack-slower,
|
|
236
|
+
.jux-stack-slower > * { animation-duration: 1.2s !important; }
|
|
237
|
+
|
|
238
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
239
|
+
* TIMING FUNCTIONS
|
|
240
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
241
|
+
|
|
242
|
+
.jux-stack-linear,
|
|
243
|
+
.jux-stack-linear > * { animation-timing-function: linear !important; }
|
|
244
|
+
|
|
245
|
+
.jux-stack-ease,
|
|
246
|
+
.jux-stack-ease > * { animation-timing-function: ease !important; }
|
|
247
|
+
|
|
248
|
+
.jux-stack-ease-in,
|
|
249
|
+
.jux-stack-ease-in > * { animation-timing-function: ease-in !important; }
|
|
250
|
+
|
|
251
|
+
.jux-stack-ease-out,
|
|
252
|
+
.jux-stack-ease-out > * { animation-timing-function: ease-out !important; }
|
|
253
|
+
|
|
254
|
+
.jux-stack-ease-in-out,
|
|
255
|
+
.jux-stack-ease-in-out > * { animation-timing-function: ease-in-out !important; }
|
|
256
|
+
|
|
257
|
+
.jux-stack-bounce-timing,
|
|
258
|
+
.jux-stack-bounce-timing > * { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; }
|
|
259
|
+
|
|
260
|
+
.jux-stack-elastic-timing,
|
|
261
|
+
.jux-stack-elastic-timing > * { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
|
|
262
|
+
|
|
263
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
264
|
+
* DELAY MODIFIERS
|
|
265
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
266
|
+
|
|
267
|
+
.jux-stack-delay-100 { animation-delay: 100ms !important; }
|
|
268
|
+
.jux-stack-delay-200 { animation-delay: 200ms !important; }
|
|
269
|
+
.jux-stack-delay-300 { animation-delay: 300ms !important; }
|
|
270
|
+
.jux-stack-delay-500 { animation-delay: 500ms !important; }
|
|
271
|
+
.jux-stack-delay-1000 { animation-delay: 1000ms !important; }
|
|
272
|
+
|
|
218
273
|
/* ═════════════════════════════════════════════════════════════════
|
|
219
274
|
* STACK-LEVEL ANIMATIONS (Apply to container itself)
|
|
220
275
|
* ═════════════════════════════════════════════════════════════════ */
|