Introduces comprehensive suppliers management with mock data, localization, and UI components Implements: - Suppliers page with data table - Localization for Danish and English - Search and filtering functionality - Responsive table design - Mock data for initial population
70 lines
1.8 KiB
CSS
70 lines
1.8 KiB
CSS
/**
|
|
* Suppliers - Page Styling
|
|
*
|
|
* Feature-specific styling only.
|
|
* Reuses:
|
|
* - swp-sticky-header, swp-header-content, swp-page-container (page.css)
|
|
* - swp-stats-row.cols-4, swp-stat-card (stats.css)
|
|
* - swp-action-bar, swp-search-input (components.css)
|
|
* - swp-data-table, swp-status-badge, swp-empty-state (components.css)
|
|
* - swp-btn (components.css)
|
|
*/
|
|
|
|
/* ===========================================
|
|
SUPPLIER TABLE (uses swp-data-table from components.css)
|
|
=========================================== */
|
|
swp-card.suppliers-list {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Table columns: Leverandør(1fr) | Kontakt(150px) | Produkter(80px) | Sidste(120px) | Status(100px) */
|
|
swp-card.suppliers-list swp-data-table {
|
|
grid-template-columns: minmax(200px, 1fr) 150px 80px 120px 100px;
|
|
}
|
|
|
|
swp-card.suppliers-list swp-data-table-header,
|
|
swp-card.suppliers-list swp-data-table-row {
|
|
padding: 0 var(--spacing-10);
|
|
}
|
|
|
|
swp-card.suppliers-list swp-data-table-header swp-data-table-cell {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
|
|
swp-card.suppliers-list swp-data-table-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-card.suppliers-list swp-data-table-cell {
|
|
padding: var(--spacing-5) 0;
|
|
}
|
|
|
|
/* Supplier cell (name + city) */
|
|
swp-supplier-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
swp-supplier-name {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-supplier-city {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Products column (center + mono) */
|
|
swp-card.suppliers-list swp-data-table-row swp-data-table-cell:nth-child(3) {
|
|
font-family: var(--font-mono);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Last order column (muted) */
|
|
swp-card.suppliers-list swp-data-table-row swp-data-table-cell:nth-child(4) {
|
|
color: var(--color-text-secondary);
|
|
}
|