mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
65 lines
2.2 KiB
SCSS
65 lines
2.2 KiB
SCSS
// BDS LinkSmallGrid Pattern Styles
|
|
// Brand Design System - Link grid section pattern with heading and responsive tile grid
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-link-small-grid - Base section container
|
|
// .bds-link-small-grid__header - Header container (heading + description)
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
|
|
// Spacing tokens
|
|
$bds-link-small-grid-spacing-base: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-link-small-grid-spacing-md: $bds-space-3xl; // 32px - spacing('3xl')
|
|
$bds-link-small-grid-spacing-lg: $bds-space-4xl; // 40px - spacing('4xl')
|
|
|
|
// Typography tokens (using existing typography classes)
|
|
// - Heading: h-md class (handled in component)
|
|
// - Description: body-l class (handled in component)
|
|
|
|
// =============================================================================
|
|
// Base Section Styles
|
|
// =============================================================================
|
|
|
|
.bds-link-small-grid {
|
|
// Section spacing
|
|
padding-top: $bds-link-small-grid-spacing-base;
|
|
padding-bottom: $bds-link-small-grid-spacing-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-link-small-grid-spacing-md;
|
|
padding-bottom: $bds-link-small-grid-spacing-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-link-small-grid-spacing-lg;
|
|
padding-bottom: $bds-link-small-grid-spacing-lg;
|
|
}
|
|
|
|
// Background color - default to transparent
|
|
background-color: transparent;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section
|
|
// =============================================================================
|
|
|
|
.bds-link-small-grid__header {
|
|
gap: $bds-space-sm; // 8px - spacing('sm')
|
|
margin-bottom: $bds-link-small-grid-spacing-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-space-lg; // 16px - spacing('lg')
|
|
margin-bottom: $bds-link-small-grid-spacing-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-space-lg; // 16px - spacing('lg')
|
|
margin-bottom: $bds-link-small-grid-spacing-lg;
|
|
}
|
|
}
|
|
|
|
|