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
262 lines
8.4 KiB
SCSS
262 lines
8.4 KiB
SCSS
// =============================================================================
|
|
// FeatureSingleTopic Pattern
|
|
// =============================================================================
|
|
// A feature section pattern with single topic layout for title and media.
|
|
// Supports variants (default, accentSurface).
|
|
// Orientation (left, right) is handled via Bootstrap utility classes in TSX.
|
|
// Based on Figma: 1280px desktop design with 706px image + content area
|
|
//
|
|
// Note: Buttons are rendered using the ButtonGroup component.
|
|
// =============================================================================
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
|
|
// Background colors from _colors.scss
|
|
$bds-single-topic-bg: $white; // #FFFFFF (Neutral-white)
|
|
$bds-single-topic-title-bg: $gray-200; // #E6EAF0 (Neutral-200) for accentSurface variant
|
|
|
|
// Text colors from _colors.scss
|
|
$bds-single-topic-title-color: $black; // #141414 (Neutral-black)
|
|
$bds-single-topic-description-color: $gray-500; // #72777E (Neutral-500)
|
|
|
|
// Spacing - Desktop (≥992px) - based on Figma 1280px design
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
$bds-single-topic-desktop-py: $bds-space-4xl; // 40px - spacing('4xl')
|
|
$bds-single-topic-desktop-content-pl: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-single-topic-desktop-description-gap: $bds-space-4xl; // 40px - spacing('4xl')
|
|
$bds-single-topic-desktop-title-padding: $bds-space-lg; // 16px - spacing('lg')
|
|
$bds-single-topic-desktop-height: 565px; // Fixed height from Figma design
|
|
|
|
// Spacing - Tablet (576px - 991px)
|
|
$bds-single-topic-tablet-py: $bds-space-3xl; // 32px - spacing('3xl')
|
|
$bds-single-topic-tablet-content-gap: $bds-space-3xl; // 32px - spacing('3xl')
|
|
$bds-single-topic-tablet-content-min-height: 320px; // Min height for content on tablet
|
|
$bds-single-topic-tablet-title-description-gap: $bds-space-8xl; // 80px - spacing('8xl')
|
|
|
|
// Spacing - Mobile (<576px)
|
|
$bds-single-topic-mobile-py: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-single-topic-mobile-content-gap: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-single-topic-mobile-content-min-height: 280px; // Min height for content on mobile
|
|
$bds-single-topic-mobile-title-description-gap: $bds-space-4xl; // 40px - spacing('4xl')
|
|
|
|
// =============================================================================
|
|
// Base Styles
|
|
// =============================================================================
|
|
.bds-feature-single-topic {
|
|
width: 100%;
|
|
background-color: $bds-single-topic-bg;
|
|
|
|
// Container - uses PageGrid with vertical padding
|
|
&__container {
|
|
padding-top: $bds-single-topic-mobile-py;
|
|
padding-bottom: $bds-single-topic-mobile-py;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-single-topic-tablet-py;
|
|
padding-bottom: $bds-single-topic-tablet-py;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-single-topic-desktop-py;
|
|
padding-bottom: $bds-single-topic-desktop-py;
|
|
}
|
|
}
|
|
|
|
// Row - align items stretch so columns match height
|
|
// Use row-gap for spacing between image and content on mobile/tablet
|
|
&__row {
|
|
align-items: stretch;
|
|
row-gap: $bds-single-topic-mobile-content-gap;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
row-gap: $bds-single-topic-tablet-content-gap;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
row-gap: 0;
|
|
// Fixed height from Figma design
|
|
height: $bds-single-topic-desktop-height;
|
|
}
|
|
}
|
|
|
|
// Media column
|
|
&__media-col {
|
|
@include media-breakpoint-up(lg) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// Content column - flex container with left padding on desktop
|
|
&__content-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-left: $bds-single-topic-desktop-content-pl;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// Media container
|
|
&__media {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Media image - responsive aspect ratios per Figma
|
|
&__media-img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
// Mobile: 343/193 aspect ratio
|
|
aspect-ratio: 343 / 193;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
// Tablet: 16/9 aspect ratio
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
// Desktop: 701/561 aspect ratio (fills the 565px height)
|
|
aspect-ratio: 701 / 561;
|
|
height: $bds-single-topic-desktop-height;
|
|
}
|
|
}
|
|
|
|
// Content wrapper - uses space-between to push title to top, description/CTA to bottom
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
// Gap between accent/title section and description section
|
|
gap: $bds-single-topic-mobile-title-description-gap; // 40px on mobile
|
|
// Min height on mobile to prevent squished content
|
|
min-height: $bds-single-topic-mobile-content-min-height;
|
|
justify-content: space-between;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-single-topic-tablet-title-description-gap; // 80px on tablet
|
|
min-height: $bds-single-topic-tablet-content-min-height;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
min-height: auto; // Desktop uses fixed height from row
|
|
gap: 0; // space-between handles the gap on desktop
|
|
}
|
|
}
|
|
|
|
// Title section - at the top
|
|
&__title-section {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// Title - Heading MD from styles/_font.scss
|
|
// Font: Tobias (secondary/monospace), Size: 40px, Weight: 300, Line-height: 46px, Letter-spacing: -1px
|
|
&__title {
|
|
@include type(heading-md);
|
|
color: $bds-single-topic-title-color;
|
|
margin: 0;
|
|
}
|
|
|
|
// Description section - at the bottom, contains description + ButtonGroup
|
|
&__description-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-single-topic-mobile-content-gap;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-single-topic-desktop-description-gap;
|
|
}
|
|
}
|
|
|
|
// Description - Label L from styles/_font.scss
|
|
// Font: Booton (primary/sans-serif), Size: 16px, Weight: 300 (light), Line-height: 23.2px
|
|
&__description {
|
|
@include type(label-l);
|
|
color: $bds-single-topic-description-color;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Variant Modifiers
|
|
// =============================================================================
|
|
|
|
// Default variant - no background on title section
|
|
.bds-feature-single-topic--default {
|
|
.bds-feature-single-topic__title-section {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// AccentSurface variant - gray background on title section
|
|
.bds-feature-single-topic--accentSurface {
|
|
.bds-feature-single-topic__title-section {
|
|
background-color: $bds-single-topic-title-bg;
|
|
padding: $bds-single-topic-desktop-title-padding;
|
|
// Mobile min-height
|
|
min-height: 160px;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
// Tablet min-height
|
|
min-height: 200px;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
// Desktop min-height
|
|
min-height: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Dark Mode Theme Overrides
|
|
// =============================================================================
|
|
|
|
// Dark mode design tokens from Figma
|
|
$bds-single-topic-dark-bg: $black; // #141414 (Neutral/black)
|
|
$bds-single-topic-dark-title-bg: $gray-300; // #CAD4DF (Neutral/300default) for accentSurface variant
|
|
$bds-single-topic-dark-title-color: $black; // #141414 - title stays black on light background
|
|
$bds-single-topic-dark-description-color: $white; // #FFFFFF - description is white in dark mode
|
|
|
|
html.dark {
|
|
.bds-feature-single-topic {
|
|
background-color: $bds-single-topic-dark-bg;
|
|
|
|
&__title {
|
|
color: $white; // White title on dark background for default variant
|
|
}
|
|
|
|
&__description {
|
|
color: $bds-single-topic-dark-description-color;
|
|
}
|
|
}
|
|
|
|
// Default variant in dark mode - title is white on dark background
|
|
.bds-feature-single-topic--default {
|
|
.bds-feature-single-topic__title-section {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bds-feature-single-topic__title {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// AccentSurface variant in dark mode - title section has light background
|
|
.bds-feature-single-topic--accentSurface {
|
|
.bds-feature-single-topic__title-section {
|
|
background-color: $bds-single-topic-dark-title-bg;
|
|
}
|
|
|
|
// Title stays black on the light gray background
|
|
.bds-feature-single-topic__title {
|
|
color: $bds-single-topic-dark-title-color;
|
|
}
|
|
}
|
|
}
|
|
|