mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-09-27 07:36:49 +00:00
82 lines
2.9 KiB
SCSS
82 lines
2.9 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')
|
|
// The base group switches to `center` for its md+ row layout, which this
|
|
// column inherits. Each button sizes to its own label, so without this the
|
|
// stack would centre rather than sit flush with the text above it.
|
|
align-items: flex-start;
|
|
}
|
|
|
|
// An all-subtle set renders as Links rather than Buttons — see the note on
|
|
// `isFlush` in ButtonGroup.tsx. A Link carries no horizontal padding, so its
|
|
// label already sits flush with the text above it and the group needs no
|
|
// offset; the negative margin this modifier used to carry existed only to
|
|
// cancel a button's padding.
|
|
//
|
|
// Left as a hook: the group is a flex container either way, and link sets are
|
|
// the ones likely to want their own spacing later.
|
|
.bds-button-group--links {
|
|
align-items: flex-start;
|
|
}
|