mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
renaming class name to bds
This commit is contained in:
Calvin Jhunjhuwala
@@ -3,10 +3,10 @@
|
||||
// A namespaced grid layer that reuses Bootstrap's grid mixins while providing
|
||||
// XRPL-specific gutters and container padding.
|
||||
|
||||
$xrpl-grid-gutter: 8px;
|
||||
$bds-grid-gutter: 8px;
|
||||
|
||||
// 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;
|
||||
// Calculate width accounting for gap spacing
|
||||
// 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)
|
||||
// Width per column: available width / columns
|
||||
// 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 {
|
||||
$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} {
|
||||
@include xrpl-make-col($i, $columns);
|
||||
@include bds-make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xrpl-grid-generate-auto($suffix: null) {
|
||||
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-auto", ".xrpl-grid__col-auto");
|
||||
@mixin bds-grid-generate-auto($suffix: null) {
|
||||
$selector: if($suffix, ".bds-grid__col-#{$suffix}-auto", ".bds-grid__col-auto");
|
||||
|
||||
#{$selector} {
|
||||
@include make-col-auto();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xrpl-grid-generate-fill($suffix: null) {
|
||||
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-fill", ".xrpl-grid__col-fill");
|
||||
@mixin bds-grid-generate-fill($suffix: null) {
|
||||
$selector: if($suffix, ".bds-grid__col-#{$suffix}-fill", ".bds-grid__col-fill");
|
||||
|
||||
#{$selector} {
|
||||
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) {
|
||||
$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} {
|
||||
@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 xrpl-grid-generate-responsive-base-cols() {
|
||||
@mixin bds-grid-generate-responsive-base-cols() {
|
||||
@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%)
|
||||
@if $i > 4 {
|
||||
@include xrpl-make-col(4, 4);
|
||||
@include bds-make-col(4, 4);
|
||||
} @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%)
|
||||
@include media-breakpoint-up(sm) {
|
||||
@if $i > 8 {
|
||||
@include xrpl-make-col(8, 8);
|
||||
@include bds-make-col(8, 8);
|
||||
} @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%)
|
||||
@include media-breakpoint-up(md) {
|
||||
@if $i > 8 {
|
||||
@include xrpl-make-col(8, 8);
|
||||
@include bds-make-col(8, 8);
|
||||
} @else {
|
||||
@include xrpl-make-col($i, 8);
|
||||
@include bds-make-col($i, 8);
|
||||
}
|
||||
}
|
||||
|
||||
// LG+ breakpoints (12 columns): always calculate based on 12 cols
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include xrpl-make-col($i, 12);
|
||||
@include bds-make-col($i, 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid {
|
||||
.bds-grid {
|
||||
&__container {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
@@ -121,7 +121,7 @@ $xrpl-grid-gutter: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// Use gap for spacing - works with our calc-based column widths
|
||||
gap: $xrpl-grid-gutter;
|
||||
gap: $bds-grid-gutter;
|
||||
}
|
||||
|
||||
&__col {
|
||||
@@ -137,38 +137,38 @@ $xrpl-grid-gutter: 8px;
|
||||
}
|
||||
|
||||
// Base (0 - 575px) — 4-column grid with responsive behavior built-in
|
||||
@include xrpl-grid-generate-fill();
|
||||
@include xrpl-grid-generate-responsive-base-cols();
|
||||
@include xrpl-grid-generate-auto();
|
||||
@include xrpl-grid-generate-offsets(4);
|
||||
@include bds-grid-generate-fill();
|
||||
@include bds-grid-generate-responsive-base-cols();
|
||||
@include bds-grid-generate-auto();
|
||||
@include bds-grid-generate-offsets(4);
|
||||
|
||||
// Tablet (≥576px) — maintain 8-column grid across sm/md ranges
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include xrpl-grid-generate-fill('sm');
|
||||
@include xrpl-grid-generate-cols(8, 'sm');
|
||||
@include xrpl-grid-generate-auto('sm');
|
||||
@include xrpl-grid-generate-offsets(8, 'sm');
|
||||
@include bds-grid-generate-fill('sm');
|
||||
@include bds-grid-generate-cols(8, 'sm');
|
||||
@include bds-grid-generate-auto('sm');
|
||||
@include bds-grid-generate-offsets(8, 'sm');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include xrpl-grid-generate-fill('md');
|
||||
@include xrpl-grid-generate-cols(8, 'md');
|
||||
@include xrpl-grid-generate-auto('md');
|
||||
@include xrpl-grid-generate-offsets(8, 'md');
|
||||
@include bds-grid-generate-fill('md');
|
||||
@include bds-grid-generate-cols(8, 'md');
|
||||
@include bds-grid-generate-auto('md');
|
||||
@include bds-grid-generate-offsets(8, 'md');
|
||||
}
|
||||
|
||||
// Large (≥992px) — 12-column grid
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include xrpl-grid-generate-fill('lg');
|
||||
@include xrpl-grid-generate-cols(12, 'lg');
|
||||
@include xrpl-grid-generate-auto('lg');
|
||||
@include xrpl-grid-generate-offsets(12, 'lg');
|
||||
@include bds-grid-generate-fill('lg');
|
||||
@include bds-grid-generate-cols(12, 'lg');
|
||||
@include bds-grid-generate-auto('lg');
|
||||
@include bds-grid-generate-offsets(12, 'lg');
|
||||
}
|
||||
|
||||
// XL (≥1280px) — retain 12-column grid with wider margins
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include xrpl-grid-generate-fill('xl');
|
||||
@include xrpl-grid-generate-cols(12, 'xl');
|
||||
@include xrpl-grid-generate-auto('xl');
|
||||
@include xrpl-grid-generate-offsets(12, 'xl');
|
||||
@include bds-grid-generate-fill('xl');
|
||||
@include bds-grid-generate-cols(12, 'xl');
|
||||
@include bds-grid-generate-auto('xl');
|
||||
@include bds-grid-generate-offsets(12, 'xl');
|
||||
}
|
||||
@@ -228,22 +228,22 @@ Center content or create spacing with offsets:
|
||||
The component generates the following CSS classes:
|
||||
|
||||
### Container
|
||||
- `xrpl-grid__container`
|
||||
- `bds-grid__container`
|
||||
|
||||
### Row
|
||||
- `xrpl-grid__row`
|
||||
- `bds-grid__row`
|
||||
|
||||
### Column Spans
|
||||
- `xrpl-grid__col-{number}` (e.g., `xrpl-grid__col-6`)
|
||||
- `xrpl-grid__col-auto`
|
||||
- `xrpl-grid__col` (for fill)
|
||||
- `xrpl-grid__col-{breakpoint}-{number}` (e.g., `xrpl-grid__col-md-6`)
|
||||
- `xrpl-grid__col-{breakpoint}-auto`
|
||||
- `xrpl-grid__col-{breakpoint}` (for fill)
|
||||
- `bds-grid__col-{number}` (e.g., `bds-grid__col-6`)
|
||||
- `bds-grid__col-auto`
|
||||
- `bds-grid__col` (for fill)
|
||||
- `bds-grid__col-{breakpoint}-{number}` (e.g., `bds-grid__col-md-6`)
|
||||
- `bds-grid__col-{breakpoint}-auto`
|
||||
- `bds-grid__col-{breakpoint}` (for fill)
|
||||
|
||||
### Column Offsets
|
||||
- `xrpl-grid__offset-{number}` (e.g., `xrpl-grid__offset-2`)
|
||||
- `xrpl-grid__offset-{breakpoint}-{number}` (e.g., `xrpl-grid__offset-md-2`)
|
||||
- `bds-grid__offset-{number}` (e.g., `bds-grid__offset-2`)
|
||||
- `bds-grid__offset-{breakpoint}-{number}` (e.g., `bds-grid__offset-md-2`)
|
||||
|
||||
## TypeScript Types
|
||||
|
||||
|
||||
@@ -35,18 +35,18 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): string =
|
||||
const prefixStr = prefix ? `-${prefix}` : "";
|
||||
|
||||
if (value === "auto") {
|
||||
// Generates xrpl-grid__col-auto or xrpl-grid__col-md-auto
|
||||
return `xrpl-grid__col${prefixStr}-auto`;
|
||||
// Generates bds-grid__col-auto or bds-grid__col-md-auto
|
||||
return `bds-grid__col${prefixStr}-auto`;
|
||||
}
|
||||
|
||||
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
|
||||
return `xrpl-grid__col${prefixStr}-fill`;
|
||||
return `bds-grid__col${prefixStr}-fill`;
|
||||
}
|
||||
|
||||
// Generates xrpl-grid__col-6 or xrpl-grid__col-md-6
|
||||
return `xrpl-grid__col${prefixStr}-${value}`;
|
||||
// Generates bds-grid__col-6 or bds-grid__col-md-6
|
||||
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 prefixStr = prefix ? `-${prefix}` : "";
|
||||
// Generates xrpl-grid__offset-2 or xrpl-grid__offset-md-2
|
||||
return `xrpl-grid__offset${prefixStr}-${value}`;
|
||||
// Generates bds-grid__offset-2 or bds-grid__offset-md-2
|
||||
return `bds-grid__offset${prefixStr}-${value}`;
|
||||
};
|
||||
|
||||
|
||||
// --- PageGrid Root Component ---
|
||||
const PageGridRoot = React.forwardRef<HTMLDivElement, PageGridProps>(
|
||||
({ 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 ---
|
||||
const PageGridRow = React.forwardRef<HTMLDivElement, PageGridRowProps>(
|
||||
({ 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];
|
||||
|
||||
if (value) {
|
||||
// Generates classes like xrpl-grid__col-md-6
|
||||
// Generates classes like bds-grid__col-md-6
|
||||
spanClasses.push(classForSpan(key, value));
|
||||
}
|
||||
});
|
||||
@@ -132,7 +132,7 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
|
||||
const value = offset[key];
|
||||
|
||||
if (value !== undefined) {
|
||||
// Generates classes like xrpl-grid__offset-md-3
|
||||
// Generates classes like bds-grid__offset-md-3
|
||||
offsetClasses.push(classForOffset(key, value));
|
||||
}
|
||||
});
|
||||
@@ -142,8 +142,8 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
// Note: Added "xrpl-grid__col" base class for consistent column initialization
|
||||
className={clsx("xrpl-grid__col", className, spanClasses, offsetClasses)}
|
||||
// Note: Added "bds-grid__col" base class for consistent column initialization
|
||||
className={clsx("bds-grid__col", className, spanClasses, offsetClasses)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -13681,7 +13681,7 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.xrpl-grid__container {
|
||||
.bds-grid__container {
|
||||
width: 100%;
|
||||
margin-right: 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;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__container {
|
||||
.bds-grid__container {
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__container {
|
||||
.bds-grid__container {
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.xrpl-grid__container {
|
||||
.bds-grid__container {
|
||||
padding-right: 112px;
|
||||
padding-left: 112px;
|
||||
max-width: 1440px;
|
||||
}
|
||||
}
|
||||
.xrpl-grid__row {
|
||||
.bds-grid__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.xrpl-grid__col {
|
||||
.bds-grid__col {
|
||||
box-sizing: border-box;
|
||||
flex: auto;
|
||||
flex-shrink: 0;
|
||||
@@ -13721,625 +13721,625 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.xrpl-grid__col-fill {
|
||||
.bds-grid__col-fill {
|
||||
flex: 1 0 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.xrpl-grid__col-1 {
|
||||
.bds-grid__col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 1 + 8px * (1 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-1 {
|
||||
.bds-grid__col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-1 {
|
||||
.bds-grid__col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-1 {
|
||||
.bds-grid__col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-2 {
|
||||
.bds-grid__col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 2 + 8px * (2 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-2 {
|
||||
.bds-grid__col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-2 {
|
||||
.bds-grid__col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-2 {
|
||||
.bds-grid__col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-3 {
|
||||
.bds-grid__col-3 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 3 + 8px * (3 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-3 {
|
||||
.bds-grid__col-3 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-3 {
|
||||
.bds-grid__col-3 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-3 {
|
||||
.bds-grid__col-3 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-4 {
|
||||
.bds-grid__col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-4 {
|
||||
.bds-grid__col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-4 {
|
||||
.bds-grid__col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-4 {
|
||||
.bds-grid__col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-5 {
|
||||
.bds-grid__col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-5 {
|
||||
.bds-grid__col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-5 {
|
||||
.bds-grid__col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-5 {
|
||||
.bds-grid__col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-6 {
|
||||
.bds-grid__col-6 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-6 {
|
||||
.bds-grid__col-6 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-6 {
|
||||
.bds-grid__col-6 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-6 {
|
||||
.bds-grid__col-6 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-7 {
|
||||
.bds-grid__col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-7 {
|
||||
.bds-grid__col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-7 {
|
||||
.bds-grid__col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-7 {
|
||||
.bds-grid__col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-8 {
|
||||
.bds-grid__col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-8 {
|
||||
.bds-grid__col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-8 {
|
||||
.bds-grid__col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-8 {
|
||||
.bds-grid__col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-9 {
|
||||
.bds-grid__col-9 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-9 {
|
||||
.bds-grid__col-9 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-9 {
|
||||
.bds-grid__col-9 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-9 {
|
||||
.bds-grid__col-9 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-10 {
|
||||
.bds-grid__col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-10 {
|
||||
.bds-grid__col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-10 {
|
||||
.bds-grid__col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-10 {
|
||||
.bds-grid__col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-11 {
|
||||
.bds-grid__col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-11 {
|
||||
.bds-grid__col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-11 {
|
||||
.bds-grid__col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-11 {
|
||||
.bds-grid__col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-12 {
|
||||
.bds-grid__col-12 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-12 {
|
||||
.bds-grid__col-12 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-12 {
|
||||
.bds-grid__col-12 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-12 {
|
||||
.bds-grid__col-12 {
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid__col-auto {
|
||||
.bds-grid__col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.xrpl-grid__offset-0 {
|
||||
.bds-grid__offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.xrpl-grid__offset-1 {
|
||||
.bds-grid__offset-1 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.xrpl-grid__offset-2 {
|
||||
.bds-grid__offset-2 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.xrpl-grid__offset-3 {
|
||||
.bds-grid__offset-3 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-sm-fill {
|
||||
.bds-grid__col-sm-fill {
|
||||
flex: 1 0 0;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__col-sm-1 {
|
||||
.bds-grid__col-sm-1 {
|
||||
flex: 0 0 auto;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__offset-sm-0 {
|
||||
.bds-grid__offset-sm-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.xrpl-grid__offset-sm-1 {
|
||||
.bds-grid__offset-sm-1 {
|
||||
margin-left: 12.5%;
|
||||
}
|
||||
.xrpl-grid__offset-sm-2 {
|
||||
.bds-grid__offset-sm-2 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.xrpl-grid__offset-sm-3 {
|
||||
.bds-grid__offset-sm-3 {
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
.xrpl-grid__offset-sm-4 {
|
||||
.bds-grid__offset-sm-4 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.xrpl-grid__offset-sm-5 {
|
||||
.bds-grid__offset-sm-5 {
|
||||
margin-left: 62.5%;
|
||||
}
|
||||
.xrpl-grid__offset-sm-6 {
|
||||
.bds-grid__offset-sm-6 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.xrpl-grid__offset-sm-7 {
|
||||
.bds-grid__offset-sm-7 {
|
||||
margin-left: 87.5%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.xrpl-grid__col-md-fill {
|
||||
.bds-grid__col-md-fill {
|
||||
flex: 1 0 0;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__col-md-1 {
|
||||
.bds-grid__col-md-1 {
|
||||
flex: 0 0 auto;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__offset-md-0 {
|
||||
.bds-grid__offset-md-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.xrpl-grid__offset-md-1 {
|
||||
.bds-grid__offset-md-1 {
|
||||
margin-left: 12.5%;
|
||||
}
|
||||
.xrpl-grid__offset-md-2 {
|
||||
.bds-grid__offset-md-2 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.xrpl-grid__offset-md-3 {
|
||||
.bds-grid__offset-md-3 {
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
.xrpl-grid__offset-md-4 {
|
||||
.bds-grid__offset-md-4 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.xrpl-grid__offset-md-5 {
|
||||
.bds-grid__offset-md-5 {
|
||||
margin-left: 62.5%;
|
||||
}
|
||||
.xrpl-grid__offset-md-6 {
|
||||
.bds-grid__offset-md-6 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.xrpl-grid__offset-md-7 {
|
||||
.bds-grid__offset-md-7 {
|
||||
margin-left: 87.5%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.xrpl-grid__col-lg-fill {
|
||||
.bds-grid__col-lg-fill {
|
||||
flex: 1 0 0;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__col-lg-1 {
|
||||
.bds-grid__col-lg-1 {
|
||||
flex: 0 0 auto;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__offset-lg-0 {
|
||||
.bds-grid__offset-lg-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.xrpl-grid__offset-lg-1 {
|
||||
.bds-grid__offset-lg-1 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-2 {
|
||||
.bds-grid__offset-lg-2 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-3 {
|
||||
.bds-grid__offset-lg-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-4 {
|
||||
.bds-grid__offset-lg-4 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-5 {
|
||||
.bds-grid__offset-lg-5 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-6 {
|
||||
.bds-grid__offset-lg-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-7 {
|
||||
.bds-grid__offset-lg-7 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-8 {
|
||||
.bds-grid__offset-lg-8 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-9 {
|
||||
.bds-grid__offset-lg-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-10 {
|
||||
.bds-grid__offset-lg-10 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-lg-11 {
|
||||
.bds-grid__offset-lg-11 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.xrpl-grid__col-xl-fill {
|
||||
.bds-grid__col-xl-fill {
|
||||
flex: 1 0 0;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__col-xl-1 {
|
||||
.bds-grid__col-xl-1 {
|
||||
flex: 0 0 auto;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
width: auto;
|
||||
}
|
||||
.xrpl-grid__offset-xl-0 {
|
||||
.bds-grid__offset-xl-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.xrpl-grid__offset-xl-1 {
|
||||
.bds-grid__offset-xl-1 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-2 {
|
||||
.bds-grid__offset-xl-2 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-3 {
|
||||
.bds-grid__offset-xl-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-4 {
|
||||
.bds-grid__offset-xl-4 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-5 {
|
||||
.bds-grid__offset-xl-5 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-6 {
|
||||
.bds-grid__offset-xl-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-7 {
|
||||
.bds-grid__offset-xl-7 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-8 {
|
||||
.bds-grid__offset-xl-8 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-9 {
|
||||
.bds-grid__offset-xl-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-10 {
|
||||
.bds-grid__offset-xl-10 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.xrpl-grid__offset-xl-11 {
|
||||
.bds-grid__offset-xl-11 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user