@onetype/framework 2.0.54 → 2.0.55

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.
Files changed (2) hide show
  1. package/addons/render/elements/front/items/self/navigation/tabs/tabs.css +62 -207
  2. package/package.json +1 -1
package/addons/render/elements/front/items/self/navigation/tabs/tabs.css CHANGED
@@ -23,6 +23,7 @@
23
23
  align-items: center;
24
24
  overflow-x: auto;
25
25
  scrollbar-width: none;
26
+ overflow: hidden;
26
27
  }
27
28
 
28
29
  .e-1a8b6ac1 > .holder > .tabs::-webkit-scrollbar
@@ -90,7 +91,7 @@
90
91
  color: var(--ot-brand);
91
92
  }
92
93
 
93
- /* Content */
94
+ /* Content panels */
94
95
 
95
96
  .e-1a8b6ac1 > .holder > .content
96
97
  {
@@ -114,12 +115,11 @@
114
115
  to { opacity: 1; transform: translateY(0); }
115
116
  }
116
117
 
117
- /* ===== UNDERLINE STYLE (default) ===== */
118
+ /* ===== UNDERLINE STYLE ===== */
118
119
 
119
120
  .e-1a8b6ac1 > .holder.underline > .tabs
120
121
  {
121
122
  gap: var(--ot-spacing-l);
122
- border-bottom: 1px solid var(--ot-bg-2-border);
123
123
  }
124
124
 
125
125
  .e-1a8b6ac1 > .holder.underline > .tabs > .tab
@@ -171,7 +171,7 @@
171
171
  color: white;
172
172
  }
173
173
 
174
- /* ===== CONTAINED STYLE (pills inside framed container) ===== */
174
+ /* ===== CONTAINED STYLE ===== */
175
175
 
176
176
  .e-1a8b6ac1 > .holder.contained > .tabs
177
177
  {
@@ -205,7 +205,7 @@
205
205
  color: white;
206
206
  }
207
207
 
208
- /* ===== SEGMENTED STYLE (iOS-like segmented control) ===== */
208
+ /* ===== SEGMENTED STYLE ===== */
209
209
 
210
210
  .e-1a8b6ac1 > .holder.segmented > .tabs
211
211
  {
@@ -241,234 +241,89 @@
241
241
  color: white;
242
242
  }
243
243
 
244
- /* ===== BACKGROUNDS — full override per variant ===== */
244
+ /* ===== BACKGROUNDS ===== */
245
245
 
246
- /* bg-1 */
246
+ /* bg on holder — only for underline/pills (padding + background) */
247
247
 
