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
357 lines
11 KiB
SCSS
357 lines
11 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-cta-gap-col: 0; // Gap between button rows
|
|
$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-pl: 115px; // Left padding from Figma (non-standard)
|
|
$bds-feature-tablet-pr: 107px; // Right padding from Figma (non-standard)
|
|
$bds-feature-tablet-text-gap: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-feature-tablet-cta-gap-row: $bds-space-lg; // 16px - spacing('lg')
|
|
$bds-feature-tablet-cta-gap-col: 0;
|
|
$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-px: $bds-space-lg; // 16px - spacing('lg')
|
|
$bds-feature-mobile-text-gap: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-feature-mobile-cta-gap: $bds-space-lg; // 16px - spacing('lg')
|
|
$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;
|
|
}
|
|
|
|
// Desktop layout - hidden on mobile/tablet, shown on desktop
|
|
&__desktop-layout {
|
|
display: none;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: stretch; // Both columns match height
|
|
}
|
|
}
|
|
|
|
// Mobile layout - shown on mobile/tablet, hidden on desktop
|
|
&__mobile-layout {
|
|
display: block;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Container - uses PageGrid with wide variant (for mobile layout)
|
|
// Override all PageGrid padding - content columns have their own padding
|
|
&__container {
|
|
padding: 0 !important; // Override PageGrid default padding at all breakpoints
|
|
}
|
|
|
|
// Row - uses PageGrid.Row (for mobile layout)
|
|
&__row {
|
|
gap: 0 !important; // No gap between content and media sections, override PageGrid
|
|
}
|
|
|
|
// 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%;
|
|
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 column wrapper - desktop layout (background image)
|
|
&__media-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// Desktop: 50% width with background image, square aspect ratio
|
|
@include media-breakpoint-up(lg) {
|
|
width: 50%;
|
|
aspect-ratio: 1 / 1;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
// Mobile media column
|
|
&__media-col--mobile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Secondary button should not stretch - keep intrinsic width
|
|
>.bds-btn--secondary {
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
|
|
// Mobile - 1:1 aspect ratio
|
|
aspect-ratio: 1 / 1;
|
|
|
|
// Tablet - 16:9 aspect ratio
|
|
@include media-breakpoint-up(md) {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
// Desktop - 1:1 aspect ratio (square)
|
|
@include media-breakpoint-up(lg) {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Layout Modifiers (Arrange)
|
|
// =============================================================================
|
|
|
|
// Right arrangement - content on right, media on left (media first on mobile/tablet)
|
|
// Use flex-direction to swap columns on all screen sizes
|
|
.bds-feature-two-column--right {
|
|
|
|
// Mobile/Tablet layout - reverse the column order to show media first
|
|
.bds-feature-two-column__row {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
|
|
// Desktop layout - reverse the flex direction for side-by-side
|
|
.bds-feature-two-column__desktop-layout {
|
|
@include media-breakpoint-up(lg) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
// Desktop content wrapper - mirror the grid positioning for right layout
|
|
// Content should start from col 2 and span 4 cols (same as left, grid handles positioning)
|
|
.bds-feature-two-column__content-wrapper {
|
|
@include media-breakpoint-up(lg) {
|
|
// Same positioning as left layout - grid alignment handles visual positioning
|
|
grid-column: 2 / span 4;
|
|
}
|
|
}
|
|
} |