ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-06 17:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

renaming class name to bds

Browse Source
This commit is contained in:
Calvin Jhunjhuwala
2025-12-03 14:51:59 -08:00
parent a6d84de417
commit 5433894f20
4 changed files with 215 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
shared/components/PageGrid/_page-grid.scss
View File

@@ -3,10 +3,10 @@
// A namespaced grid layer that reuses Bootstrap's grid mixins while providing // A namespaced grid layer that reuses Bootstrap's grid mixins while providing
// XRPL-specific gutters and container padding. // XRPL-specific gutters and container padding.
$xrpl-grid-gutter: 8px; $bds-grid-gutter: 8px;
// Custom mixin that accounts for gap spacing in width calculations // Custom mixin that accounts for gap spacing in width calculations
@mixin xrpl-make-col($size, $columns) { @mixin bds-make-col($size, $columns) {
flex: 0 0 auto; flex: 0 0 auto;
// Calculate width accounting for gap spacing // Calculate width accounting for gap spacing
// Formula: width per column * span + gap spacing between spanned columns // Formula: width per column * span + gap spacing between spanned columns
@@ -14,29 +14,29 @@ $xrpl-grid-gutter: 8px;
// Total available width: 100% - (gap * total gaps) // Total available width: 100% - (gap * total gaps)
// Width per column: available width / columns // Width per column: available width / columns
// For span of $size: (width per column * size) + (gap * (size - 1)) // For span of $size: (width per column * size) + (gap * (size - 1))
width: calc(((100% - (#{$xrpl-grid-gutter} * (#{$columns} - 1))) / #{$columns}) * #{$size} + (#{$xrpl-grid-gutter} * (#{$size} - 1))); width: calc(((100% - (#{$bds-grid-gutter} * (#{$columns} - 1))) / #{$columns}) * #{$size} + (#{$bds-grid-gutter} * (#{$size} - 1)));
} }
@mixin xrpl-grid-generate-cols($columns, $suffix: null) { @mixin bds-grid-generate-cols($columns, $suffix: null) {
@for $i from 1 through $columns { @for $i from 1 through $columns {
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-#{$i}", ".xrpl-grid__col-#{$i}"); $selector: if($suffix, ".bds-grid__col-#{$suffix}-#{$i}", ".bds-grid__col-#{$i}");
#{$selector} { #{$selector} {
@include xrpl-make-col($i, $columns); @include bds-make-col($i, $columns);
} }
} }
} }
@mixin xrpl-grid-generate-auto($suffix: null) { @mixin bds-grid-generate-auto($suffix: null) {
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-auto", ".xrpl-grid__col-auto"); $selector: if($suffix, ".bds-grid__col-#{$suffix}-auto", ".bds-grid__col-auto");
#{$selector} { #{$selector} {
@include make-col-auto(); @include make-col-auto();
} }
} }
@mixin xrpl-grid-generate-fill($suffix: null) { @mixin bds-grid-generate-fill($suffix: null) {
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-fill", ".xrpl-grid__col-fill"); $selector: if($suffix, ".bds-grid__col-#{$suffix}-fill", ".bds-grid__col-fill");
#{$selector} { #{$selector} {
flex: 1 0 0; flex: 1 0 0;
@@ -44,9 +44,9 @@ $xrpl-grid-gutter: 8px;
} }
} }
@mixin xrpl-grid-generate-offsets($columns, $suffix: null) { @mixin bds-grid-generate-offsets($columns, $suffix: null) {
@for $i from 0 through ($columns - 1) { @for $i from 0 through ($columns - 1) {
$selector: if($suffix, ".xrpl-grid__offset-#{$suffix}-#{$i}", ".xrpl-grid__offset-#{$i}"); $selector: if($suffix, ".bds-grid__offset-#{$suffix}-#{$i}", ".bds-grid__offset-#{$i}");
#{$selector} { #{$selector} {
@include make-col-offset($i, $columns); @include make-col-offset($i, $columns);
@@ -55,43 +55,43 @@ $xrpl-grid-gutter: 8px;
} }
// Mixin to generate responsive base column classes (1-12) with built-in breakpoint behavior // Mixin to generate responsive base column classes (1-12) with built-in breakpoint behavior
@mixin xrpl-grid-generate-responsive-base-cols() { @mixin bds-grid-generate-responsive-base-cols() {
@for $i from 1 through 12 { @for $i from 1 through 12 {
.xrpl-grid__col-#{$i} { .bds-grid__col-#{$i} {
// Base breakpoint (4 columns): if span > 4, clamp to 4 (which gives 4/4 = 100%) // Base breakpoint (4 columns): if span > 4, clamp to 4 (which gives 4/4 = 100%)
@if $i > 4 { @if $i > 4 {
@include xrpl-make-col(4, 4); @include bds-make-col(4, 4);
} @else { } @else {
@include xrpl-make-col($i, 4); @include bds-make-col($i, 4);
} }
// SM breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%) // SM breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%)
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@if $i > 8 { @if $i > 8 {
@include xrpl-make-col(8, 8); @include bds-make-col(8, 8);
} @else { } @else {
@include xrpl-make-col($i, 8); @include bds-make-col($i, 8);
} }
} }
// MD breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%) // MD breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%)
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@if $i > 8 { @if $i > 8 {
@include xrpl-make-col(8, 8); @include bds-make-col(8, 8);
} @else { } @else {
@include xrpl-make-col($i, 8); @include bds-make-col($i, 8);
} }
} }
// LG+ breakpoints (12 columns): always calculate based on 12 cols // LG+ breakpoints (12 columns): always calculate based on 12 cols
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@include xrpl-make-col($i, 12); @include bds-make-col($i, 12);
} }
} }
} }
} }
.xrpl-grid { .bds-grid {
&__container { &__container {
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
@@ -121,7 +121,7 @@ $xrpl-grid-gutter: 8px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// Use gap for spacing - works with our calc-based column widths // Use gap for spacing - works with our calc-based column widths
gap: $xrpl-grid-gutter; gap: $bds-grid-gutter;
} }
&__col { &__col {
@@ -137,38 +137,38 @@ $xrpl-grid-gutter: 8px;
} }
// Base (0 - 575px) — 4-column grid with responsive behavior built-in // Base (0 - 575px) — 4-column grid with responsive behavior built-in
@include xrpl-grid-generate-fill(); @include bds-grid-generate-fill();
@include xrpl-grid-generate-responsive-base-cols(); @include bds-grid-generate-responsive-base-cols();
@include xrpl-grid-generate-auto(); @include bds-grid-generate-auto();
@include xrpl-grid-generate-offsets(4); @include bds-grid-generate-offsets(4);
// Tablet (≥576px) — maintain 8-column grid across sm/md ranges // Tablet (≥576px) — maintain 8-column grid across sm/md ranges
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@include xrpl-grid-generate-fill('sm'); @include bds-grid-generate-fill('sm');
@include xrpl-grid-generate-cols(8, 'sm'); @include bds-grid-generate-cols(8, 'sm');
@include xrpl-grid-generate-auto('sm'); @include bds-grid-generate-auto('sm');
@include xrpl-grid-generate-offsets(8, 'sm'); @include bds-grid-generate-offsets(8, 'sm');
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@include xrpl-grid-generate-fill('md'); @include bds-grid-generate-fill('md');
@include xrpl-grid-generate-cols(8, 'md'); @include bds-grid-generate-cols(8, 'md');
@include xrpl-grid-generate-auto('md'); @include bds-grid-generate-auto('md');
@include xrpl-grid-generate-offsets(8, 'md'); @include bds-grid-generate-offsets(8, 'md');
} }
// Large (≥992px) — 12-column grid // Large (≥992px) — 12-column grid
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@include xrpl-grid-generate-fill('lg'); @include bds-grid-generate-fill('lg');
@include xrpl-grid-generate-cols(12, 'lg'); @include bds-grid-generate-cols(12, 'lg');
@include xrpl-grid-generate-auto('lg'); @include bds-grid-generate-auto('lg');
@include xrpl-grid-generate-offsets(12, 'lg'); @include bds-grid-generate-offsets(12, 'lg');
} }
// XL (≥1280px) — retain 12-column grid with wider margins // XL (≥1280px) — retain 12-column grid with wider margins
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
@include xrpl-grid-generate-fill('xl'); @include bds-grid-generate-fill('xl');
@include xrpl-grid-generate-cols(12, 'xl'); @include bds-grid-generate-cols(12, 'xl');
@include xrpl-grid-generate-auto('xl'); @include bds-grid-generate-auto('xl');
@include xrpl-grid-generate-offsets(12, 'xl'); @include bds-grid-generate-offsets(12, 'xl');
} }