248
- .e-1a8b6ac1 > .holder.bg-1.underline > .tabs
249
- {
250
- background: var(--ot-bg-1);
251
- border-bottom-color: var(--ot-bg-1-border);
252
- }
253
-
254
- .e-1a8b6ac1 > .holder.bg-1.pills > .tabs > .tab:hover:not(.disabled)
255
- {
256
- background: var(--ot-bg-1-hover);
257
- }
258
-
259
- .e-1a8b6ac1 > .holder.bg-1.contained > .tabs
260
- {
261
- background: var(--ot-bg-1);
262
- border-color: var(--ot-bg-1-border);
263
- }
264
-
265
- .e-1a8b6ac1 > .holder.bg-1.contained > .tabs > .tab:hover:not(.disabled)
266
- {
267
- background: var(--ot-bg-1-hover);
268
- }
269
-
270
- .e-1a8b6ac1 > .holder.bg-1.contained > .tabs > .tab.active
271
- {
272
- background: var(--ot-brand-opacity);
273
- color: var(--ot-brand);
274
- }
275
-
276
- .e-1a8b6ac1 > .holder.bg-1.segmented > .tabs
277
- {
278
- background: var(--ot-bg-1);
279
- }
280
-
281
- .e-1a8b6ac1 > .holder.bg-1.segmented > .tabs > .tab.active
282
- {
283
- background: var(--ot-brand-opacity);
284
- color: var(--ot-brand);
285
- }
286
-
287
- .e-1a8b6ac1 > .holder.bg-1 .tab > .count
288
- {
289
- background: var(--ot-bg-2);
290
- }
291
-
292
- .e-1a8b6ac1 > .holder.bg-1 .tab.active > .count
293
- {
294
- background: var(--ot-brand-opacity);
295
- color: var(--ot-brand);
296
- }
297
-
298
- /* bg-2 */
299
-
300
- .e-1a8b6ac1 > .holder.bg-2.underline > .tabs
301
- {
302
- background: var(--ot-bg-2);
303
- border-bottom-color: var(--ot-bg-2-border);
304
- }
305
-
306
- .e-1a8b6ac1 > .holder.bg-2.pills > .tabs > .tab:hover:not(.disabled)
307
- {
308
- background: var(--ot-bg-2-hover);
309
- }
310
-
311
- .e-1a8b6ac1 > .holder.bg-2.contained > .tabs
312
- {
313
- background: var(--ot-bg-2);
314
- border-color: var(--ot-bg-2-border);
315
- }
316
-
317
- .e-1a8b6ac1 > .holder.bg-2.contained > .tabs > .tab:hover:not(.disabled)
318
- {
319
- background: var(--ot-bg-2-hover);
320
- }
321
-
322
- .e-1a8b6ac1 > .holder.bg-2.contained > .tabs > .tab.active
323
- {
324
- background: var(--ot-brand-opacity);
325
- color: var(--ot-brand);
326
- }
327
-
328
- .e-1a8b6ac1 > .holder.bg-2.segmented > .tabs
329
- {
330
- background: var(--ot-bg-2);
331
- }
332
-
333
- .e-1a8b6ac1 > .holder.bg-2.segmented > .tabs > .tab.active
334
- {
335
- background: var(--ot-brand-opacity);
336
- color: var(--ot-brand);
337
- }
248
+ .e-1a8b6ac1 > .holder.bg-1.underline,
249
+ .e-1a8b6ac1 > .holder.bg-1.pills { background: var(--ot-bg-1); }
338
250
 
339
- .e-1a8b6ac1 > .holder.bg-2 .tab > .count
340
- {
341
- background: var(--ot-bg-3);
342
- }
343
-
344
- .e-1a8b6ac1 > .holder.bg-2 .tab.active > .count
345
- {
346
- background: var(--ot-brand-opacity);
347
- color: var(--ot-brand);
348
- }
349
-
350
- /* bg-3 */
351
-
352
- .e-1a8b6ac1 > .holder.bg-3.underline > .tabs
353
- {
354
- background: var(--ot-bg-3);
355
- border-bottom-color: var(--ot-bg-3-border);
356
- }
357
-
358
- .e-1a8b6ac1 > .holder.bg-3.pills > .tabs > .tab:hover:not(.disabled)
359
- {
360
- background: var(--ot-bg-3-hover);
361
- }
251
+ .e-1a8b6ac1 > .holder.bg-2.underline,
252
+ .e-1a8b6ac1 > .holder.bg-2.pills { background: var(--ot-bg-2); }
362
253
 
363
- .e-1a8b6ac1 > .holder.bg-3.contained > .tabs
364
- {
365
- background: var(--ot-bg-3);
366
- border-color: var(--ot-bg-3-border);
367
- }
368
-
369
- .e-1a8b6ac1 > .holder.bg-3.contained > .tabs > .tab:hover:not(.disabled)
370
- {
371
- background: var(--ot-bg-3-hover);
372
- }
373
-
374
- .e-1a8b6ac1 > .holder.bg-3.contained > .tabs > .tab.active
375
- {
376
- background: var(--ot-brand-opacity);
377
- color: var(--ot-brand);
378
- }
379
-
380
- .e-1a8b6ac1 > .holder.bg-3.segmented > .tabs
381
- {
382
- background: var(--ot-bg-3);
383
- }
254
+ .e-1a8b6ac1 > .holder.bg-3.underline,
255
+ .e-1a8b6ac1 > .holder.bg-3.pills { background: var(--ot-bg-3); }
384
256
 
385
- .e-1a8b6ac1 > .holder.bg-3.segmented > .tabs > .tab.active
386
- {
387
- background: var(--ot-brand-opacity);
388
- color: var(--ot-brand);
389
- }
257
+ .e-1a8b6ac1 > .holder.bg-4.underline,
258
+ .e-1a8b6ac1 > .holder.bg-4.pills { background: var(--ot-bg-4); }
390
259
 
