mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-08 19:26:38 +00:00
c192ccec70
- Introduced new styles for the CardsTwoColumn pattern, including responsive layouts and various card designs. - Updated the xrpl.scss file to import the new CardsTwoColumn styles, ensuring they are included in the overall styling framework.
357 lines
10 KiB
SCSS
357 lines
10 KiB
SCSS
// BDS CardsTwoColumn Pattern Styles
|
|
// Brand Design System - Section with header and 2x2 card grid
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-cards-two-column - Base section container
|
|
// .bds-cards-two-column__container - Inner container with max-width
|
|
// .bds-cards-two-column__header - Header section (title + description)
|
|
// .bds-cards-two-column__header-left - Left side of header (title)
|
|
// .bds-cards-two-column__header-right - Right side of header (description)
|
|
// .bds-cards-two-column__title - Section title (heading-md)
|
|
// .bds-cards-two-column__description - Section description (body-l, muted)
|
|
// .bds-cards-two-column__cards - Cards grid container (2x2 on desktop)
|
|
// .bds-text-card - Individual text card
|
|
// .bds-text-card--green - Green variant
|
|
// .bds-text-card--neutral-light - Neutral light variant
|
|
// .bds-text-card--neutral-dark - Neutral dark variant
|
|
// .bds-text-card--lilac - Lilac variant
|
|
// .bds-text-card__header - Card header (title)
|
|
// .bds-text-card__footer - Card footer (description)
|
|
// .bds-text-card__title - Card title (heading-lg)
|
|
// .bds-text-card__description - Card description (body-l)
|
|
//
|
|
// Design tokens from Figma (Section Cards - Two Column):
|
|
//
|
|
// Breakpoints:
|
|
// - Mobile: < 576px (min-width: 240px, max-width: 575px)
|
|
// - Tablet: 576px - 991px (min-width: 576px, max-width: 991px)
|
|
// - Desktop: ≥ 992px (min-width: 992px, max-width: 1280px)
|
|
|
|
// =============================================================================
|
|
// Design Tokens from Figma
|
|
// =============================================================================
|
|
|
|
// Section padding
|
|
$bds-section-padding-x-mobile: 16px;
|
|
$bds-section-padding-x-tablet: 24px;
|
|
$bds-section-padding-x-desktop: 32px;
|
|
|
|
$bds-section-padding-y-mobile: 24px;
|
|
$bds-section-padding-y-tablet: 32px;
|
|
$bds-section-padding-y-desktop: 40px;
|
|
|
|
// Gap between header and cards
|
|
$bds-section-gap-mobile: 24px;
|
|
$bds-section-gap-tablet: 32px;
|
|
$bds-section-gap-desktop: 40px;
|
|
|
|
// Gap between cards (consistent 8px across all breakpoints)
|
|
$bds-cards-gap: 8px;
|
|
|
|
// Card internal padding
|
|
$bds-text-card-padding-mobile: 16px;
|
|
$bds-text-card-padding-tablet: 20px;
|
|
$bds-text-card-padding-desktop: 24px;
|
|
|
|
// Card heights (fixed per breakpoint)
|
|
$bds-text-card-height-mobile: 274px;
|
|
$bds-text-card-height-tablet: 309px;
|
|
$bds-text-card-height-desktop: 340px;
|
|
|
|
// Card description max-width (from Figma)
|
|
$bds-text-card-description-max-width: 478px;
|
|
|
|
// Container max-width
|
|
$bds-container-max-width: 1280px;
|
|
|
|
// Colors - Light Mode (from Figma)
|
|
$bds-text-color: $black; // #141414 - Neutral black
|
|
$bds-text-color-muted: $gray-500; // #72777E - Neutral/500 for description
|
|
|
|
// Card background colors
|
|
$bds-text-card-bg-green: $green-300; // #21E46B
|
|
$bds-text-card-bg-neutral-light: $gray-200; // #E6EAF0
|
|
$bds-text-card-bg-neutral-dark: $gray-300; // #CAD4DF
|
|
$bds-text-card-bg-lilac: $lilac-200; // #D9CAFF
|
|
|
|
// =============================================================================
|
|
// Section Container
|
|
// =============================================================================
|
|
|
|
.bds-cards-two-column {
|
|
width: 100%;
|
|
background-color: $white;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Inner Container
|
|
// =============================================================================
|
|
|
|
.bds-cards-two-column__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: $bds-container-max-width;
|
|
margin: 0 auto;
|
|
|
|
// Mobile
|
|
padding: $bds-section-padding-y-mobile $bds-section-padding-x-mobile;
|
|
gap: $bds-section-gap-mobile;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
// Tablet
|
|
padding: $bds-section-padding-y-tablet $bds-section-padding-x-tablet;
|
|
gap: $bds-section-gap-tablet;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
// Desktop
|
|
padding: $bds-section-padding-y-desktop $bds-section-padding-x-desktop;
|
|
gap: $bds-section-gap-desktop;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section
|
|
// =============================================================================
|
|
|
|
.bds-cards-two-column__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
// Mobile/Tablet: stacked layout
|
|
@include media-breakpoint-up(lg) {
|
|
// Desktop: side-by-side layout
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: $bds-cards-gap;
|
|
height: $bds-text-card-height-desktop;
|
|
}
|
|
}
|
|
|
|
.bds-cards-two-column__header-left {
|
|
flex: 1 0 0;
|
|
min-width: 0;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.bds-cards-two-column__header-right {
|
|
flex: 1 0 0;
|
|
min-width: 0;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.bds-cards-two-column__title {
|
|
margin: 0;
|
|
color: $bds-text-color;
|
|
// Typography handled by .h-md class from _font.scss
|
|
}
|
|
|
|
.bds-cards-two-column__description {
|
|
color: $bds-text-color-muted;
|
|
// Typography handled by .body-l class from _font.scss
|
|
|
|
p {
|
|
margin: 0;
|
|
|
|
& + p {
|
|
margin-top: 16px; // Paragraph spacing from Figma
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Cards Grid
|
|
// =============================================================================
|
|
|
|
.bds-cards-two-column__cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-cards-gap;
|
|
width: 100%;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
// Desktop: 2x2 grid with flex-wrap
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// Cards fill available width
|
|
.bds-text-card {
|
|
width: 100%;
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
// Desktop: 2 cards per row (50% - gap adjustment)
|
|
width: calc(50% - #{$bds-cards-gap / 2});
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// TextCard Component
|
|
// =============================================================================
|
|
|
|
.bds-text-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
|
|
// Mobile dimensions and padding
|
|
height: $bds-text-card-height-mobile;
|
|
padding: $bds-text-card-padding-mobile;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
height: $bds-text-card-height-tablet;
|
|
padding: $bds-text-card-padding-tablet;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
height: $bds-text-card-height-desktop;
|
|
padding: $bds-text-card-padding-desktop;
|
|
}
|
|
|
|
// Hover state for linked cards
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Color Variants
|
|
// =============================================================================
|
|
|
|
.bds-text-card--green {
|
|
background-color: $bds-text-card-bg-green;
|
|
}
|
|
|
|
.bds-text-card--neutral-light {
|
|
background-color: $bds-text-card-bg-neutral-light;
|
|
}
|
|
|
|
.bds-text-card--neutral-dark {
|
|
background-color: $bds-text-card-bg-neutral-dark;
|
|
}
|
|
|
|
.bds-text-card--lilac {
|
|
background-color: $bds-text-card-bg-lilac;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Card Header (Title)
|
|
// =============================================================================
|
|
|
|
.bds-text-card__header {
|
|
width: 100%;
|
|
}
|
|
|
|
.bds-text-card__title {
|
|
margin: 0;
|
|
color: $bds-text-color;
|
|
// Typography handled by .h-lg class from _font.scss
|
|
}
|
|
|
|
// =============================================================================
|
|
// Card Footer (Description)
|
|
// =============================================================================
|
|
|
|
.bds-text-card__footer {
|
|
width: 100%;
|
|
}
|
|
|
|
.bds-text-card__description {
|
|
margin: 0;
|
|
color: $bds-text-color;
|
|
max-width: $bds-text-card-description-max-width;
|
|
// Typography handled by .body-l class from _font.scss
|
|
}
|
|
|
|
// =============================================================================
|
|
// Light Mode Styles
|
|
// =============================================================================
|
|
|
|
html.light {
|
|
.bds-cards-two-column {
|
|
background-color: $white;
|
|
}
|
|
|
|
.bds-cards-two-column__title {
|
|
color: $bds-text-color;
|
|
}
|
|
|
|
.bds-cards-two-column__description {
|
|
color: $bds-text-color-muted;
|
|
}
|
|
|
|
.bds-text-card__title,
|
|
.bds-text-card__description {
|
|
color: $bds-text-color;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Dark Mode Styles
|
|
// =============================================================================
|
|
// Dark mode color mappings from Figma (node 33054:969):
|
|
// - Section background: Neutral/black (#141414) → $black
|
|
// - Section title: Neutral/white (#FFFFFF) → $white
|
|
// - Section description: Neutral/white (#FFFFFF) → $white
|
|
// - Card text: Neutral/black (#141414) → $black (unchanged - cards have colored backgrounds)
|
|
// - Green card: Primary/Green/300default (#21E46B) → $green-300 (unchanged)
|
|
// - Neutral Light card: Neutral/300default (#CAD4DF) → $gray-300 (unchanged)
|
|
// - Neutral Dark card: Neutral/400 (#8A919A) → $gray-400 (darker in dark mode)
|
|
// - Lilac card: Primary/Lilac/200 (#D9CAFF) → $lilac-200 (unchanged)
|
|
|
|
html.dark {
|
|
.bds-cards-two-column {
|
|
background-color: $black;
|
|
}
|
|
|
|
// Section header text colors inverted for dark mode
|
|
.bds-cards-two-column__title {
|
|
color: $white;
|
|
}
|
|
|
|
.bds-cards-two-column__description {
|
|
color: $white;
|
|
}
|
|
|
|
// Card text stays dark (cards have light colored backgrounds)
|
|
.bds-text-card__title,
|
|
.bds-text-card__description {
|
|
color: $bds-text-color;
|
|
}
|
|
|
|
// Card background colors for dark mode
|
|
// Green, Neutral Light, and Lilac remain the same
|
|
// Neutral Dark uses a darker shade ($gray-400) in dark mode
|
|
.bds-text-card--green {
|
|
background-color: $green-300;
|
|
}
|
|
|
|
.bds-text-card--neutral-light {
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
.bds-text-card--neutral-dark {
|
|
background-color: $gray-400;
|
|
}
|
|
|
|
.bds-text-card--lilac {
|
|
background-color: $lilac-200;
|
|
}
|
|
}
|