20
shared/components/PageGrid/page-grid.md
View File

@@ -228,22 +228,22 @@ Center content or create spacing with offsets:
The component generates the following CSS classes: The component generates the following CSS classes:
### Container ### Container
- `xrpl-grid__container` - `bds-grid__container`
### Row ### Row
- `xrpl-grid__row` - `bds-grid__row`
### Column Spans ### Column Spans
- `xrpl-grid__col-{number}` (e.g., `xrpl-grid__col-6`) - `bds-grid__col-{number}` (e.g., `bds-grid__col-6`)
- `xrpl-grid__col-auto` - `bds-grid__col-auto`
- `xrpl-grid__col` (for fill) - `bds-grid__col` (for fill)
- `xrpl-grid__col-{breakpoint}-{number}` (e.g., `xrpl-grid__col-md-6`) - `bds-grid__col-{breakpoint}-{number}` (e.g., `bds-grid__col-md-6`)
- `xrpl-grid__col-{breakpoint}-auto` - `bds-grid__col-{breakpoint}-auto`
- `xrpl-grid__col-{breakpoint}` (for fill) - `bds-grid__col-{breakpoint}` (for fill)
### Column Offsets ### Column Offsets
- `xrpl-grid__offset-{number}` (e.g., `xrpl-grid__offset-2`) - `bds-grid__offset-{number}` (e.g., `bds-grid__offset-2`)
- `xrpl-grid__offset-{breakpoint}-{number}` (e.g., `xrpl-grid__offset-md-2`) - `bds-grid__offset-{breakpoint}-{number}` (e.g., `bds-grid__offset-md-2`)
## TypeScript Types ## TypeScript Types

