mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
clean up of grid, working on all screen sizes, logic built out
This commit is contained in:
Calvin Jhunjhuwala
406
about/grid-showcase.page.tsx
Normal file
406
about/grid-showcase.page.tsx
Normal file
@@ -0,0 +1,406 @@
|
|||||||
|
import { RFC_2822 } from "moment";
|
||||||
|
import * as React from "react";
|
||||||
|
import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";
|
||||||
|
|
||||||
|
export const frontmatter = {
|
||||||
|
seo: {
|
||||||
|
title: 'PageGrid Showcase',
|
||||||
|
description: "A comprehensive showcase and documentation for the PageGrid component system.",
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Demo component with bordered divs to visualize grid
|
||||||
|
const GridDemo = ({ title, description, children, code }: {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
code?: string;
|
||||||
|
}) => (
|
||||||
|
<div className="mb-26">
|
||||||
|
<h3 className="h4 mb-4">{title}</h3>
|
||||||
|
{description && <p className="mb-6">{description}</p>}
|
||||||
|
{code && (
|
||||||
|
<div className="mb-6 p-4 bg-light br-4 text-black" style={{ fontFamily: 'monospace', fontSize: '14px', overflow: 'auto' }}>
|
||||||
|
<pre style={{ margin: 0, whiteSpace: 'pre-wrap', color: '#000' }}>{code}</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div style={{
|
||||||
|
border: '1px dashed #ccc',
|
||||||
|
padding: '16px',
|
||||||
|
backgroundColor: '#f9f9f9',
|
||||||
|
borderRadius: '8px'
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Bordered column component for visualization
|
||||||
|
const BorderedCol = ({ children, ...props }: { children: React.ReactNode } & any) => (
|
||||||
|
<PageGridCol
|
||||||
|
{...props}
|
||||||
|
style={{
|
||||||
|
border: '1px solid #0069ff',
|
||||||
|
backgroundColor: 'rgba(0, 105, 255, 0.05)',
|
||||||
|
padding: '16px',
|
||||||
|
minHeight: '60px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
textAlign: 'center',
|
||||||
|
...props.style
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</PageGridCol>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default function GridShowcase() {
|
||||||
|
return (
|
||||||
|
<div className="landing">
|
||||||
|
<PageGrid className="py-26">
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<div className="text-center mb-26">
|
||||||
|
<h1 className="h2 mb-4">PageGrid Component Showcase</h1>
|
||||||
|
<p className="longform">
|
||||||
|
A comprehensive guide to using the PageGrid responsive grid system.
|
||||||
|
All examples below use bordered divs to visualize the grid structure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Basic Grid Structure */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<GridDemo
|
||||||
|
title="Basic Grid Structure"
|
||||||
|
description="The PageGrid system consists of three components: PageGrid (container), PageGrid.Row (rows), and PageGrid.Col (columns)."
|
||||||
|
code={`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col span={6}>Column 1</PageGrid.Col>
|
||||||
|
<PageGrid.Col span={6}>Column 2</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}
|
||||||
|
>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
<BorderedCol span={6}>span={6}</BorderedCol>
|
||||||
|
<BorderedCol span={6}>span={6}</BorderedCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</GridDemo>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Equal Columns */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<GridDemo
|
||||||
|
title="Equal Width Columns"
|
||||||
|
description="Create equal-width columns that automatically divide the available space."
|
||||||
|
code={`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col span={4}>Column 1</PageGrid.Col>
|
||||||
|
<PageGrid.Col span={4}>Column 2</PageGrid.Col>
|
||||||
|
<PageGrid.Col span={4}>Column 3</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}
|
||||||
|
>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
<BorderedCol span={4}>span={4}</BorderedCol>
|
||||||
|
<BorderedCol span={4}>span={4}</BorderedCol>
|
||||||
|
<BorderedCol span={4}>span={4}</BorderedCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</GridDemo>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Auto and Fill */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<GridDemo
|
||||||
|
title="Auto and Fill Columns"
|
||||||
|
description="Use 'auto' for columns that size to their content, and 'fill' for columns that take remaining space."
|
||||||
|
code={`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col span="auto">Auto</PageGrid.Col>
|
||||||
|
<PageGrid.Col span="fill">Fill</PageGrid.Col>
|
||||||
|
<PageGrid.Col span="auto">Auto</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}
|
||||||
|
>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
<BorderedCol span="auto">span="auto"</BorderedCol>
|
||||||
|
<BorderedCol span="fill">span="fill"</BorderedCol>
|
||||||
|
<BorderedCol span="auto">span="auto"</BorderedCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</GridDemo>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Responsive Layout */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<GridDemo
|
||||||
|
title="Responsive Layout"
|
||||||
|
description="Create layouts that adapt to different screen sizes using responsive span values."
|
||||||
|
code={`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col span={{
|
||||||
|
base: 12, // Full width on mobile
|
||||||
|
md: 6, // Half width on tablet
|
||||||
|
lg: 4 // Third width on desktop
|
||||||
|
}}>
|
||||||
|
Responsive Column
|
||||||
|
</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}
|
||||||
|
>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
<BorderedCol span={{ base: 4, md: 6, lg: 4 }}>
|
||||||
|
base: 4, md: 6, lg: 4
|
||||||
|
</BorderedCol>
|
||||||
|
<BorderedCol span={{ base: 4, md: 6, lg: 4 }}>
|
||||||
|
base: 4, md: 6, lg: 4
|
||||||
|
</BorderedCol>
|
||||||
|
<BorderedCol span={{ base: 4, md: 8, lg: 4 }}>
|
||||||
|
base: 4, md: 8, lg: 4
|
||||||
|
</BorderedCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</GridDemo>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Offsets */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<GridDemo
|
||||||
|
title="Column Offsets"
|
||||||
|
description="Use offsets to push columns to the right, useful for centering content or creating spacing."
|
||||||
|
code={`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col span={8} offset={2}>
|
||||||
|
Centered (8 columns with 2 offset)
|
||||||
|
</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}
|
||||||
|
>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
<BorderedCol span={8} offset={{ lg: 2 }}>
|
||||||
|
span={8}, offset: lg: 2
|
||||||
|
</BorderedCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</GridDemo>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Responsive Offsets */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<GridDemo
|
||||||
|
title="Responsive Offsets"
|
||||||
|
description="Offsets can also be responsive, changing at different breakpoints."
|
||||||
|
code={`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col
|
||||||
|
span={6}
|
||||||
|
offset={{
|
||||||
|
base: 0, // No offset on mobile
|
||||||
|
md: 3 // Offset by 3 on tablet+
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Responsive Offset
|
||||||
|
</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}
|
||||||
|
>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
<BorderedCol span={6} offset={{ base: 0, md: 3 }}>
|
||||||
|
span={6}, offset: base=0, md=3
|
||||||
|
</BorderedCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</GridDemo>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Complex Layout */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<GridDemo
|
||||||
|
title="Complex Layout Example"
|
||||||
|
description="A real-world example showing a sidebar and main content area."
|
||||||
|
code={`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col span={{ base: 12, lg: 4 }}>
|
||||||
|
Sidebar
|
||||||
|
</PageGrid.Col>
|
||||||
|
<PageGrid.Col span={{ base: 12, lg: 8 }}>
|
||||||
|
Main Content
|
||||||
|
</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}
|
||||||
|
>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
<BorderedCol span={{ base: 4, lg: 4 }} style={{ backgroundColor: 'rgba(255, 200, 0, 0.1)' }}>
|
||||||
|
Sidebar<br />(base: 4, lg: 4)
|
||||||
|
</BorderedCol>
|
||||||
|
<BorderedCol span={{ base: 4, lg: 8 }} style={{ backgroundColor: 'rgba(0, 200, 255, 0.1)' }}>
|
||||||
|
Main Content<br />(base: 4, lg: 8)
|
||||||
|
</BorderedCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</GridDemo>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Breakpoints Documentation */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<div className="mb-26">
|
||||||
|
<h2 className="h3 mb-6">Breakpoints</h2>
|
||||||
|
<p className="mb-6">
|
||||||
|
The PageGrid system uses the following breakpoints:
|
||||||
|
</p>
|
||||||
|
<div style={{ width: '100%', backgroundColor: '#FFFFFF', borderRadius: '4px', overflow: 'hidden', border: '1px solid #EEE', marginBottom: '24px' }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr',
|
||||||
|
borderBottom: '2px solid #E0E0E1',
|
||||||
|
background: '#FAFAFA'
|
||||||
|
}}>
|
||||||
|
<div style={{ padding: '12px', fontWeight: 600 }}>Breakpoint</div>
|
||||||
|
<div style={{ padding: '12px', fontWeight: 600 }}>Min Width</div>
|
||||||
|
<div style={{ padding: '12px', fontWeight: 600 }}>Columns</div>
|
||||||
|
<div style={{ padding: '12px', fontWeight: 600 }}>Container Padding</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rows */}
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
|
||||||
|
<div style={{ padding: '12px' }}><code>base</code></div>
|
||||||
|
<div style={{ padding: '12px' }}>0px</div>
|
||||||
|
<div style={{ padding: '12px' }}>4 columns</div>
|
||||||
|
<div style={{ padding: '12px' }}>16px</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
|
||||||
|
<div style={{ padding: '12px' }}><code>sm</code></div>
|
||||||
|
<div style={{ padding: '12px' }}>576px</div>
|
||||||
|
<div style={{ padding: '12px' }}>8 columns</div>
|
||||||
|
<div style={{ padding: '12px' }}>24px</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
|
||||||
|
<div style={{ padding: '12px' }}><code>md</code></div>
|
||||||
|
<div style={{ padding: '12px' }}>576px</div>
|
||||||
|
<div style={{ padding: '12px' }}>8 columns</div>
|
||||||
|
<div style={{ padding: '12px' }}>24px</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
|
||||||
|
<div style={{ padding: '12px' }}><code>lg</code></div>
|
||||||
|
<div style={{ padding: '12px' }}>992px</div>
|
||||||
|
<div style={{ padding: '12px' }}>12 columns</div>
|
||||||
|
<div style={{ padding: '12px' }}>32px</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr' }}>
|
||||||
|
<div style={{ padding: '12px' }}><code>xl</code></div>
|
||||||
|
<div style={{ padding: '12px' }}>1280px</div>
|
||||||
|
<div style={{ padding: '12px' }}>12 columns</div>
|
||||||
|
<div style={{ padding: '12px' }}>112px (max-width: 1440px)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Usage Documentation */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<div className="mb-26">
|
||||||
|
<h2 className="h3 mb-6">Usage</h2>
|
||||||
|
|
||||||
|
<h4 className="h5 mb-4">Import</h4>
|
||||||
|
<div className="p-4 bg-light br-4 mb-6" style={{ fontFamily: 'monospace', fontSize: '14px' }}>
|
||||||
|
<pre style={{ margin: 0, color: '#000' }}>{`import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";`}</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 className="h5 mb-4">Basic Example</h4>
|
||||||
|
<div className="p-4 bg-light br-4 mb-6" style={{ fontFamily: 'monospace', fontSize: '14px', overflow: 'auto' }}>
|
||||||
|
<pre style={{ margin: 0, whiteSpace: 'pre-wrap', color: '#000' }}>{`<PageGrid>
|
||||||
|
<PageGrid.Row>
|
||||||
|
<PageGrid.Col span={6}>
|
||||||
|
Column 1
|
||||||
|
</PageGrid.Col>
|
||||||
|
<PageGrid.Col span={6}>
|
||||||
|
Column 2
|
||||||
|
</PageGrid.Col>
|
||||||
|
</PageGrid.Row>
|
||||||
|
</PageGrid>`}</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 className="h5 mb-4">Props</h4>
|
||||||
|
<div className="mb-6">
|
||||||
|
<h5 className="h6 mb-3">PageGrid.Col Props</h5>
|
||||||
|
<ul>
|
||||||
|
<li><code>span</code> - Column span (number, "auto", "fill", or responsive object)</li>
|
||||||
|
<li><code>offset</code> - Column offset (number or responsive object)</li>
|
||||||
|
<li><code>className</code> - Additional CSS classes</li>
|
||||||
|
<li>All standard HTML div attributes</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 className="h5 mb-4">Span Values</h4>
|
||||||
|
<ul className="mb-6">
|
||||||
|
<li><strong>Number</strong> (e.g., 1-12): Fixed column width</li>
|
||||||
|
<li><strong>"auto"</strong>: Column sizes to its content</li>
|
||||||
|
<li><strong>"fill"</strong>: Column fills remaining space</li>
|
||||||
|
<li><strong>Responsive Object</strong>: Different spans for different breakpoints</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4 className="h5 mb-4">Best Practices</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Always wrap columns in a <code>PageGrid.Row</code></li>
|
||||||
|
<li>Use responsive values for mobile-first design</li>
|
||||||
|
<li>Total column spans in a row should not exceed the grid columns (4 for base, 8 for sm/md, 12 for lg/xl)</li>
|
||||||
|
<li>Use offsets for spacing and centering content</li>
|
||||||
|
<li>Test layouts at all breakpoints</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
|
||||||
|
{/* Visual Grid Demonstration */}
|
||||||
|
<PageGridRow>
|
||||||
|
<PageGridCol>
|
||||||
|
<div className="mb-26">
|
||||||
|
<h2 className="h3 mb-6">Visual Grid Demonstration</h2>
|
||||||
|
<p className="mb-6">
|
||||||
|
Below is a visual representation of the 12-column grid system at the lg breakpoint:
|
||||||
|
</p>
|
||||||
|
<PageGrid>
|
||||||
|
<PageGridRow>
|
||||||
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((num) => (
|
||||||
|
<BorderedCol key={num} span={{ base: 2, lg: 1 }} style={{ fontSize: '12px' }}>
|
||||||
|
{num}
|
||||||
|
</BorderedCol>
|
||||||
|
))}
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</div>
|
||||||
|
</PageGridCol>
|
||||||
|
</PageGridRow>
|
||||||
|
</PageGrid>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,12 +5,24 @@
|
|||||||
|
|
||||||
$xrpl-grid-gutter: 8px;
|
$xrpl-grid-gutter: 8px;
|
||||||
|
|
||||||
|
// Custom mixin that accounts for gap spacing in width calculations
|
||||||
|
@mixin xrpl-make-col($size, $columns) {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
// Calculate width accounting for gap spacing
|
||||||
|
// Formula: width per column * span + gap spacing between spanned columns
|
||||||
|
// Total gaps in grid: ($columns - 1)
|
||||||
|
// 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)));
|
||||||
|
}
|
||||||
|
|
||||||
@mixin xrpl-grid-generate-cols($columns, $suffix: null) {
|
@mixin xrpl-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, ".xrpl-grid__col-#{$suffix}-#{$i}", ".xrpl-grid__col-#{$i}");
|
||||||
|
|
||||||
#{$selector} {
|
#{$selector} {
|
||||||
@include make-col($i, $columns);
|
@include xrpl-make-col($i, $columns);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -41,6 +53,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() {
|
||||||
|
@for $i from 1 through 12 {
|
||||||
|
.xrpl-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);
|
||||||
|
} @else {
|
||||||
|
@include xrpl-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);
|
||||||
|
} @else {
|
||||||
|
@include xrpl-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);
|
||||||
|
} @else {
|
||||||
|
@include xrpl-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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.xrpl-grid {
|
.xrpl-grid {
|
||||||
&__container {
|
&__container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -68,17 +117,26 @@ $xrpl-grid-gutter: 8px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__row {
|
&__row {
|
||||||
@include make-row($xrpl-grid-gutter);
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
// Use gap for spacing - works with our calc-based column widths
|
||||||
|
gap: $xrpl-grid-gutter;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__col {
|
&__col {
|
||||||
@include make-col-ready();
|
box-sizing: border-box;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
// No padding/margin for gutters - spacing handled by gap on row
|
||||||
|
// Column widths are calculated to account for gap spacing
|
||||||
|
// Padding can be added via style prop without affecting grid spacing
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Base (0 - 575px) — 4-column grid
|
// Base (0 - 575px) — 4-column grid with responsive behavior built-in
|
||||||
@include xrpl-grid-generate-fill();
|
@include xrpl-grid-generate-fill();
|
||||||
@include xrpl-grid-generate-cols(4);
|
@include xrpl-grid-generate-responsive-base-cols();
|
||||||
@include xrpl-grid-generate-auto();
|
@include xrpl-grid-generate-auto();
|
||||||
@include xrpl-grid-generate-offsets(4);
|
@include xrpl-grid-generate-offsets(4);
|
||||||
|
|
||||||
|
|||||||
@@ -99,6 +99,10 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
|
|||||||
|
|
||||||
if (baseSpan) {
|
if (baseSpan) {
|
||||||
spanClasses.push(classForSpan(null, baseSpan));
|
spanClasses.push(classForSpan(null, baseSpan));
|
||||||
|
} else {
|
||||||
|
// If no base span is provided, default to full width (4 columns for base breakpoint)
|
||||||
|
// This ensures columns are full width on mobile when only larger breakpoints are specified
|
||||||
|
spanClasses.push(classForSpan(null, 4));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handles sm, md, lg, xl breakpoints (with prefix)
|
// Handles sm, md, lg, xl breakpoints (with prefix)
|
||||||
|
|||||||
@@ -13709,21 +13709,15 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.xrpl-grid__row {
|
.xrpl-grid__row {
|
||||||
--bs-gutter-x: 8px;
|
|
||||||
--bs-gutter-y: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: calc(-1 * var(--bs-gutter-y));
|
gap: 8px;
|
||||||
margin-right: calc(-0.5 * var(--bs-gutter-x));
|
|
||||||
margin-left: calc(-0.5 * var(--bs-gutter-x));
|
|
||||||
}
|
}
|
||||||
.xrpl-grid__col {
|
.xrpl-grid__col {
|
||||||
|
box-sizing: border-box;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding-right: calc(var(--bs-gutter-x) * 0.5);
|
|
||||||
padding-left: calc(var(--bs-gutter-x) * 0.5);
|
|
||||||
margin-top: var(--bs-gutter-y);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.xrpl-grid__col {
|
.xrpl-grid__col {
|
||||||
@@ -13732,22 +13726,278 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
|||||||
|
|
||||||
.xrpl-grid__col-1 {
|
.xrpl-grid__col-1 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 25%;
|
width: calc((100% - 8px * (4 - 1)) / 4 * 1 + 8px * (1 - 1));
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.xrpl-grid__col-1 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.xrpl-grid__col-2 {
|
.xrpl-grid__col-2 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 50%;
|
width: calc((100% - 8px * (4 - 1)) / 4 * 2 + 8px * (2 - 1));
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.xrpl-grid__col-2 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.xrpl-grid__col-3 {
|
.xrpl-grid__col-3 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 75%;
|
width: calc((100% - 8px * (4 - 1)) / 4 * 3 + 8px * (3 - 1));
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.xrpl-grid__col-3 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.xrpl-grid__col-4 {
|
.xrpl-grid__col-4 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.xrpl-grid__col-4 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.xrpl-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 {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.xrpl-grid__col-auto {
|
.xrpl-grid__col-auto {
|
||||||
@@ -13777,35 +14027,35 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
|||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-1 {
|
.xrpl-grid__col-sm-1 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 12.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-2 {
|
.xrpl-grid__col-sm-2 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 25%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-3 {
|
.xrpl-grid__col-sm-3 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 37.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-4 {
|
.xrpl-grid__col-sm-4 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 50%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-5 {
|
.xrpl-grid__col-sm-5 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 62.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-6 {
|
.xrpl-grid__col-sm-6 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 75%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-7 {
|
.xrpl-grid__col-sm-7 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 87.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-8 {
|
.xrpl-grid__col-sm-8 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-sm-auto {
|
.xrpl-grid__col-sm-auto {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
@@ -13842,35 +14092,35 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
|||||||
}
|
}
|
||||||
.xrpl-grid__col-md-1 {
|
.xrpl-grid__col-md-1 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 12.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-2 {
|
.xrpl-grid__col-md-2 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 25%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-3 {
|
.xrpl-grid__col-md-3 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 37.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-4 {
|
.xrpl-grid__col-md-4 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 50%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-5 {
|
.xrpl-grid__col-md-5 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 62.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-6 {
|
.xrpl-grid__col-md-6 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 75%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-7 {
|
.xrpl-grid__col-md-7 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 87.5%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-8 {
|
.xrpl-grid__col-md-8 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-md-auto {
|
.xrpl-grid__col-md-auto {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
@@ -13907,51 +14157,51 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
|||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-1 {
|
.xrpl-grid__col-lg-1 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 8.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-2 {
|
.xrpl-grid__col-lg-2 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 16.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-3 {
|
.xrpl-grid__col-lg-3 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 25%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-4 {
|
.xrpl-grid__col-lg-4 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 33.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-5 {
|
.xrpl-grid__col-lg-5 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 41.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-6 {
|
.xrpl-grid__col-lg-6 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 50%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-7 {
|
.xrpl-grid__col-lg-7 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 58.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-8 {
|
.xrpl-grid__col-lg-8 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 66.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-9 {
|
.xrpl-grid__col-lg-9 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 75%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-10 {
|
.xrpl-grid__col-lg-10 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 83.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-11 {
|
.xrpl-grid__col-lg-11 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 91.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-12 {
|
.xrpl-grid__col-lg-12 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-lg-auto {
|
.xrpl-grid__col-lg-auto {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
@@ -14000,51 +14250,51 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
|
|||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-1 {
|
.xrpl-grid__col-xl-1 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 8.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-2 {
|
.xrpl-grid__col-xl-2 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 16.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-3 {
|
.xrpl-grid__col-xl-3 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 25%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-4 {
|
.xrpl-grid__col-xl-4 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 33.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-5 {
|
.xrpl-grid__col-xl-5 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 41.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-6 {
|
.xrpl-grid__col-xl-6 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 50%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-7 {
|
.xrpl-grid__col-xl-7 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 58.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-8 {
|
.xrpl-grid__col-xl-8 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 66.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-9 {
|
.xrpl-grid__col-xl-9 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 75%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-10 {
|
.xrpl-grid__col-xl-10 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 83.33333333%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-11 {
|
.xrpl-grid__col-xl-11 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 91.66666667%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-12 {
|
.xrpl-grid__col-xl-12 {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
|
||||||
}
|
}
|
||||||
.xrpl-grid__col-xl-auto {
|
.xrpl-grid__col-xl-auto {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user