mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-09-28 16:08:01 +00:00
85 lines
2.8 KiB
SCSS
85 lines
2.8 KiB
SCSS
// BDS ButtonGroup Component Styles
|
|
// Brand Design System - Responsive button group pattern
|
|
//
|
|
// Naming Convention: BEM with 'bds' namespace
|
|
// .bds-button-group - Base component
|
|
// .bds-button-group--gap-none - No gap between buttons on tablet+ (0px)
|
|
// .bds-button-group--gap-small - Small gap between buttons on tablet+ (4px)
|
|
// .bds-button-group--gap-medium - Medium gap: 16px mobile/tablet, 24px desktop (lg+)
|
|
// .bds-button-group--block - Block layout for 3+ buttons (all tertiary)
|
|
//
|
|
// Note: Uses centralized spacing tokens from _spacing.scss.
|
|
|
|
// =============================================================================
|
|
// Base Component Styles
|
|
// =============================================================================
|
|
|
|
.bds-button-group {
|
|
@extend .d-flex;
|
|
@extend .flex-column;
|
|
@extend .flex-wrap;
|
|
align-items: start;
|
|
gap: $bds-space-sm; // 8px - spacing('sm')
|
|
|
|
// Tablet breakpoint - horizontal layout
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: row !important;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Gap Modifiers
|
|
// =============================================================================
|
|
|
|
.bds-button-group--gap-none {
|
|
// Tablet breakpoint - no gap
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-space-none; // 0px - spacing('none')
|
|
}
|
|
}
|
|
|
|
.bds-button-group--gap-small {
|
|
// Tablet breakpoint - 4px gap
|
|
@include media-breakpoint-up(md) {
|
|
gap: $bds-space-xs; // 4px - spacing('xs')
|
|
}
|
|
}
|
|
|
|
.bds-button-group--gap-medium {
|
|
gap: $bds-space-lg; // 16px - spacing('lg')
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
gap: $bds-space-2xl; // 24px - spacing('2xl')
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Block Layout Modifier (3+ buttons)
|
|
// =============================================================================
|
|
|
|
.bds-button-group--block {
|
|
// Override default flex layout - force column layout on all screen sizes
|
|
flex-direction: column !important;
|
|
gap: $bds-space-lg !important; // 16px - spacing('lg')
|
|
|
|
.bds-btn {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
// Pull an all-subtle set back by the button's own horizontal padding, so labels
|
|
// sit flush with the text above them.
|
|
//
|
|
// The compensation is here rather than on the button because button.md fixes
|
|
// geometry across every emphasis, and stripping a subtle button's padding leaves
|
|
// it indistinguishable from a Link — geometry is one of only two things that
|
|
// tell them apart. So the button keeps its box and the container absorbs it.
|
|
//
|
|
// Applies at any count, not just the 3+ block layout: a section can force
|
|
// subtle with one or two links and wants the same flush edge.
|
|
.bds-button-group--flush {
|
|
margin-left: -$bds-btn-pad-x;
|
|
}
|