mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-08 03:06:50 +00:00
f10dbc8c29
* updating docs landing page, took far but not complete. Pushing for Gabe take over * Refactor home page sections and introduce new components - Replaced existing content in index.page.tsx with new section components for improved structure and maintainability. - Added new sections: HomeBeginJourneySection, HomeBlockchainStatsSection, HomeComplianceDirectorySection, HomeDevelopersFeatureSection, HomeFutureFinanceCallout, HomeHeroCallout, HomeInstitutionsFeatureSection, HomePartnerLogosSection, HomeStayConnectedSection, and HomeCarousel. - Updated styles for CarouselFeatured and CardStat components to enhance visual consistency and responsiveness. - Introduced SCSS for HomeHero section to manage layout and spacing effectively. * Add Payments Page and Sections - Created a new Payments page with multiple sections including Hero, Why Choose, Advanced Features, Stablecoins, Embedded Payments, Partner Logos, Flexible Integration, Developer Spotlight, and Stay Connected. - Each section is designed to highlight various aspects of the XRP Ledger Payments Infrastructure, featuring components like FeaturedVideoHero and CardsIconGrid. - Added corresponding styles and images to enhance the visual presentation of the new sections. * adding icons, updating docs landing page * updating the claude command, wrapping text with translate wrapper * use case tokenization page built * Enhance CarouselFeatured styles for improved responsiveness - Added flex-direction adjustments for CarouselFeatured component to support column-reverse layout on smaller screens and row layout on medium and larger screens. - Removed redundant vendor prefixes from box-sizing and text-decoration properties in devportal2024-v1.css for cleaner code and improved maintainability. * moving payments page to correct folder, moving payments under pages * adding developers home page * code clean up --------- Co-authored-by: gabriel-ortiz <gabriel.ortiz.github@gmail.com> Co-authored-by: gabriel-ortiz <gortiz@ripple.com>
174 lines
5.6 KiB
SCSS
174 lines
5.6 KiB
SCSS
// BDS LinkTextCard Pattern Styles
|
|
// Brand Design System - Numbered card with heading, description, and CTA buttons
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-link-text-card - Base card container with border-top divider
|
|
// .bds-link-text-card__header - Header section (number + heading)
|
|
// .bds-link-text-card__content - Content section (description + buttons)
|
|
//
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
|
|
// =============================================================================
|
|
// Design Tokens (from _spacing.scss)
|
|
// =============================================================================
|
|
|
|
// Header gap (between number and heading)
|
|
$bds-link-text-card-header-gap-base: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-link-text-card-header-gap-md: $bds-space-md; // 12px - spacing('md')
|
|
$bds-link-text-card-header-gap-lg: $bds-space-lg; // 16px - spacing('lg')
|
|
|
|
// Content gap (between description and buttons)
|
|
$bds-link-text-card-content-gap-base: $bds-space-lg; // 16px - spacing('lg')
|
|
$bds-link-text-card-content-gap-md: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-link-text-card-content-gap-lg: $bds-space-3xl; // 32px - spacing('3xl')
|
|
|
|
// Card gap (between header and content sections)
|
|
$bds-link-text-card-gap-base: $bds-gap-section-sm; // 24px - spacing('2xl')
|
|
$bds-link-text-card-gap-md: $bds-gap-section-md; // 32px - spacing('3xl')
|
|
$bds-link-text-card-gap-lg: $bds-gap-section-lg; // 40px - spacing('4xl')
|
|
|
|
// Padding
|
|
$bds-link-text-card-padding-top-base: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-link-text-card-padding-top-md: $bds-space-md; // 12px - spacing('md')
|
|
$bds-link-text-card-padding-top-lg: $bds-space-lg; // 16px - spacing('lg')
|
|
|
|
$bds-link-text-card-padding-bottom-base: $bds-space-2xl; // 24px - spacing('2xl')
|
|
$bds-link-text-card-padding-bottom-md: $bds-space-3xl; // 32px - spacing('3xl')
|
|
$bds-link-text-card-padding-bottom-lg: $bds-space-4xl; // 40px - spacing('4xl')
|
|
|
|
// Border
|
|
$bds-link-text-card-border-width: 1px;
|
|
$bds-link-text-card-border-color: $gray-300;
|
|
|
|
// Text color
|
|
$bds-link-text-card-number-color: $gray-500;
|
|
|
|
// List styling
|
|
$bds-link-text-card-list-padding-inline-start: $bds-space-xl; // 16px - spacing('xl')
|
|
$bds-link-text-card-list-item-padding-inline-start: $bds-space-sm; // 8px - spacing('sm')
|
|
$bds-link-text-card-list-marker-symbol: "\2192\00a0"; // right arrow + non-breaking space
|
|
|
|
// Content width at MD+
|
|
$bds-link-text-card-content-width-md: calc(75% - 2px);
|
|
|
|
// =============================================================================
|
|
// Card Component
|
|
// =============================================================================
|
|
|
|
.bds-link-text-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: $bds-link-text-card-border-width solid
|
|
$bds-link-text-card-border-color;
|
|
padding-top: $bds-link-text-card-padding-top-base;
|
|
padding-bottom: $bds-link-text-card-padding-bottom-base;
|
|
gap: $bds-link-text-card-gap-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-link-text-card-padding-top-md;
|
|
padding-bottom: $bds-link-text-card-padding-bottom-md;
|
|
gap: $bds-link-text-card-gap-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-link-text-card-padding-top-lg;
|
|
padding-bottom: $bds-link-text-card-padding-bottom-lg;
|
|
gap: $bds-link-text-card-gap-lg;
|
|
}
|
|
|
|
// Remove padding-bottom for the last card in the list
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
@include bds-theme-mode(dark) {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section (Number + Heading)
|
|
// =============================================================================
|
|
|
|
.bds-link-text-card__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-link-text-card-header-gap-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-link-text-card-header-gap-md;
|
|
width: $bds-link-text-card-content-width-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-link-text-card-header-gap-lg;
|
|
}
|
|
|
|
p {
|
|
color: $bds-link-text-card-number-color;
|
|
}
|
|
@include bds-theme-mode(dark) {
|
|
color: $white;
|
|
p {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Content Section (Description + Buttons)
|
|
// =============================================================================
|
|
|
|
.bds-link-text-card .bds-link-text-card__content ul {
|
|
list-style: initial;
|
|
}
|
|
|
|
.bds-link-text-card__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-link-text-card-content-gap-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-link-text-card-content-gap-md;
|
|
width: $bds-link-text-card-content-width-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-link-text-card-content-gap-lg;
|
|
}
|
|
|
|
p {
|
|
color: $bds-link-text-card-number-color;
|
|
}
|
|
|
|
& ul {
|
|
// logical padding improves support for RTL/writing modes
|
|
padding-inline-start: $bds-link-text-card-list-padding-inline-start;
|
|
// fallback for browsers/rulesets that ignore logical properties
|
|
padding-left: $bds-link-text-card-list-padding-inline-start !important;
|
|
}
|
|
|
|
& li {
|
|
// creates explicit spacing between marker and list item text
|
|
padding-inline-start: $bds-link-text-card-list-item-padding-inline-start;
|
|
padding-left: $bds-link-text-card-list-item-padding-inline-start;
|
|
}
|
|
|
|
& ul::marker,
|
|
& li::marker {
|
|
content: $bds-link-text-card-list-marker-symbol;
|
|
color: $bds-link-text-card-number-color;
|
|
}
|
|
|
|
@include bds-theme-mode(dark) {
|
|
color: $white;
|
|
p {
|
|
color: $white;
|
|
}
|
|
& ul::marker,
|
|
& li::marker {
|
|
content: $bds-link-text-card-list-marker-symbol;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|