mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
a4b1925b31
* adding linktextcard + linktextdirectory * adding dark mode * code review clean up * code review comments
77 lines
2.4 KiB
SCSS
77 lines
2.4 KiB
SCSS
// BDS LinkTextDirectory Pattern Styles
|
|
// Brand Design System - Section with heading and list of numbered cards
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-link-text-directory - Base section container
|
|
// .bds-link-text-directory__header - Header section (heading + description)
|
|
|
|
// =============================================================================
|
|
// Design Tokens
|
|
// =============================================================================
|
|
|
|
// Section padding
|
|
$bds-link-text-directory-padding-base: 24px;
|
|
$bds-link-text-directory-padding-md: 32px;
|
|
$bds-link-text-directory-padding-lg: 40px;
|
|
|
|
// Header gap (between heading and description)
|
|
$bds-link-text-directory-header-gap-base: 8px;
|
|
$bds-link-text-directory-header-gap-md: 8px;
|
|
$bds-link-text-directory-header-gap-lg: 16px;
|
|
|
|
// Header margin-bottom (space before cards list)
|
|
$bds-link-text-directory-header-margin-base: 24px;
|
|
$bds-link-text-directory-header-margin-md: 32px;
|
|
$bds-link-text-directory-header-margin-lg: 40px;
|
|
|
|
// =============================================================================
|
|
// Section Container
|
|
// =============================================================================
|
|
|
|
.bds-link-text-directory {
|
|
padding-top: $bds-link-text-directory-padding-base;
|
|
padding-bottom: $bds-link-text-directory-padding-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: $bds-link-text-directory-padding-md;
|
|
padding-bottom: $bds-link-text-directory-padding-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
padding-top: $bds-link-text-directory-padding-lg;
|
|
padding-bottom: $bds-link-text-directory-padding-lg;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
@include bds-theme-mode(dark) {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Header Section
|
|
// =============================================================================
|
|
|
|
.bds-link-text-directory__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $bds-link-text-directory-header-gap-base;
|
|
margin-bottom: $bds-link-text-directory-header-margin-base;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-link-text-directory-header-gap-md;
|
|
margin-bottom: $bds-link-text-directory-header-margin-md;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-link-text-directory-header-gap-lg;
|
|
margin-bottom: $bds-link-text-directory-header-margin-lg;
|
|
}
|
|
h2, p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|