391
- .e-1a8b6ac1 > .holder.bg-3 .tab > .count
260
+ .e-1a8b6ac1 > .holder.bg-1.underline,
261
+ .e-1a8b6ac1 > .holder.bg-1.pills,
262
+ .e-1a8b6ac1 > .holder.bg-2.underline,
263
+ .e-1a8b6ac1 > .holder.bg-2.pills,
264
+ .e-1a8b6ac1 > .holder.bg-3.underline,
265
+ .e-1a8b6ac1 > .holder.bg-3.pills,
266
+ .e-1a8b6ac1 > .holder.bg-4.underline,
267
+ .e-1a8b6ac1 > .holder.bg-4.pills
392
268
  {
393
- background: var(--ot-bg-4);
269
+ padding: 0 var(--ot-spacing-m);
394
270
  }
395
271
 
396
- .e-1a8b6ac1 > .holder.bg-3 .tab.active > .count
397
- {
398
- background: var(--ot-brand-opacity);
399
- color: var(--ot-brand);
400
- }
272
+ /* bg overrides for contained track */
401
273
 
402
- /* bg-4 */
274
+ .e-1a8b6ac1 > .holder.bg-1.contained > .tabs { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
275
+ .e-1a8b6ac1 > .holder.bg-2.contained > .tabs { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
276
+ .e-1a8b6ac1 > .holder.bg-3.contained > .tabs { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
277
+ .e-1a8b6ac1 > .holder.bg-4.contained > .tabs { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
403
278
 
404
- .e-1a8b6ac1 > .holder.bg-4.underline > .tabs
405
- {
406
- background: var(--ot-bg-4);
407
- border-bottom-color: var(--ot-bg-4-border);
408
- }
279
+ /* bg overrides for segmented track */
409
280
 
410
- .e-1a8b6ac1 > .holder.bg-4.pills > .tabs > .tab:hover:not(.disabled)
411
- {
412
- background: var(--ot-bg-4-hover);
413
- }
281
+ .e-1a8b6ac1 > .holder.bg-1.segmented > .tabs { background: var(--ot-bg-1); }
282
+ .e-1a8b6ac1 > .holder.bg-2.segmented > .tabs { background: var(--ot-bg-2); }
283
+ .e-1a8b6ac1 > .holder.bg-3.segmented > .tabs { background: var(--ot-bg-3); }
284
+ .e-1a8b6ac1 > .holder.bg-4.segmented > .tabs { background: var(--ot-bg-4); }
414
285
 
415
- .e-1a8b6ac1 > .holder.bg-4.contained > .tabs
416
- {
417
- background: var(--ot-bg-4);
418
- border-color: var(--ot-bg-4-border);
419
- }
286
+ /* bg overrides for pills hover */
420
287
 
421
- .e-1a8b6ac1 > .holder.bg-4.contained > .tabs > .tab:hover:not(.disabled)
422
- {
423
- background: var(--ot-bg-4-hover);
424
- }
288
+ .e-1a8b6ac1 > .holder.bg-1.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-1-hover); }
289
+ .e-1a8b6ac1 > .holder.bg-2.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-2-hover); }
290
+ .e-1a8b6ac1 > .holder.bg-3.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-3-hover); }
291
+ .e-1a8b6ac1 > .holder.bg-4.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-4-hover); }
425
292
 
426
- .e-1a8b6ac1 > .holder.bg-4.contained > .tabs > .tab.active
427
- {
428
- background: var(--ot-brand-opacity);
429
- color: var(--ot-brand);
430
- }
293
+ /* bg overrides for contained hover */
431
294
 
432
- .e-1a8b6ac1 > .holder.bg-4.segmented > .tabs
433
- {
434
- background: var(--ot-bg-4);
435
- }
295
+ .e-1a8b6ac1 > .holder.bg-1.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-1-hover); }
296
+ .e-1a8b6ac1 > .holder.bg-2.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-2-hover); }
297
+ .e-1a8b6ac1 > .holder.bg-3.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-3-hover); }
298
+ .e-1a8b6ac1 > .holder.bg-4.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-4-hover); }
436
299
 
