@kolkrabbi/kol-theme 0.198.0 → 0.199.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/kol-components-atoms.css +21 -0
- package/package.json +1 -1
package/kol-components-atoms.css
CHANGED
|
@@ -1444,3 +1444,24 @@ a.kol-icon-frame {
|
|
|
1444
1444
|
}
|
|
1445
1445
|
.kol-scroll-fade[data-fade-top] { --kol-scroll-fade-top: 3rem; }
|
|
1446
1446
|
.kol-scroll-fade[data-fade-bottom] { --kol-scroll-fade-bottom: 3rem; }
|
|
1447
|
+
/* sideways (TabsRowOverflow, 2026-10-29): a row that scrolls fades its clipped edge(s) — `useScrollFade(ref, true, 'x')` */
|
|
1448
|
+
.kol-scroll-fade--x {
|
|
1449
|
+
--kol-scroll-fade-left: 0px;
|
|
1450
|
+
--kol-scroll-fade-right: 0px;
|
|
1451
|
+
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--kol-scroll-fade-left), #000 calc(100% - var(--kol-scroll-fade-right)), transparent 100%);
|
|
1452
|
+
mask-image: linear-gradient(to right, transparent 0, #000 var(--kol-scroll-fade-left), #000 calc(100% - var(--kol-scroll-fade-right)), transparent 100%);
|
|
1453
|
+
}
|
|
1454
|
+
.kol-scroll-fade--x[data-fade-left] { --kol-scroll-fade-left: 2rem; }
|
|
1455
|
+
.kol-scroll-fade--x[data-fade-right] { --kol-scroll-fade-right: 2rem; }
|
|
1456
|
+
/* a tab row wider than its column (TabsRow `overflow="scroll"`): one line, scrolled sideways, no scrollbar; the row
|
|
1457
|
+
* takes its own width and at least the column's, so a trailing control still sits at the right */
|
|
1458
|
+
.kol-tabs-scroll {
|
|
1459
|
+
display: flex;
|
|
1460
|
+
overflow-x: auto;
|
|
1461
|
+
overflow-y: hidden;
|
|
1462
|
+
scrollbar-width: none;
|
|
1463
|
+
overscroll-behavior-x: contain;
|
|
1464
|
+
min-width: 0; /* a flex item shrinks to its column instead of growing to the row */
|
|
1465
|
+
}
|
|
1466
|
+
.kol-tabs-scroll::-webkit-scrollbar { display: none; }
|
|
1467
|
+
.kol-tabs-scroll > * { flex: none; min-width: 100%; }
|