mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
392 lines
12 KiB
SCSS
392 lines
12 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
|
|
// =============================================================================
|
|
|
|
// Background colors for each color variant (light mode)
|
|
// From styles/_colors.scss - Design tokens
|
|
$bds-feature-neutral-bg: $gray-100; // #F0F3F7 (Neutral-100)
|
|
$bds-feature-lilac-bg: $lilac-200; // #D9CAFF (Primary-Lilac-200)
|
|
$bds-feature-yellow-bg: $yellow-100; // #F3F1EB (Secondary-Yellow-100)
|
|
$bds-feature-green-bg: $green-300; // #21E46B (Primary-Green-300default)
|
|
|
|
// Background colors for dark mode
|
|
// From styles/_colors.scss - Design tokens
|
|
$bds-feature-neutral-bg-dark: $gray-200; // #E6EAF0 (Neutral-200)
|
|
$bds-feature-lilac-bg-dark: $lilac-200; // #D9CAFF (Primary-Lilac-200)
|
|
$bds-feature-yellow-bg-dark: $yellow-100; // #F3F1EB (Secondary-Yellow-100)
|
|
$bds-feature-green-bg-dark: $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
|
|
$bds-feature-desktop-py: 96px;
|
|
$bds-feature-desktop-text-gap: 16px;
|
|
$bds-feature-desktop-cta-gap-row: 0px; // Gap between buttons in row (from Figma FeatureCTA_Default)
|
|
$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: 80px;
|
|
$bds-feature-tablet-pl: 115px; // Left padding from Figma
|
|
$bds-feature-tablet-pr: 107px; // Right padding from Figma
|
|
$bds-feature-tablet-text-gap: 8px;
|
|
$bds-feature-tablet-cta-gap-row: 16px; // Gap between buttons in row from Figma
|
|
$bds-feature-tablet-cta-gap-col: 0;
|
|
$bds-feature-tablet-content-gap: 32px;
|
|
|
|
// Spacing - Mobile (<576px) - based on Figma 375px design
|
|
$bds-feature-mobile-py: 64px;
|
|
$bds-feature-mobile-px: 16px;
|
|
$bds-feature-mobile-text-gap: 8px;
|
|
$bds-feature-mobile-cta-gap: 16px; // Gap between stacked buttons from Figma
|
|
$bds-feature-mobile-content-gap: 24px;
|
|
|
|
// =============================================================================
|
|
// Base Styles
|
|
// =============================================================================
|
|
|
|
.bds-feature-two-column {
|
|
width: 100%;
|
|
|
|
// Desktop layout - hidden on mobile/tablet, shown on desktop
|
|
&__desktop-layout {
|
|
display: none;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 1280px; // Max container width from Figma
|
|
margin: 0 auto; // Center the container
|
|
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: horizontal and vertical padding from Figma
|
|
padding: $bds-feature-mobile-py $bds-feature-mobile-px;
|
|
|
|
// Tablet: specific left/right padding from Figma (115px left, 107px right)
|
|
@include media-breakpoint-up(md) {
|
|
padding: $bds-feature-tablet-py $bds-feature-tablet-pr $bds-feature-tablet-py $bds-feature-tablet-pl;
|
|
}
|
|
|
|
// Desktop: 50% width with padding from Figma: pl-32px, pr-102px, py-96px
|
|
@include media-breakpoint-up(lg) {
|
|
width: 50%;
|
|
padding: $bds-feature-desktop-py 102px $bds-feature-desktop-py 32px;
|
|
// Match height of media column (which has aspect-ratio 1/1)
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
}
|
|
|
|
// 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/tablet: use explicit gaps (32px from Figma tablet design)
|
|
// Desktop: no gap, space-between handles distribution
|
|
&__content--multiple {
|
|
gap: $bds-feature-tablet-content-gap; // 32px for mobile
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-feature-tablet-content-gap; // 32px for tablet
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: 0; // Desktop uses 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;
|
|
}
|
|
|
|
// CTA container - base styles
|
|
&__cta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: $bds-feature-mobile-cta-gap;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: $bds-feature-tablet-cta-gap-row;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-feature-desktop-cta-gap-row;
|
|
}
|
|
}
|
|
|
|
// CTA variants
|
|
&__cta--single {
|
|
// Single secondary button - vertical on mobile
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__cta--double {
|
|
// Primary + tertiary - horizontal on tablet+
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// CTA row - for first two buttons in multiple links layout (Primary + Tertiary)
|
|
&__cta-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: $bds-feature-mobile-cta-gap;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: $bds-feature-tablet-cta-gap-row;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: $bds-feature-desktop-cta-gap-row; // 25px from Figma
|
|
}
|
|
}
|
|
|
|
// Tertiary group - groups remaining tertiary links together as a single unit
|
|
// No gap between tertiary links - they stack tightly as a group
|
|
&__tertiary-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0; // No spacing between tertiary links in the group
|
|
|
|
// Tertiary links need left padding removed to align text with title
|
|
.bds-btn--tertiary {
|
|
padding-left: 0 !important;
|
|
margin-left: 0;
|
|
|
|
&:hover:not(:disabled):not(.bds-btn--disabled),
|
|
&:focus:not(:disabled):not(.bds-btn--disabled),
|
|
&:focus-visible:not(:disabled):not(.bds-btn--disabled),
|
|
&:active:not(:disabled):not(.bds-btn--disabled) {
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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
|
|
// =============================================================================
|
|
|
|
// Neutral variant (default white/black)
|
|
.bds-feature-two-column--neutral {
|
|
background-color: $bds-feature-neutral-bg;
|
|
}
|
|
|
|
// Lilac variant
|
|
.bds-feature-two-column--lilac {
|
|
background-color: $bds-feature-lilac-bg;
|
|
}
|
|
|
|
// Yellow variant
|
|
.bds-feature-two-column--yellow {
|
|
background-color: $bds-feature-yellow-bg;
|
|
}
|
|
|
|
// Green variant
|
|
.bds-feature-two-column--green {
|
|
background-color: $bds-feature-green-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;
|
|
}
|
|
}
|
|
|
|
.bds-feature-two-column--neutral {
|
|
background-color: $bds-feature-neutral-bg-dark;
|
|
}
|
|
|
|
.bds-feature-two-column--lilac {
|
|
background-color: $bds-feature-lilac-bg-dark;
|
|
}
|
|
|
|
.bds-feature-two-column--yellow {
|
|
background-color: $bds-feature-yellow-bg-dark;
|
|
}
|
|
|
|
.bds-feature-two-column--green {
|
|
background-color: $bds-feature-green-bg-dark;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// 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 column padding adjustment for right layout
|
|
.bds-feature-two-column__content-col {
|
|
@include media-breakpoint-up(lg) {
|
|
padding-right: $bds-feature-desktop-py;
|
|
padding-left: 48px;
|
|
}
|
|
}
|
|
}
|
|
|