437
- .e-1a8b6ac1 > .holder.bg-4.segmented > .tabs > .tab.active
438
- {
439
- background: var(--ot-brand-opacity);
440
- color: var(--ot-brand);
441
- }
300
+ /* bg overrides for count badge */
442
301
 
443
- .e-1a8b6ac1 > .holder.bg-4 .tab > .count
444
- {
445
- background: var(--ot-bg-3);
446
- }
302
+ .e-1a8b6ac1 > .holder.bg-1 .tab > .count { background: var(--ot-bg-2); }
303
+ .e-1a8b6ac1 > .holder.bg-2 .tab > .count { background: var(--ot-bg-3); }
304
+ .e-1a8b6ac1 > .holder.bg-3 .tab > .count { background: var(--ot-bg-4); }
305
+ .e-1a8b6ac1 > .holder.bg-4 .tab > .count { background: var(--ot-bg-3); }
447
306
 
448
- .e-1a8b6ac1 > .holder.bg-4 .tab.active > .count
449
- {
450
- background: var(--ot-brand-opacity);
451
- color: var(--ot-brand);
452
- }
307
+ /* ===== BORDER ===== */
453
308
 
454
- /* ===== BORDER MODIFIER ===== */
309
+ /* border on holder for underline/pills */
455
310
 
456
- .e-1a8b6ac1 > .holder.border > .tabs { border: 1px solid var(--ot-bg-2-border); }
457
- .e-1a8b6ac1 > .holder.border.underline > .tabs { border: none; border-bottom: 1px solid var(--ot-bg-2-border); }
311
+ .e-1a8b6ac1 > .holder.border.underline { border-bottom: 1px solid var(--ot-bg-2-border); }
312
+ .e-1a8b6ac1 > .holder.border.pills { border-bottom: 1px solid var(--ot-bg-2-border); }
458
313
 
459
- .e-1a8b6ac1 > .holder.bg-1.border > .tabs { border-color: var(--ot-bg-1-border); }
460
- .e-1a8b6ac1 > .holder.bg-1.border.underline > .tabs { border-bottom-color: var(--ot-bg-1-border); }
314
+ .e-1a8b6ac1 > .holder.bg-1.border.underline,
315
+ .e-1a8b6ac1 > .holder.bg-1.border.pills { border-bottom-color: var(--ot-bg-1-border); }
461
316
 
462
- .e-1a8b6ac1 > .holder.bg-2.border > .tabs { border-color: var(--ot-bg-2-border); }
463
- .e-1a8b6ac1 > .holder.bg-2.border.underline > .tabs { border-bottom-color: var(--ot-bg-2-border); }
317
+ .e-1a8b6ac1 > .holder.bg-2.border.underline,
318
+ .e-1a8b6ac1 > .holder.bg-2.border.pills { border-bottom-color: var(--ot-bg-2-border); }
464
319
 
465
- .e-1a8b6ac1 > .holder.bg-3.border > .tabs { border-color: var(--ot-bg-3-border); }
466
- .e-1a8b6ac1 > .holder.bg-3.border.underline > .tabs { border-bottom-color: var(--ot-bg-3-border); }
320
+ .e-1a8b6ac1 > .holder.bg-3.border.underline,
321
+ .e-1a8b6ac1 > .holder.bg-3.border.pills { border-bottom-color: var(--ot-bg-3-border); }
467
322
 
468
- .e-1a8b6ac1 > .holder.bg-4.border > .tabs { border-color: var(--ot-bg-4-border); }
469
- .e-1a8b6ac1 > .holder.bg-4.border.underline > .tabs { border-bottom-color: var(--ot-bg-4-border); }
323
+ .e-1a8b6ac1 > .holder.bg-4.border.underline,
324
+ .e-1a8b6ac1 > .holder.bg-4.border.pills { border-bottom-color: var(--ot-bg-4-border); }
470
325
 
471
- /* ===== STRETCH MODIFIER ===== */
326
+ /* ===== STRETCH ===== */
472
327
 
473
328
  .e-1a8b6ac1 > .holder.stretch > .tabs
474
329
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onetype/framework",
3
- "version": "2.0.54",
3
+ "version": "2.0.55",
4
4
  "description": "OneType Framework — Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
5
5
  "type": "module",
6
6
  "main": "lib/load.js",