mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
74e6d20ec5
- Adjusted the gap for the small variant from 8px to 4px. - Introduced a new medium gap variant with responsive settings (16px on mobile/tablet, 24px on desktop). - Updated ButtonGroupProps interface to include the new medium gap option. - Modified HeaderHeroPrimaryMedia to utilize the new medium gap setting for button groups.
71 lines
2.2 KiB
SCSS
71 lines
2.2 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')
|
|
|
|
// All buttons should be full width in block layout
|
|
.bds-btn {
|
|
width: 100%;
|
|
}
|
|
}
|