28
shared/components/PageGrid/page-grid.tsx
View File

@@ -35,18 +35,18 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): string =
const prefixStr = prefix ? `-${prefix}` : ""; const prefixStr = prefix ? `-${prefix}` : "";
if (value === "auto") { if (value === "auto") {
// Generates xrpl-grid__col-auto or xrpl-grid__col-md-auto // Generates bds-grid__col-auto or bds-grid__col-md-auto
return `xrpl-grid__col${prefixStr}-auto`; return `bds-grid__col${prefixStr}-auto`;
} }
if (value === "fill") { if (value === "fill") {
// Generates xrpl-grid__col-fill or xrpl-grid__col-md-fill // Generates bds-grid__col-fill or bds-grid__col-md-fill
// This allows us to distinguish between "no span" and "span='fill'" in CSS // This allows us to distinguish between "no span" and "span='fill'" in CSS
return `xrpl-grid__col${prefixStr}-fill`; return `bds-grid__col${prefixStr}-fill`;
} }
// Generates xrpl-grid__col-6 or xrpl-grid__col-md-6 // Generates bds-grid__col-6 or bds-grid__col-md-6
return `xrpl-grid__col${prefixStr}-${value}`; return `bds-grid__col${prefixStr}-${value}`;
}; };
/** /**
@@ -58,15 +58,15 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): string =
*/ */
const classForOffset = (prefix: string | null, value: PageGridOffsetValue): string => { const classForOffset = (prefix: string | null, value: PageGridOffsetValue): string => {
const prefixStr = prefix ? `-${prefix}` : ""; const prefixStr = prefix ? `-${prefix}` : "";
// Generates xrpl-grid__offset-2 or xrpl-grid__offset-md-2 // Generates bds-grid__offset-2 or bds-grid__offset-md-2
return `xrpl-grid__offset${prefixStr}-${value}`; return `bds-grid__offset${prefixStr}-${value}`;
}; };
// --- PageGrid Root Component --- // --- PageGrid Root Component ---
const PageGridRoot = React.forwardRef<HTMLDivElement, PageGridProps>( const PageGridRoot = React.forwardRef<HTMLDivElement, PageGridProps>(
({ className, ...rest }, ref) => ( ({ className, ...rest }, ref) => (
<div ref={ref} className={clsx("xrpl-grid__container", className)} {...rest} /> <div ref={ref} className={clsx("bds-grid__container", className)} {...rest} />
) )
); );
@@ -76,7 +76,7 @@ PageGridRoot.displayName = "PageGrid";
// --- PageGrid.Row Component --- // --- PageGrid.Row Component ---
const PageGridRow = React.forwardRef<HTMLDivElement, PageGridRowProps>( const PageGridRow = React.forwardRef<HTMLDivElement, PageGridRowProps>(
({ className, ...rest }, ref) => ( ({ className, ...rest }, ref) => (
<div ref={ref} className={clsx("xrpl-grid__row", className)} {...rest} /> <div ref={ref} className={clsx("bds-grid__row", className)} {...rest} />
) )
); );
@@ -109,7 +109,7 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
const value = span[key]; const value = span[key];
if (value) { if (value) {
// Generates classes like xrpl-grid__col-md-6 // Generates classes like bds-grid__col-md-6
spanClasses.push(classForSpan(key, value)); spanClasses.push(classForSpan(key, value));
} }
}); });
@@ -132,7 +132,7 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
const value = offset[key]; const value = offset[key];
if (value !== undefined) { if (value !== undefined) {
// Generates classes like xrpl-grid__offset-md-3 // Generates classes like bds-grid__offset-md-3
offsetClasses.push(classForOffset(key, value)); offsetClasses.push(classForOffset(key, value));
} }
}); });
@@ -142,8 +142,8 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
return ( return (
<div <div
ref={ref} ref={ref}
// Note: Added "xrpl-grid__col" base class for consistent column initialization // Note: Added "bds-grid__col" base class for consistent column initialization
className={clsx("xrpl-grid__col", className, spanClasses, offsetClasses)} className={clsx("bds-grid__col", className, spanClasses, offsetClasses)}
{...rest} {...rest}
/> />
); );

