c1d2df9327
Replaces `swp-section-label` with standardized `swp-card-header` and `swp-card-title` Improves component consistency across multiple features: - Adds structured card headers - Introduces more semantic HTML elements - Enhances layout and readability of card components Updates CSS and component styles to support new structure
273 lines
6 KiB
CSS
273 lines
6 KiB
CSS
/**
|
|
* Stats - Statistics Components
|
|
*
|
|
* Stat bars, cards, values og trends
|
|
*/
|
|
|
|
/* ===========================================
|
|
STATS CONTAINER (Grid/Bar/Row)
|
|
=========================================== */
|
|
swp-stats-bar,
|
|
swp-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--card-gap);
|
|
margin-bottom: var(--section-gap);
|
|
|
|
}
|
|
|
|
swp-stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--card-gap);
|
|
margin-bottom: var(--section-gap);
|
|
|
|
&.cols-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
/* Reset margin when stat-card is inside stats-row */
|
|
& swp-stat-card {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Tab-based visibility for multi-stat rows */
|
|
&[data-for-tab]:not(.active) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT CARD
|
|
=========================================== */
|
|
swp-stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-surface);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: var(--card-padding);
|
|
margin-top: var(--section-gap);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-stat-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
padding: var(--card-padding);
|
|
background: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT VALUE
|
|
=========================================== */
|
|
swp-stat-value {
|
|
display: block;
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
/* Larger variant for emphasis */
|
|
swp-stat-card swp-stat-value,
|
|
swp-stat-box swp-stat-value {
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT LABEL
|
|
=========================================== */
|
|
swp-stat-label {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
margin-top: var(--spacing-2);
|
|
}
|
|
|
|
swp-stat-box swp-stat-label {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT SUBTITLE
|
|
=========================================== */
|
|
swp-stat-subtitle {
|
|
display: block;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-muted);
|
|
margin-top: var(--spacing-1);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT TREND / CHANGE
|
|
Parent pattern with direction/color variants + CSS nesting
|
|
=========================================== */
|
|
swp-stat-trend,
|
|
swp-stat-change {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
font-size: var(--font-size-xs);
|
|
margin-top: var(--spacing-2);
|
|
|
|
& i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.up,
|
|
&.positive {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
&.down,
|
|
&.negative {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
&.neutral {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR MODIFIERS
|
|
Using CSS nesting for cleaner color variants
|
|
=========================================== */
|
|
swp-stat-card,
|
|
swp-stat-box {
|
|
&.highlight swp-stat-value,
|
|
&.teal swp-stat-value {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
&.success swp-stat-value {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
&.warning swp-stat-value,
|
|
&.amber swp-stat-value {
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
&.danger swp-stat-value,
|
|
&.negative swp-stat-value,
|
|
&.red swp-stat-value {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
&.purple swp-stat-value {
|
|
color: var(--color-purple);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
HIGHLIGHT CARD (Filled Background)
|
|
Using CSS nesting for child selectors
|
|
=========================================== */
|
|
swp-stat-card.highlight.filled {
|
|
background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
|
|
color: white;
|
|
border-color: transparent;
|
|
|
|
& swp-stat-value {
|
|
color: white;
|
|
}
|
|
|
|
& swp-stat-label {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
& swp-stat-change {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT ITEM (Inline Variant)
|
|
=========================================== */
|
|
swp-stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-1);
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
background: var(--color-background);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
swp-stat-item swp-stat-value {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
swp-stat-item swp-stat-value.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
swp-stat-item swp-stat-label {
|
|
font-size: var(--font-size-xs);
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ===========================================
|
|
QUICK STATS (Sidebar Variant)
|
|
=========================================== */
|
|
swp-quick-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--card-gap);
|
|
}
|
|
|
|
swp-quick-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
padding: var(--card-padding);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
swp-quick-stat swp-stat-value {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-quick-stat swp-stat-label {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
RESPONSIVE
|
|
=========================================== */
|
|
@media (max-width: 1200px) {
|
|
swp-stats-bar,
|
|
swp-stats-grid,
|
|
swp-stats-row.cols-4 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
swp-stats-bar,
|
|
swp-stats-grid,
|
|
swp-stats-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
swp-quick-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|