mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-10-06 11:57:58 +00:00
176fb3cbc7
* 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
111 lines
3.8 KiB
SCSS
111 lines
3.8 KiB
SCSS
// BDS CardsFeatured Pattern Styles
|
|
// Brand Design System - Section with heading, description, and grid of CardImage components
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-cards-featured - Base section container
|
|
// .bds-cards-featured__cards - Cards grid container
|
|
// .bds-cards-featured__card-wrapper - Individual card wrapper
|
|
//
|
|
// Design tokens from Figma:
|
|
// Light Mode:
|
|
// - Heading: Neutral Black (#141414) → $black
|
|
// - Description: Neutral Black (#141414) → $black
|
|
//
|
|
// Dark Mode:
|
|
// - Heading: Neutral White (#FFFFFF) → $white
|
|
// - Description: Neutral White (#FFFFFF) → $white
|
|
//
|
|
// - Header: uses SectionHeader component
|
|
// - Gap between cards: 8px (matches $bds-grid-gutter)
|
|
|
|
// =============================================================================
|
|
// Design Tokens (from Figma)
|
|
// =============================================================================
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
// $bds-grid-gutter is defined in _spacing.scss (8px).
|
|
|
|
// Spacing - Section gap handled by SectionHeader margin-bottom
|
|
|
|
// Spacing - Cards gap
|
|
$bds-cards-featured-cards-gap-sm: $bds-space-5xl; // 48px - spacing('5xl')
|
|
$bds-cards-featured-cards-gap-md: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-cards-featured-cards-gap-lg: $bds-space-sm; // 8px - spacing('sm')
|
|
|
|
// Spacing - Section padding (vertical)
|
|
$bds-cards-featured-padding-y-sm: $bds-space-5xl; // 48px - spacing('5xl')
|
|
$bds-cards-featured-padding-y-md: $bds-space-6xl; // 64px - spacing('6xl')
|
|
$bds-cards-featured-padding-y-lg: $bds-space-8xl; // 80px - spacing('8xl')
|
|
|
|
// Spacing - Section padding (horizontal) - handled by PageGrid
|
|
|
|
// =============================================================================
|
|
// Section Container
|
|
// =============================================================================
|
|
|
|
.bds-cards-featured {
|
|
width: 100%;
|
|
padding-top: $bds-cards-featured-padding-y-sm;
|
|
padding-bottom: $bds-cards-featured-padding-y-sm;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-cards-featured-padding-y-md;
|
|
padding-bottom: $bds-cards-featured-padding-y-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-cards-featured-padding-y-lg;
|
|
padding-bottom: $bds-cards-featured-padding-y-lg;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Cards Grid
|
|
// =============================================================================
|
|
|
|
.bds-cards-featured__cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
column-gap: $bds-cards-featured-cards-gap-sm;
|
|
row-gap: $bds-space-5xl; // 48px - spacing('5xl')
|
|
width: 100%;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
column-gap: $bds-cards-featured-cards-gap-md;
|
|
row-gap: 52px; // Non-standard value, kept as-is
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: $bds-cards-featured-cards-gap-lg;
|
|
row-gap: 56px; // Non-standard value, kept as-is
|
|
}
|
|
}
|
|
|
|
.bds-cards-featured__card-wrapper {
|
|
display: flex;
|
|
min-width: 0; // Allow flex child to shrink below content size
|
|
width: 100%; // Ensure wrapper fills grid cell
|
|
|
|
// Ensure CardImage fills the wrapper
|
|
.bds-card-image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Light Mode Styles (from Figma node 27020-3048)
|
|
// =============================================================================
|
|
|
|
html.light {
|
|
.bds-cards-featured {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Dark Mode Styles (from Figma node 27020-3045)
|
|
// =============================================================================
|
|
// Header colors handled by SectionHeader component
|
|
|