mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-08 19:26:38 +00:00
a97a009d93
* CardsIconGrid and CardsTextGrid + showcase pages * cleaning up code * more code clean up * using the spacing tokens for values
88 lines
2.7 KiB
SCSS
88 lines
2.7 KiB
SCSS
// BDS CardsTextGrid Pattern Styles
|
|
// Brand Design System - Section with heading, description, and grid of CardTextIconCard
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-cards-text-grid - Base section container
|
|
// .bds-cards-text-grid__header - Header section (heading + description)
|
|
// .bds-cards-text-grid__list - Grid list (ul as PageGrid.Row)
|
|
|
|
// =============================================================================
|
|
// Design Tokens (uses BDS spacing from _spacing.scss)
|
|
// =============================================================================
|
|
|
|
$bds-cards-text-grid-padding-base: $bds-space-2xl;
|
|
$bds-cards-text-grid-padding-md: $bds-space-3xl;
|
|
$bds-cards-text-grid-padding-lg: $bds-space-4xl;
|
|
|
|
$bds-cards-text-grid-header-gap-base: $bds-gap-header-sm;
|
|
$bds-cards-text-grid-header-gap-md: $bds-gap-header-md;
|
|
$bds-cards-text-grid-header-gap-lg: $bds-gap-header-lg;
|
|
|
|
$bds-cards-text-grid-header-margin-base: $bds-gap-section-sm;
|
|
$bds-cards-text-grid-header-margin-md: $bds-gap-section-md;
|
|
$bds-cards-text-grid-header-margin-lg: $bds-gap-section-lg;
|
|
|
|
// =============================================================================
|
|
// Section Container
|
|
// =============================================================================
|
|
|
|
.bds-cards-text-grid {
|
|
padding-top: $bds-cards-text-grid-padding-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-cards-text-grid-padding-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-cards-text-grid-padding-lg;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
@include bds-theme-mode(dark) {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section
|
|
// =============================================================================
|
|
|
|
.bds-cards-text-grid__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-cards-text-grid-header-gap-base;
|
|
margin-bottom: $bds-cards-text-grid-header-margin-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-cards-text-grid-header-gap-md;
|
|
margin-bottom: $bds-cards-text-grid-header-margin-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-cards-text-grid-header-gap-lg;
|
|
margin-bottom: $bds-cards-text-grid-header-margin-lg;
|
|
}
|
|
|
|
h2, p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// List Grid - Aspect Ratios
|
|
// =============================================================================
|
|
|
|
.bds-cards-text-grid__list > li {
|
|
aspect-ratio: 16 / 9;
|
|
@include media-breakpoint-up(md) {
|
|
aspect-ratio: 3 / 2;
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
aspect-ratio: 3 / 1;
|
|
}
|
|
}
|