@kolkrabbi/kol-theme 0.197.0 → 0.198.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-organisms.css +48 -0
- package/package.json +1 -1
|
@@ -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; }
|