Files
fusion/packages/dashboard/app/components/Board.css
2026-06-22 16:21:03 -07:00

70 lines
1.6 KiB
CSS

/*
FNXC:BoardWorkflows 2026-06-20-09:02:
The board needs a neutral first-paint shell whenever workflow lanes are enabled but metadata is not ready, so users never see the legacy single-lane board flash before workflow lanes load.
*/
.board.board-workflows-skeleton {
display: flex;
align-items: stretch;
gap: var(--column-gap, var(--space-md));
overflow-x: auto;
overflow-y: hidden;
padding: var(--board-padding, var(--space-md));
background: var(--bg);
}
.board-workflows-skeleton__column {
flex: 1 0 min(24rem, 85vw);
min-width: min(24rem, 85vw);
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-md);
border: 1px solid var(--border);
background: var(--surface);
}
.board-workflows-skeleton__header,
.board-workflows-skeleton__card {
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--border) 70%, var(--surface));
animation: board-workflows-skeleton-pulse 1.4s ease-in-out infinite;
}
.board-workflows-skeleton__header {
block-size: var(--space-lg);
inline-size: 55%;
}
.board-workflows-skeleton__card {
block-size: calc(var(--space-2xl) * 2);
inline-size: 100%;
}
.board-workflows-skeleton__card--short {
inline-size: 75%;
}
@keyframes board-workflows-skeleton-pulse {
0%, 100% {
opacity: 0.55;
}
50% {
opacity: 1;
}
}
@media (max-width: 768px) {
.board.board-workflows-skeleton {
gap: var(--space-sm);
padding: var(--space-sm);
scroll-snap-type: x proximity;
}
.board-workflows-skeleton__column {
flex-basis: 86vw;
min-width: 86vw;
scroll-snap-align: center;
}
}