141 lines
3.8 KiB
SCSS
141 lines
3.8 KiB
SCSS
// ============================================================================
|
||
// Hub Page — Responsive AgentCard Grid with Filter Chips
|
||
// Per CUB-27 spec breakpoints:
|
||
// Compact (0–599px): Single-column cards, horizontal-scroll filter chips
|
||
// Medium (600–1023px): 2-column grid
|
||
// Expanded (≥1024px): 3+ column auto-fill grid
|
||
// ============================================================================
|
||
|
||
.hub-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
min-height: 400px;
|
||
overflow-x: hidden;
|
||
padding: var(--cc-section-padding);
|
||
}
|
||
|
||
.hub-page__title {
|
||
grid-column: 1 / -1;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: var(--cc-on-surface);
|
||
margin: 0 0 8px;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Filter Chip Group
|
||
// ---------------------------------------------------------------------------
|
||
.hub-page__filters {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding: 4px 0;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none; // Firefox
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none; // Chrome/Safari
|
||
}
|
||
}
|
||
|
||
.hub-page__filter-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 36px;
|
||
min-width: 48px; // Touch target
|
||
padding: 6px 16px;
|
||
border: 1px solid var(--cc-outline);
|
||
border-radius: 20px;
|
||
background-color: transparent;
|
||
color: var(--cc-on-surface-variant);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
|
||
flex-shrink: 0; // Prevent shrinking in scroll container
|
||
|
||
&:hover {
|
||
background-color: rgba(255, 255, 255, 0.06);
|
||
color: var(--cc-on-surface);
|
||
}
|
||
|
||
&:focus-visible {
|
||
outline: 2px solid var(--status-active);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
&--active {
|
||
background-color: var(--status-active-bg);
|
||
color: var(--status-active);
|
||
border-color: var(--status-active);
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Agent Card Grid
|
||
// ---------------------------------------------------------------------------
|
||
.hub-page__grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--cc-card-gap);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Empty State
|
||
// ---------------------------------------------------------------------------
|
||
.hub-page__placeholder,
|
||
.hub-page__empty {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 48px 24px;
|
||
color: var(--cc-on-surface-variant);
|
||
font-size: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Compact (0–599px): Single-column cards
|
||
// ---------------------------------------------------------------------------
|
||
@media (max-width: 599px) {
|
||
.hub-page {
|
||
padding: 0;
|
||
}
|
||
|
||
.hub-page__grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.hub-page__filters {
|
||
padding: 4px 0 8px;
|
||
// Ensure horizontal scroll on mobile
|
||
margin: 0 -8px;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Medium (600–1023px): 2-column grid
|
||
// ---------------------------------------------------------------------------
|
||
@media (min-width: 600px) and (max-width: 1023px) {
|
||
.hub-page__grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--cc-card-gap);
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Expanded (≥1024px): 3+ column auto-fill grid
|
||
// ---------------------------------------------------------------------------
|
||
@media (min-width: 1024px) {
|
||
.hub-page__grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width), 1fr));
|
||
gap: var(--cc-card-gap);
|
||
}
|
||
} |