mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
7d2ea6110e
- Downgraded Bootstrap version from 5.3.8 to 5.3.3 in package-lock.json. - Refactored import paths in plugin files to use local types. - Enhanced FeatureTwoColumn component with improved layout and responsive behavior. - Updated SCSS for consistent spacing and layout adjustments across breakpoints. - Revised documentation in FeatureTwoColumn.md for clarity on layout behavior and props.
299 lines
9.0 KiB
SCSS
299 lines
9.0 KiB
SCSS
// FeatureTwoColumn Pattern Styles
|
|
// =============================================================================
|
|
// A feature section pattern with two-column layout for content and media.
|
|
// Supports color themes (neutral, lilac, yellow, green) and arrangement variants.
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
|
|
// Color variants map - centralizes all variant configurations
|
|
// Structure: variant-name: (light-bg, dark-bg)
|
|
$bds-feature-variants: (
|
|
'neutral': (
|
|
light-bg: $gray-100, // #F0F3F7 (Neutral-100)
|
|
dark-bg: $gray-200 // #E6EAF0 (Neutral-200)
|
|
),
|
|
'lilac': (
|
|
light-bg: $lilac-200, // #D9CAFF (Primary-Lilac-200)
|
|
dark-bg: $lilac-200 // #D9CAFF (Primary-Lilac-200)
|
|
),
|
|
'yellow': (
|
|
light-bg: $yellow-100, // #F3F1EB (Secondary-Yellow-100)
|
|
dark-bg: $yellow-100 // #F3F1EB (Secondary-Yellow-100)
|
|
),
|
|
'green': (
|
|
light-bg: $green-300, // #21E46B (Primary-Green-300default)
|
|
dark-bg: $green-300 // #21E46B (Primary-Green-300default)
|
|
)
|
|
);
|
|
|
|
// Text colors - same for light and dark modes
|
|
// From styles/_colors.scss: $black = #141414 (Neutral-black)
|
|
$bds-feature-title-color: $black; // #141414 (Neutral-black)
|
|
$bds-feature-title-color-dark: $black; // #141414 (same in dark mode)
|
|
$bds-feature-description-color: $black; // #141414 (Neutral-black)
|
|
$bds-feature-description-color-dark: $black; // #141414 (same in dark mode)
|
|
|
|
// Spacing - Desktop (≥992px) - based on Figma 1280px design
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
// $bds-grid-gutter is defined in _spacing.scss (8px).
|
|
$bds-feature-desktop-py: 96px; // Non-standard value, kept as-is
|
|
$bds-feature-desktop-text-gap: $bds-space-lg; // 16px - spacing('lg')
|
|
$bds-feature-desktop-content-gap: 0; // Gap between text-group and cta (space-between handles this)
|
|
|
|
// Spacing - Tablet (576px - 991px) - based on Figma 768px design
|
|
$bds-feature-tablet-py: $bds-space-8xl; // 80px - spacing('8xl')
|
|
$bds-feature-tablet-text-gap: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-feature-tablet-content-gap: $bds-space-3xl; // 32px - spacing('3xl')
|
|
|
|
// Spacing - Mobile (<576px) - based on Figma 375px design
|
|
$bds-feature-mobile-py: $bds-space-6xl; // 64px - spacing('6xl')
|
|
$bds-feature-mobile-text-gap: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-feature-mobile-content-gap: $bds-space-2xl; // 24px - spacing('2xl')
|
|
|
|
// =============================================================================
|
|
// Base Styles
|
|
// =============================================================================
|
|
.bds-feature-two-column {
|
|
width: 100%;
|
|
|
|
// Extra large screens (>1280px): constrain component width and center
|
|
// Background color stays within 1280px, parent section background shows beyond
|
|
@include media-breakpoint-up(lg) {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// Single flex layout. DOM order is content then media; below lg we use column-reverse so
|
|
// media always appears on top (same stacking for layered sections). At lg+, row places
|
|
// content left / media right; --right only swaps the desktop row.
|
|
&__layout {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
width: 100%;
|
|
align-items: stretch;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
// Desktop only: content on the right, media on the left (mobile/tablet unchanged)
|
|
&--right {
|
|
.bds-feature-two-column__layout {
|
|
@include media-breakpoint-up(lg) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Content column wrapper
|
|
&__content-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// Mobile: vertical padding, no horizontal padding (grid handles positioning)
|
|
padding: $bds-feature-mobile-py 0;
|
|
|
|
// Tablet: vertical padding, no horizontal padding (grid handles positioning)
|
|
@include media-breakpoint-up(md) {
|
|
padding: $bds-feature-tablet-py 0;
|
|
}
|
|
|
|
// Desktop: 50% width, vertical padding (grid handles horizontal positioning)
|
|
@include media-breakpoint-up(lg) {
|
|
width: 50%;
|
|
min-width: 0;
|
|
padding: $bds-feature-desktop-py 0;
|
|
// Match height of media column (which has aspect-ratio 1/1)
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
}
|
|
|
|
// Content grid - positions content within column using grid system
|
|
// Desktop: 6-column grid within the content half, content spans cols 2-5 (offset-1, span-4)
|
|
// Tablet: 8-column grid, content spans cols 2-7 (offset-1, span-6)
|
|
// Mobile: 4-column grid, content spans cols 1-4 (no offset, span-4)
|
|
&__content-grid {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
// Mobile: 4 columns, content full width
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: $bds-grid-gutter;
|
|
padding: 0 $bds-space-lg; // 16px - spacing('lg')
|
|
|
|
// Tablet: 8 columns
|
|
@include media-breakpoint-up(md) {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
padding: 0 $bds-space-2xl; // 24px - spacing('2xl')
|
|
}
|
|
|
|
// Desktop: 6 columns (within the 50% content half)
|
|
@include media-breakpoint-up(lg) {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
padding: 0 $bds-space-3xl; // 32px - spacing('3xl')
|
|
}
|
|
}
|
|
|
|
// Content wrapper - positioned within the grid
|
|
&__content-wrapper {
|
|
// Mobile: span all 4 columns (cols 1-4)
|
|
grid-column: 1 / -1;
|
|
|
|
// Tablet: start at col 2, span 6 columns (cols 2-7)
|
|
@include media-breakpoint-up(md) {
|
|
grid-column: 2 / span 6;
|
|
}
|
|
|
|
// Desktop: start at col 2, span 4 columns (cols 2-5)
|
|
@include media-breakpoint-up(lg) {
|
|
grid-column: 2 / span 4;
|
|
}
|
|
}
|
|
|
|
&__media-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
width: 50%;
|
|
aspect-ratio: 1 / 1;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
// Content
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
gap: $bds-feature-mobile-content-gap;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-feature-tablet-content-gap;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-feature-desktop-content-gap;
|
|
}
|
|
}
|
|
|
|
// Content with multiple links
|
|
// Mobile: 24px gap between text-group and button-group
|
|
// Tablet: 32px gap between text-group and button-group
|
|
// Desktop: space-between with no gap (auto distribution between text-group and button-group)
|
|
&__content--multiple {
|
|
// Mobile: no gap since we only have 2 items (text-group and button-group)
|
|
// The 24px gap is handled via button-group margin or flex gap
|
|
gap: $bds-space-2xl; // 24px - spacing('2xl')
|
|
justify-content: flex-start;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: 0;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
// Text group - title + description
|
|
&__text-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-feature-mobile-text-gap;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-feature-tablet-text-gap;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-feature-desktop-text-gap;
|
|
}
|
|
}
|
|
|
|
// Title - Heading MD from styles/_font.scss
|
|
// Font: Tobias (secondary), Size: 40px, Weight: 300, Line-height: 46px, Letter-spacing: -1px
|
|
&__title {
|
|
@include type(heading-md);
|
|
color: $bds-feature-title-color; // #141414 (Neutral-black) - same in light/dark
|
|
margin: 0;
|
|
}
|
|
|
|
// Description - Body L from styles/_font.scss
|
|
// Font: Booton (primary), Size: 18px, Weight: 300, Line-height: 26.1px, Letter-spacing: -0.5px
|
|
&__description {
|
|
@include type(body-l);
|
|
color: $bds-feature-description-color; // #141414 (Neutral-black) - same in light/dark
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
|
|
// Media container
|
|
&__media {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
aspect-ratio: 1 / 1;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
flex: 1;
|
|
min-height: 0;
|
|
height: 100%;
|
|
aspect-ratio: unset;
|
|
}
|
|
}
|
|
|
|
// Media image
|
|
&__media-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Color Theme Modifiers
|
|
// =============================================================================
|
|
// Generated from $bds-feature-variants map
|
|
|
|
@each $variant-name, $variant-colors in $bds-feature-variants {
|
|
.bds-feature-two-column--#{$variant-name} {
|
|
background-color: map-get($variant-colors, light-bg);
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Dark Mode Theme Overrides
|
|
// =============================================================================
|
|
|
|
html.dark {
|
|
.bds-feature-two-column {
|
|
&__title {
|
|
color: $bds-feature-title-color-dark;
|
|
}
|
|
|
|
&__description {
|
|
color: $bds-feature-description-color-dark;
|
|
}
|
|
}
|
|
|
|
// Generate dark mode styles for each variant
|
|
@each $variant-name, $variant-colors in $bds-feature-variants {
|
|
.bds-feature-two-column--#{$variant-name} {
|
|
background-color: map-get($variant-colors, dark-bg);
|
|
}
|
|
}
|
|
}
|