@kolkrabbi/kol-theme 0.197.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/kol-components-organisms.css +48 -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%; }
|
|
@@ -993,3 +993,51 @@
|
|
|
993
993
|
.kol-tool-palette .kol-btn-quiet { opacity: 1; }
|
|
994
994
|
.kol-tool-palette .kol-btn:disabled { opacity: var(--kol-opacity-disabled); }
|
|
995
995
|
.kol-tool-palette .kol-btn:not(:disabled):not(.kol-dd-trigger):active { transform: scale(0.92); }
|
|
996
|
+
|
|
997
|
+
/* ── Kanban — .kol-kanban (DocumentLibraryAndBoardParts, kol-website 2026-10-29) ─────────────────
|
|
998
|
+
* record's board: one column per stage from md, stacked on a phone. The column count is the
|
|
999
|
+
* component's (`--kol-kanban-cols`); the drop states are the card's and the column's. */
|
|
1000
|
+
.kol-kanban {
|
|
1001
|
+
display: grid;
|
|
1002
|
+
gap: 12px;
|
|
1003
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1004
|
+
}
|
|
1005
|
+
@media (min-width: 768px) {
|
|
1006
|
+
.kol-kanban { grid-template-columns: repeat(var(--kol-kanban-cols, 4), minmax(0, 1fr)); }
|
|
1007
|
+
}
|
|
1008
|
+
.kol-kanban-column {
|
|
1009
|
+
display: flex;
|
|
1010
|
+
flex-direction: column;
|
|
1011
|
+
gap: 8px;
|
|
1012
|
+
min-height: 10rem;
|
|
1013
|
+
padding: 8px;
|
|
1014
|
+
border: 1px solid var(--kol-fg-08);
|
|
1015
|
+
border-radius: 4px;
|
|
1016
|
+
transition: background-color 150ms;
|
|
1017
|
+
}
|
|
1018
|
+
.kol-kanban-column.is-over { background-color: var(--kol-fg-04); }
|
|
1019
|
+
.kol-kanban-card {
|
|
1020
|
+
display: flex;
|
|
1021
|
+
flex-direction: column;
|
|
1022
|
+
gap: 6px;
|
|
1023
|
+
padding: 8px;
|
|
1024
|
+
border: 1px solid var(--kol-fg-08);
|
|
1025
|
+
border-radius: 4px;
|
|
1026
|
+
background-color: var(--kol-surface-secondary);
|
|
1027
|
+
cursor: grab;
|
|
1028
|
+
}
|
|
1029
|
+
.kol-kanban-card:active { cursor: grabbing; }
|
|
1030
|
+
.kol-kanban-card.is-drop-target { box-shadow: 0 -2px 0 0 var(--kol-fg-64); }
|
|
1031
|
+
|
|
1032
|
+
/* ── SortableGrid — .kol-sortable-grid (the same ticket) ─────────────────────────────────────────
|
|
1033
|
+
* record's Projects grid: auto-fill tracks at least `--kol-sortable-min` wide; the item being dragged
|
|
1034
|
+
* fades, the one under it takes a dashed ring (record's kol-dashboard.css, carried). */
|
|
1035
|
+
.kol-sortable-grid {
|
|
1036
|
+
display: grid;
|
|
1037
|
+
gap: 16px;
|
|
1038
|
+
grid-template-columns: repeat(auto-fill, minmax(min(var(--kol-sortable-min, 280px), 100%), 1fr));
|
|
1039
|
+
}
|
|
1040
|
+
.kol-sortable-item.is-dragging { opacity: 0.35; }
|
|
1041
|
+
.kol-sortable-item.is-drop-target { outline: 2px dashed currentColor; outline-offset: 3px; border-radius: 4px; }
|
|
1042
|
+
.kol-sortable-handle { cursor: grab; }
|
|
1043
|
+
.kol-sortable-handle:active { cursor: grabbing; }
|