296
static/css/devportal2024-v1.css
View File

@@ -13681,7 +13681,7 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
text-decoration: none; text-decoration: none;
} }
.xrpl-grid__container { .bds-grid__container {
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
@@ -13690,30 +13690,30 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
box-sizing: border-box; box-sizing: border-box;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__container { .bds-grid__container {
padding-right: 24px; padding-right: 24px;
padding-left: 24px; padding-left: 24px;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__container { .bds-grid__container {
padding-right: 32px; padding-right: 32px;
padding-left: 32px; padding-left: 32px;
} }
} }
@media (min-width: 1280px) { @media (min-width: 1280px) {
.xrpl-grid__container { .bds-grid__container {
padding-right: 112px; padding-right: 112px;
padding-left: 112px; padding-left: 112px;
max-width: 1440px; max-width: 1440px;
} }
} }
.xrpl-grid__row { .bds-grid__row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
} }
.xrpl-grid__col { .bds-grid__col {
box-sizing: border-box; box-sizing: border-box;
flex: auto; flex: auto;
flex-shrink: 0; flex-shrink: 0;
@@ -13721,625 +13721,625 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
max-width: 100%; max-width: 100%;
} }
.xrpl-grid__col-fill { .bds-grid__col-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto; width: auto;
} }
.xrpl-grid__col-1 { .bds-grid__col-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 1 + 8px * (1 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-1 { .bds-grid__col-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-1 { .bds-grid__col-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-1 { .bds-grid__col-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
} }
} }
.xrpl-grid__col-2 { .bds-grid__col-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 2 + 8px * (2 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-2 { .bds-grid__col-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-2 { .bds-grid__col-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-2 { .bds-grid__col-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
} }
} }
.xrpl-grid__col-3 { .bds-grid__col-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 3 + 8px * (3 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-3 { .bds-grid__col-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-3 { .bds-grid__col-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-3 { .bds-grid__col-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
} }
} }
.xrpl-grid__col-4 { .bds-grid__col-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-4 { .bds-grid__col-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-4 { .bds-grid__col-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-4 { .bds-grid__col-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
} }
} }
.xrpl-grid__col-5 { .bds-grid__col-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-5 { .bds-grid__col-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-5 { .bds-grid__col-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-5 { .bds-grid__col-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
} }
} }
.xrpl-grid__col-6 { .bds-grid__col-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-6 { .bds-grid__col-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-6 { .bds-grid__col-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-6 { .bds-grid__col-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
} }
} }
.xrpl-grid__col-7 { .bds-grid__col-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-7 { .bds-grid__col-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-7 { .bds-grid__col-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-7 { .bds-grid__col-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
} }
} }
.xrpl-grid__col-8 { .bds-grid__col-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-8 { .bds-grid__col-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-8 { .bds-grid__col-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-8 { .bds-grid__col-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
} }
} }
.xrpl-grid__col-9 { .bds-grid__col-9 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-9 { .bds-grid__col-9 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-9 { .bds-grid__col-9 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-9 { .bds-grid__col-9 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
} }
} }
.xrpl-grid__col-10 { .bds-grid__col-10 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-10 { .bds-grid__col-10 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-10 { .bds-grid__col-10 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-10 { .bds-grid__col-10 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
} }
} }
.xrpl-grid__col-11 { .bds-grid__col-11 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-11 { .bds-grid__col-11 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-11 { .bds-grid__col-11 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-11 { .bds-grid__col-11 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
} }
} }
.xrpl-grid__col-12 { .bds-grid__col-12 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-12 { .bds-grid__col-12 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-12 { .bds-grid__col-12 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-12 { .bds-grid__col-12 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
} }
} }
.xrpl-grid__col-auto { .bds-grid__col-auto {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: auto;
} }
.xrpl-grid__offset-0 { .bds-grid__offset-0 {
margin-left: 0; margin-left: 0;
} }
.xrpl-grid__offset-1 { .bds-grid__offset-1 {
margin-left: 25%; margin-left: 25%;
} }
.xrpl-grid__offset-2 { .bds-grid__offset-2 {
margin-left: 50%; margin-left: 50%;
} }
.xrpl-grid__offset-3 { .bds-grid__offset-3 {
margin-left: 75%; margin-left: 75%;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-sm-fill { .bds-grid__col-sm-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto; width: auto;
} }
.xrpl-grid__col-sm-1 { .bds-grid__col-sm-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
} }
.xrpl-grid__col-sm-2 { .bds-grid__col-sm-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
} }
.xrpl-grid__col-sm-3 { .bds-grid__col-sm-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
} }
.xrpl-grid__col-sm-4 { .bds-grid__col-sm-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
} }
.xrpl-grid__col-sm-5 { .bds-grid__col-sm-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
} }
.xrpl-grid__col-sm-6 { .bds-grid__col-sm-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
} }
.xrpl-grid__col-sm-7 { .bds-grid__col-sm-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
} }
.xrpl-grid__col-sm-8 { .bds-grid__col-sm-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
.xrpl-grid__col-sm-auto { .bds-grid__col-sm-auto {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: auto;
} }
.xrpl-grid__offset-sm-0 { .bds-grid__offset-sm-0 {
margin-left: 0; margin-left: 0;
} }
.xrpl-grid__offset-sm-1 { .bds-grid__offset-sm-1 {
margin-left: 12.5%; margin-left: 12.5%;
} }
.xrpl-grid__offset-sm-2 { .bds-grid__offset-sm-2 {
margin-left: 25%; margin-left: 25%;
} }
.xrpl-grid__offset-sm-3 { .bds-grid__offset-sm-3 {
margin-left: 37.5%; margin-left: 37.5%;
} }
.xrpl-grid__offset-sm-4 { .bds-grid__offset-sm-4 {
margin-left: 50%; margin-left: 50%;
} }
.xrpl-grid__offset-sm-5 { .bds-grid__offset-sm-5 {
margin-left: 62.5%; margin-left: 62.5%;
} }
.xrpl-grid__offset-sm-6 { .bds-grid__offset-sm-6 {
margin-left: 75%; margin-left: 75%;
} }
.xrpl-grid__offset-sm-7 { .bds-grid__offset-sm-7 {
margin-left: 87.5%; margin-left: 87.5%;
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.xrpl-grid__col-md-fill { .bds-grid__col-md-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto; width: auto;
} }
.xrpl-grid__col-md-1 { .bds-grid__col-md-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
} }
.xrpl-grid__col-md-2 { .bds-grid__col-md-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
} }
.xrpl-grid__col-md-3 { .bds-grid__col-md-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
} }
.xrpl-grid__col-md-4 { .bds-grid__col-md-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
} }
.xrpl-grid__col-md-5 { .bds-grid__col-md-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
} }
.xrpl-grid__col-md-6 { .bds-grid__col-md-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
} }
.xrpl-grid__col-md-7 { .bds-grid__col-md-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
} }
.xrpl-grid__col-md-8 { .bds-grid__col-md-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
} }
.xrpl-grid__col-md-auto { .bds-grid__col-md-auto {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: auto;
} }
.xrpl-grid__offset-md-0 { .bds-grid__offset-md-0 {
margin-left: 0; margin-left: 0;
} }
.xrpl-grid__offset-md-1 { .bds-grid__offset-md-1 {
margin-left: 12.5%; margin-left: 12.5%;
} }
.xrpl-grid__offset-md-2 { .bds-grid__offset-md-2 {
margin-left: 25%; margin-left: 25%;
} }
.xrpl-grid__offset-md-3 { .bds-grid__offset-md-3 {
margin-left: 37.5%; margin-left: 37.5%;
} }
.xrpl-grid__offset-md-4 { .bds-grid__offset-md-4 {
margin-left: 50%; margin-left: 50%;
} }
.xrpl-grid__offset-md-5 { .bds-grid__offset-md-5 {
margin-left: 62.5%; margin-left: 62.5%;
} }
.xrpl-grid__offset-md-6 { .bds-grid__offset-md-6 {
margin-left: 75%; margin-left: 75%;
} }
.xrpl-grid__offset-md-7 { .bds-grid__offset-md-7 {
margin-left: 87.5%; margin-left: 87.5%;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.xrpl-grid__col-lg-fill { .bds-grid__col-lg-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto; width: auto;
} }
.xrpl-grid__col-lg-1 { .bds-grid__col-lg-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
} }
.xrpl-grid__col-lg-2 { .bds-grid__col-lg-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
} }
.xrpl-grid__col-lg-3 { .bds-grid__col-lg-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
} }
.xrpl-grid__col-lg-4 { .bds-grid__col-lg-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
} }
.xrpl-grid__col-lg-5 { .bds-grid__col-lg-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
} }
.xrpl-grid__col-lg-6 { .bds-grid__col-lg-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
} }
.xrpl-grid__col-lg-7 { .bds-grid__col-lg-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
} }
.xrpl-grid__col-lg-8 { .bds-grid__col-lg-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
} }
.xrpl-grid__col-lg-9 { .bds-grid__col-lg-9 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
} }
.xrpl-grid__col-lg-10 { .bds-grid__col-lg-10 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
} }
.xrpl-grid__col-lg-11 { .bds-grid__col-lg-11 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
} }
.xrpl-grid__col-lg-12 { .bds-grid__col-lg-12 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
} }
.xrpl-grid__col-lg-auto { .bds-grid__col-lg-auto {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: auto;
} }
.xrpl-grid__offset-lg-0 { .bds-grid__offset-lg-0 {
margin-left: 0; margin-left: 0;
} }
.xrpl-grid__offset-lg-1 { .bds-grid__offset-lg-1 {
margin-left: 8.33333333%; margin-left: 8.33333333%;
} }
.xrpl-grid__offset-lg-2 { .bds-grid__offset-lg-2 {
margin-left: 16.66666667%; margin-left: 16.66666667%;
} }
.xrpl-grid__offset-lg-3 { .bds-grid__offset-lg-3 {
margin-left: 25%; margin-left: 25%;
} }
.xrpl-grid__offset-lg-4 { .bds-grid__offset-lg-4 {
margin-left: 33.33333333%; margin-left: 33.33333333%;
} }
.xrpl-grid__offset-lg-5 { .bds-grid__offset-lg-5 {
margin-left: 41.66666667%; margin-left: 41.66666667%;
} }
.xrpl-grid__offset-lg-6 { .bds-grid__offset-lg-6 {
margin-left: 50%; margin-left: 50%;
} }
.xrpl-grid__offset-lg-7 { .bds-grid__offset-lg-7 {
margin-left: 58.33333333%; margin-left: 58.33333333%;
} }
.xrpl-grid__offset-lg-8 { .bds-grid__offset-lg-8 {
margin-left: 66.66666667%; margin-left: 66.66666667%;
} }
.xrpl-grid__offset-lg-9 { .bds-grid__offset-lg-9 {
margin-left: 75%; margin-left: 75%;
} }
.xrpl-grid__offset-lg-10 { .bds-grid__offset-lg-10 {
margin-left: 83.33333333%; margin-left: 83.33333333%;
} }
.xrpl-grid__offset-lg-11 { .bds-grid__offset-lg-11 {
margin-left: 91.66666667%; margin-left: 91.66666667%;
} }
} }
@media (min-width: 1280px) { @media (min-width: 1280px) {
.xrpl-grid__col-xl-fill { .bds-grid__col-xl-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto; width: auto;
} }
.xrpl-grid__col-xl-1 { .bds-grid__col-xl-1 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
} }
.xrpl-grid__col-xl-2 { .bds-grid__col-xl-2 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
} }
.xrpl-grid__col-xl-3 { .bds-grid__col-xl-3 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
} }
.xrpl-grid__col-xl-4 { .bds-grid__col-xl-4 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
} }
.xrpl-grid__col-xl-5 { .bds-grid__col-xl-5 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
} }
.xrpl-grid__col-xl-6 { .bds-grid__col-xl-6 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
} }
.xrpl-grid__col-xl-7 { .bds-grid__col-xl-7 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
} }
.xrpl-grid__col-xl-8 { .bds-grid__col-xl-8 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
} }
.xrpl-grid__col-xl-9 { .bds-grid__col-xl-9 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
} }
.xrpl-grid__col-xl-10 { .bds-grid__col-xl-10 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
} }
.xrpl-grid__col-xl-11 { .bds-grid__col-xl-11 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
} }
.xrpl-grid__col-xl-12 { .bds-grid__col-xl-12 {
flex: 0 0 auto; flex: 0 0 auto;
width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
} }
.xrpl-grid__col-xl-auto { .bds-grid__col-xl-auto {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: auto;
} }
.xrpl-grid__offset-xl-0 { .bds-grid__offset-xl-0 {
margin-left: 0; margin-left: 0;
} }
.xrpl-grid__offset-xl-1 { .bds-grid__offset-xl-1 {
margin-left: 8.33333333%; margin-left: 8.33333333%;
} }
.xrpl-grid__offset-xl-2 { .bds-grid__offset-xl-2 {
margin-left: 16.66666667%; margin-left: 16.66666667%;
} }
.xrpl-grid__offset-xl-3 { .bds-grid__offset-xl-3 {
margin-left: 25%; margin-left: 25%;
} }
.xrpl-grid__offset-xl-4 { .bds-grid__offset-xl-4 {
margin-left: 33.33333333%; margin-left: 33.33333333%;
} }
.xrpl-grid__offset-xl-5 { .bds-grid__offset-xl-5 {
margin-left: 41.66666667%; margin-left: 41.66666667%;
} }
.xrpl-grid__offset-xl-6 { .bds-grid__offset-xl-6 {
margin-left: 50%; margin-left: 50%;
} }
.xrpl-grid__offset-xl-7 { .bds-grid__offset-xl-7 {
margin-left: 58.33333333%; margin-left: 58.33333333%;
} }
.xrpl-grid__offset-xl-8 { .bds-grid__offset-xl-8 {
margin-left: 66.66666667%; margin-left: 66.66666667%;
} }
.xrpl-grid__offset-xl-9 { .bds-grid__offset-xl-9 {
margin-left: 75%; margin-left: 75%;
} }
.xrpl-grid__offset-xl-10 { .bds-grid__offset-xl-10 {
margin-left: 83.33333333%; margin-left: 83.33333333%;
} }
.xrpl-grid__offset-xl-11 { .bds-grid__offset-xl-11 {
margin-left: 91.66666667%; margin-left: 91.66666667%;
} }
} }