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
111 lines
3.9 KiB
SCSS
111 lines
3.9 KiB
SCSS
// BDS LogoRectangleGrid Component Styles
|
|
// Brand Design System - Logo grid pattern with rectangle tiles
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-logo-rectangle-grid - Base component
|
|
// .bds-logo-rectangle-grid--gray - Gray variant (maps to TileLogo 'neutral')
|
|
// .bds-logo-rectangle-grid--green - Green variant (maps to TileLogo 'green')
|
|
// .bds-logo-rectangle-grid__header - Header section container
|
|
// .bds-logo-rectangle-grid__text - Text content container
|
|
//
|
|
// Note: Individual logo tiles are rendered using the TileLogo component with shape="rectangle"
|
|
// Note: Alignment is handled dynamically by PageGridCol offset prop
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
// Note: Color variants are now handled by the TileLogo component
|
|
// LogoRectangleGrid 'gray' maps to TileLogo 'neutral'
|
|
// LogoRectangleGrid 'green' maps to TileLogo 'green'
|
|
|
|
// Spacing tokens - responsive
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
// Mobile (<768px)
|
|
$bds-lrg-header-gap-mobile: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-lrg-text-gap-mobile: $bds-space-sm; // 8px - spacing('sm')
|
|
|
|
// Tablet (768px-1023px)
|
|
$bds-lrg-header-gap-tablet: $bds-space-3xl; // 32px - spacing('3xl')
|
|
|
|
// Desktop (≥1024px)
|
|
$bds-lrg-header-gap-desktop: $bds-space-4xl; // 40px - spacing('4xl')
|
|
$bds-lrg-text-gap-desktop: $bds-space-lg; // 16px - spacing('lg')
|
|
|
|
// =============================================================================
|
|
// Base Component Styles
|
|
// =============================================================================
|
|
|
|
.bds-logo-rectangle-grid {
|
|
@extend .d-flex;
|
|
@extend .flex-column;
|
|
@extend .w-100;
|
|
|
|
// Mobile-first gap
|
|
gap: $bds-lrg-header-gap-mobile;
|
|
|
|
// Tablet breakpoint
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-lrg-header-gap-tablet;
|
|
}
|
|
|
|
// Desktop breakpoint
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-lrg-header-gap-desktop;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section
|
|
// =============================================================================
|
|
|
|
.bds-logo-rectangle-grid__header {
|
|
@extend .d-flex;
|
|
@extend .flex-column;
|
|
margin-top: $bds-space-2xl; // 24px - spacing('2xl')
|
|
margin-bottom: $bds-space-2xl; // 24px - spacing('2xl')
|
|
|
|
// Mobile-first gap
|
|
gap: $bds-lrg-header-gap-mobile;
|
|
|
|
// Tablet breakpoint
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-lrg-header-gap-tablet;
|
|
margin-top: $bds-space-3xl; // 32px - spacing('3xl')
|
|
margin-bottom: $bds-space-3xl; // 32px - spacing('3xl')
|
|
}
|
|
|
|
// Desktop breakpoint
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-lrg-header-gap-desktop;
|
|
margin-top: $bds-space-4xl; // 40px - spacing('4xl')
|
|
margin-bottom: $bds-space-4xl; // 40px - spacing('4xl')
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Text Content
|
|
// =============================================================================
|
|
|
|
.bds-logo-rectangle-grid__text {
|
|
@extend .d-flex;
|
|
@extend .flex-column;
|
|
|
|
// Mobile-first gap
|
|
gap: $bds-lrg-text-gap-mobile;
|
|
|
|
// Desktop breakpoint
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-lrg-text-gap-desktop;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Logo Grid Row
|
|
// =============================================================================
|
|
// Note: Grid layout is now handled by PageGridRow/PageGridCol
|
|
// Each tile uses PageGridCol with span={{ base: 2, md: 2, lg: 3 }}
|
|
// This gives us 2 columns on mobile (2/4), 3 columns on tablet (2/6),
|
|
// and 4 columns on desktop (3/12)
|
|
// Alignment is handled by offset prop based on logo count
|
|
// Tile rendering and styling is handled by the TileLogo component
|