mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
59 lines
1.6 KiB
SCSS
59 lines
1.6 KiB
SCSS
// BDS SectionHeader Pattern Styles
|
|
// Brand Design System - Consolidated section header (heading + description)
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-section-header - Header wrapper for heading and description
|
|
// .bds-section-header__heading - Section heading (uses .h-md)
|
|
// .bds-section-header__description - Section description (uses .body-l)
|
|
//
|
|
// Design tokens from _spacing.scss:
|
|
// - Gap between heading and description: $bds-gap-header-*
|
|
// - Light/Dark mode colors: $black / $white
|
|
|
|
// =============================================================================
|
|
// Header Section
|
|
// =============================================================================
|
|
|
|
.bds-section-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-gap-header-sm;
|
|
margin-bottom: $bds-gap-section-sm;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-gap-header-md;
|
|
margin-bottom: $bds-gap-section-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-gap-header-lg;
|
|
margin-bottom: $bds-gap-section-lg;
|
|
}
|
|
|
|
@include bds-theme-mode(light) {
|
|
color: $black;
|
|
}
|
|
|
|
@include bds-theme-mode(dark) {
|
|
color: $white;
|
|
}
|
|
.bds-button-group {
|
|
margin-top: $bds-space-sm;
|
|
@include media-breakpoint-up(md) {
|
|
margin-top: $bds-space-lg;
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
margin-top: $bds-space-2xl;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bds-section-header__heading {
|
|
margin: 0;
|
|
// Typography handled by .h-md class from _font.scss
|
|
}
|
|
|
|
.bds-section-header__description {
|
|
margin: 0;
|
|
// Typography handled by .body-l class from _font.scss
|
|
} |