mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
60 lines
1.7 KiB
SCSS
60 lines
1.7 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+ (8px)
|
|
// .bds-button-group--block - Block layout for 3+ buttons (all tertiary)
|
|
|
|
// =============================================================================
|
|
// Base Component Styles
|
|
// =============================================================================
|
|
|
|
.bds-button-group {
|
|
@extend .d-flex;
|
|
@extend .flex-column;
|
|
@extend .align-items-start;
|
|
@extend .flex-wrap;
|
|
gap: 8px;
|
|
|
|
// 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: 0px;
|
|
}
|
|
}
|
|
|
|
.bds-button-group--gap-small {
|
|
// Tablet breakpoint - keep 8px gap
|
|
@include media-breakpoint-up(md) {
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// 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: 16px !important;
|
|
|
|
// All buttons should be full width in block layout
|
|
.bds-btn {
|
|
width: 100%;
|
|
}
|
|
}
|