mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
32e89c1299
* adding showcase page * adding CardStatsList * clean up, tighter code * code review and code clean up * update import, clean up env for error message * tweak some css code * less css, rebuilt * re-adding bem, modifier for bds variants
49 lines
1.6 KiB
SCSS
49 lines
1.6 KiB
SCSS
// BDS CardStats Pattern Styles
|
|
// Brand Design System - Section with heading, description, and grid of CardStat components
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-card-stats - Base section container
|
|
//
|
|
// Design tokens from Figma:
|
|
// Light Mode:
|
|
// - Background: White (#FFFFFF)
|
|
// - Heading: Neutral Black (#141414) → $black
|
|
// - Description: Neutral Black (#141414) → $black
|
|
//
|
|
// Dark Mode:
|
|
// - Background: transparent (inherits page background)
|
|
// - Heading: Neutral White (#FFFFFF) → $white
|
|
// - Description: Neutral White (#FFFFFF) → $white
|
|
//
|
|
// - Header content max-width: 808px (approximately 8 columns at desktop)
|
|
// - Gap between heading and description: 16px
|
|
// - Gap between cards: 8px (matches $bds-grid-gutter)
|
|
|
|
|
|
// Spacing - Section padding
|
|
$bds-card-stats-padding-y-sm: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-card-stats-padding-y-md: $bds-space-3xl; // 32px - spacing('3xl')
|
|
$bds-card-stats-padding-y-lg: $bds-space-4xl; // 40px - spacing('4xl')
|
|
|
|
// =============================================================================
|
|
// Base Section Styles
|
|
// =============================================================================
|
|
|
|
.bds-card-stats {
|
|
// Vertical padding
|
|
padding-top: $bds-card-stats-padding-y-sm;
|
|
padding-bottom: $bds-card-stats-padding-y-sm;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-card-stats-padding-y-md;
|
|
padding-bottom: $bds-card-stats-padding-y-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-card-stats-padding-y-lg;
|
|
padding-bottom: $bds-card-stats-padding-y-lg;
|
|
}
|
|
}
|
|
|
|
// Header section uses SectionHeader component
|