mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-08-23 11:10:54 +00:00
111 lines
4.0 KiB
SCSS
111 lines
4.0 KiB
SCSS
// BDS StandardCardGroupSection Pattern Styles
|
|
// Brand Design System - Section with headline, description, and grid of StandardCard components
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-standard-card-group-section - Base section container
|
|
// .bds-standard-card-group-section__header - Header wrapper for headline and description
|
|
// .bds-standard-card-group-section__headline - Section headline (uses .h-md)
|
|
// .bds-standard-card-group-section__description - Section description (uses .body-l)
|
|
//
|
|
// Design tokens from Figma:
|
|
// Light Mode:
|
|
// - Headline: Neutral Black (#141414) → $black
|
|
// - Description: Neutral Black (#141414) → $black
|
|
//
|
|
// Dark Mode:
|
|
// - Headline: Neutral White (#FFFFFF) → $white
|
|
// - Description: Neutral White (#FFFFFF) → $white
|
|
//
|
|
// - Header content max-width: 808px (approximately 8 columns at desktop)
|
|
// - Gap between headline and description: 16px
|
|
// - Gap between cards: handled by PageGrid gutter
|
|
|
|
// =============================================================================
|
|
// Design Tokens (from Figma)
|
|
// =============================================================================
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
|
|
// Spacing - Header gap (between headline and description)
|
|
$bds-standard-card-group-section-header-gap-sm: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-standard-card-group-section-header-gap-md: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-standard-card-group-section-header-gap-lg: $bds-space-lg; // 16px - spacing('lg')
|
|
|
|
// Spacing - Section gap (between header and cards)
|
|
$bds-standard-card-group-section-section-gap-sm: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-standard-card-group-section-section-gap-md: $bds-space-3xl; // 32px - spacing('3xl')
|
|
$bds-standard-card-group-section-section-gap-lg: $bds-space-4xl; // 40px - spacing('4xl')
|
|
|
|
// Spacing - Section padding (vertical)
|
|
$bds-standard-card-group-section-padding-y-sm: $bds-space-5xl; // 48px - spacing('5xl')
|
|
$bds-standard-card-group-section-padding-y-md: $bds-space-6xl; // 64px - spacing('6xl')
|
|
$bds-standard-card-group-section-padding-y-lg: $bds-space-8xl; // 80px - spacing('8xl')
|
|
|
|
|
|
// =============================================================================
|
|
// Section Container
|
|
// =============================================================================
|
|
|
|
.bds-standard-card-group-section {
|
|
width: 100%;
|
|
padding-top: $bds-standard-card-group-section-padding-y-sm;
|
|
padding-bottom: $bds-standard-card-group-section-padding-y-sm;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-standard-card-group-section-padding-y-md;
|
|
padding-bottom: $bds-standard-card-group-section-padding-y-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-standard-card-group-section-padding-y-lg;
|
|
padding-bottom: $bds-standard-card-group-section-padding-y-lg;
|
|
}
|
|
|
|
@include bds-theme-mode(light) {
|
|
background-color: $white;
|
|
}
|
|
|
|
@include bds-theme-mode(dark) {
|
|
background-color: $black;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section
|
|
// =============================================================================
|
|
|
|
.bds-standard-card-group-section__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-standard-card-group-section-header-gap-sm;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-standard-card-group-section-header-gap-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-standard-card-group-section-header-gap-lg;
|
|
}
|
|
}
|
|
|
|
.bds-standard-card-group-section__headline {
|
|
margin: 0;
|
|
// Typography handled by .h-md class from _font.scss
|
|
}
|
|
|
|
.bds-standard-card-group-section__description {
|
|
margin: 0;
|
|
// Typography handled by .body-l class from _font.scss
|
|
}
|
|
|
|
|
|
.bds-standard-card-group-section__cards {
|
|
margin-top: $bds-standard-card-group-section-section-gap-sm;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
margin-top: $bds-standard-card-group-section-section-gap-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
margin-top: $bds-standard-card-group-section-section-gap-lg;
|
|
}
|
|
} |