From 6f76d4ece5b66bea8c3d3a9a01f7dd46870a0da2 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 3 Dec 2025 13:09:39 -0800 Subject: [PATCH 1/6] clean up of grid, working on all screen sizes, logic built out --- about/grid-showcase.page.tsx | 406 +++++++++++++++++++++ shared/components/PageGrid/_page-grid.scss | 68 +++- shared/components/PageGrid/page-grid.tsx | 4 + static/css/devportal2024-v1.css | 354 +++++++++++++++--- 4 files changed, 775 insertions(+), 57 deletions(-) create mode 100644 about/grid-showcase.page.tsx diff --git a/about/grid-showcase.page.tsx b/about/grid-showcase.page.tsx new file mode 100644 index 0000000000..b95396d8f2 --- /dev/null +++ b/about/grid-showcase.page.tsx @@ -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; +}) => ( +
+

{title}

+ {description &&

{description}

} + {code && ( +
+ 
{code}
+
+ )} +
+ {children} +
+
+); + +// Bordered column component for visualization +const BorderedCol = ({ children, ...props }: { children: React.ReactNode } & any) => ( + + {children} + +); + +export default function GridShowcase() { + return ( +
+ + + +
+

PageGrid Component Showcase

+

+ A comprehensive guide to using the PageGrid responsive grid system. + All examples below use bordered divs to visualize the grid structure. +

+
+ + + + {/* Basic Grid Structure */} + + + + + Column 1 + Column 2 + +`} + > + + + span={6} + span={6} + + + + + + + {/* Equal Columns */} + + + + + Column 1 + Column 2 + Column 3 + +`} + > + + + span={4} + span={4} + span={4} + + + + + + + {/* Auto and Fill */} + + + + + Auto + Fill + Auto + +`} + > + + + span="auto" + span="fill" + span="auto" + + + + + + + {/* Responsive Layout */} + + + + + + Responsive Column + + +`} + > + + + + base: 4, md: 6, lg: 4 + + + base: 4, md: 6, lg: 4 + + + base: 4, md: 8, lg: 4 + + + + + + + + {/* Offsets */} + + + + + + Centered (8 columns with 2 offset) + + +`} + > + + + + span={8}, offset: lg: 2 + + + + + + + + {/* Responsive Offsets */} + + + + + + Responsive Offset + + +`} + > + + + + span={6}, offset: base=0, md=3 + + + + + + + + {/* Complex Layout */} + + + + + + Sidebar + + + Main Content + + +`} + > + + + + Sidebar
(base: 4, lg: 4) + + + Main Content
(base: 4, lg: 8) + + + + + + + + {/* Breakpoints Documentation */} + + +
+

Breakpoints

+

+ The PageGrid system uses the following breakpoints: +

+
+ {/* Header */} +
+
Breakpoint
+
Min Width
+
Columns
+
Container Padding
+
+ + {/* Rows */} +
+
base
+
0px
+
4 columns
+
16px
+
+
+
sm
+
576px
+
8 columns
+
24px
+
+
+
md
+
576px
+
8 columns
+
24px
+
+
+
lg
+
992px
+
12 columns
+
32px
+
+
+
xl
+
1280px
+
12 columns
+
112px (max-width: 1440px)
+
+
+
+ + + + {/* Usage Documentation */} + + +
+

Usage

+ +

Import

+
+ 
{`import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";`}
+
+ +

Basic Example

+
+ 
{`
+  
+    
+      Column 1
+    
+    
+      Column 2
+    
+  
+`}
+
+ +

Props

+
+
PageGrid.Col Props
+
    +
  • span - Column span (number, "auto", "fill", or responsive object)
    • +
  • offset - Column offset (number or responsive object)
    • +
  • className - Additional CSS classes
    • +
  • All standard HTML div attributes
    • +
+
+ +

Span Values

+
    +
  • Number (e.g., 1-12): Fixed column width
    • +
  • "auto": Column sizes to its content
    • +
  • "fill": Column fills remaining space
    • +
  • Responsive Object: Different spans for different breakpoints
    • +
+ +

Best Practices

+
    +
  • Always wrap columns in a PageGrid.Row
    • +
  • Use responsive values for mobile-first design
    • +
  • Total column spans in a row should not exceed the grid columns (4 for base, 8 for sm/md, 12 for lg/xl)
    • +
  • Use offsets for spacing and centering content
    • +
  • Test layouts at all breakpoints
    • +
+
+ + + + {/* Visual Grid Demonstration */} + + +
+

Visual Grid Demonstration

+

+ Below is a visual representation of the 12-column grid system at the lg breakpoint: +

+ + + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((num) => ( + + {num} + + ))} + + +
+ + + +
+ ); +} diff --git a/shared/components/PageGrid/_page-grid.scss b/shared/components/PageGrid/_page-grid.scss index 6c387781ee..8d614aae68 100644 --- a/shared/components/PageGrid/_page-grid.scss +++ b/shared/components/PageGrid/_page-grid.scss @@ -5,12 +5,24 @@ $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) { @for $i from 1 through $columns { $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-#{$i}", ".xrpl-grid__col-#{$i}"); #{$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 { &__container { width: 100%; @@ -68,17 +117,26 @@ $xrpl-grid-gutter: 8px; } &__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 { - @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-cols(4); +@include xrpl-grid-generate-responsive-base-cols(); @include xrpl-grid-generate-auto(); @include xrpl-grid-generate-offsets(4); diff --git a/shared/components/PageGrid/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx index 97565b11a8..2af68eac06 100644 --- a/shared/components/PageGrid/page-grid.tsx +++ b/shared/components/PageGrid/page-grid.tsx @@ -99,6 +99,10 @@ const PageGridCol = React.forwardRef((props, r if (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) diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index a8c5235107..7e0f23bddc 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -13709,21 +13709,15 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } } .xrpl-grid__row { - --bs-gutter-x: 8px; - --bs-gutter-y: 0; display: flex; flex-wrap: wrap; - margin-top: calc(-1 * var(--bs-gutter-y)); - margin-right: calc(-0.5 * var(--bs-gutter-x)); - margin-left: calc(-0.5 * var(--bs-gutter-x)); + gap: 8px; } .xrpl-grid__col { + box-sizing: border-box; flex-shrink: 0; 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 { @@ -13732,22 +13726,278 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov .xrpl-grid__col-1 { 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 { 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 { 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 { 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 { @@ -13777,35 +14027,35 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } .xrpl-grid__col-sm-1 { flex: 0 0 auto; - width: 12.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); } .xrpl-grid__col-sm-2 { flex: 0 0 auto; - width: 25%; + width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); } .xrpl-grid__col-sm-3 { flex: 0 0 auto; - width: 37.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); } .xrpl-grid__col-sm-4 { flex: 0 0 auto; - width: 50%; + width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); } .xrpl-grid__col-sm-5 { flex: 0 0 auto; - width: 62.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); } .xrpl-grid__col-sm-6 { flex: 0 0 auto; - width: 75%; + width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); } .xrpl-grid__col-sm-7 { flex: 0 0 auto; - width: 87.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); } .xrpl-grid__col-sm-8 { flex: 0 0 auto; - width: 100%; + width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } .xrpl-grid__col-sm-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 { flex: 0 0 auto; - width: 12.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); } .xrpl-grid__col-md-2 { flex: 0 0 auto; - width: 25%; + width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); } .xrpl-grid__col-md-3 { flex: 0 0 auto; - width: 37.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); } .xrpl-grid__col-md-4 { flex: 0 0 auto; - width: 50%; + width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); } .xrpl-grid__col-md-5 { flex: 0 0 auto; - width: 62.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); } .xrpl-grid__col-md-6 { flex: 0 0 auto; - width: 75%; + width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); } .xrpl-grid__col-md-7 { flex: 0 0 auto; - width: 87.5%; + width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); } .xrpl-grid__col-md-8 { flex: 0 0 auto; - width: 100%; + width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } .xrpl-grid__col-md-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 { flex: 0 0 auto; - width: 8.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } .xrpl-grid__col-lg-2 { flex: 0 0 auto; - width: 16.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } .xrpl-grid__col-lg-3 { flex: 0 0 auto; - width: 25%; + width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } .xrpl-grid__col-lg-4 { flex: 0 0 auto; - width: 33.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } .xrpl-grid__col-lg-5 { flex: 0 0 auto; - width: 41.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } .xrpl-grid__col-lg-6 { flex: 0 0 auto; - width: 50%; + width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } .xrpl-grid__col-lg-7 { flex: 0 0 auto; - width: 58.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } .xrpl-grid__col-lg-8 { flex: 0 0 auto; - width: 66.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } .xrpl-grid__col-lg-9 { flex: 0 0 auto; - width: 75%; + width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } .xrpl-grid__col-lg-10 { flex: 0 0 auto; - width: 83.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } .xrpl-grid__col-lg-11 { flex: 0 0 auto; - width: 91.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } .xrpl-grid__col-lg-12 { flex: 0 0 auto; - width: 100%; + width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } .xrpl-grid__col-lg-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 { flex: 0 0 auto; - width: 8.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } .xrpl-grid__col-xl-2 { flex: 0 0 auto; - width: 16.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } .xrpl-grid__col-xl-3 { flex: 0 0 auto; - width: 25%; + width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } .xrpl-grid__col-xl-4 { flex: 0 0 auto; - width: 33.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } .xrpl-grid__col-xl-5 { flex: 0 0 auto; - width: 41.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } .xrpl-grid__col-xl-6 { flex: 0 0 auto; - width: 50%; + width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } .xrpl-grid__col-xl-7 { flex: 0 0 auto; - width: 58.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } .xrpl-grid__col-xl-8 { flex: 0 0 auto; - width: 66.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } .xrpl-grid__col-xl-9 { flex: 0 0 auto; - width: 75%; + width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } .xrpl-grid__col-xl-10 { flex: 0 0 auto; - width: 83.33333333%; + width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } .xrpl-grid__col-xl-11 { flex: 0 0 auto; - width: 91.66666667%; + width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } .xrpl-grid__col-xl-12 { flex: 0 0 auto; - width: 100%; + width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } .xrpl-grid__col-xl-auto { flex: 0 0 auto; From a6d84de417d1895637e75579dece963a896a2711 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 3 Dec 2025 13:34:05 -0800 Subject: [PATCH 2/6] working grid for fill and auto --- about/grid-showcase.page.tsx | 2 ++ shared/components/PageGrid/_page-grid.scss | 8 ++++---- shared/components/PageGrid/page-grid.tsx | 7 +++---- static/css/devportal2024-v1.css | 16 +++++++++++----- 4 files changed, 20 insertions(+), 13 deletions(-) diff --git a/about/grid-showcase.page.tsx b/about/grid-showcase.page.tsx index b95396d8f2..2804fbe977 100644 --- a/about/grid-showcase.page.tsx +++ b/about/grid-showcase.page.tsx @@ -88,6 +88,8 @@ export default function GridShowcase() { span={6} span={6} + test + test diff --git a/shared/components/PageGrid/_page-grid.scss b/shared/components/PageGrid/_page-grid.scss index 8d614aae68..83fadac6bf 100644 --- a/shared/components/PageGrid/_page-grid.scss +++ b/shared/components/PageGrid/_page-grid.scss @@ -36,10 +36,11 @@ $xrpl-grid-gutter: 8px; } @mixin xrpl-grid-generate-fill($suffix: null) { - $selector: if($suffix, ".xrpl-grid__col-#{$suffix}", ".xrpl-grid__col"); + $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-fill", ".xrpl-grid__col-fill"); #{$selector} { flex: 1 0 0; + width: auto; } } @@ -125,6 +126,7 @@ $xrpl-grid-gutter: 8px; &__col { box-sizing: border-box; + flex: auto; flex-shrink: 0; width: 100%; max-width: 100%; @@ -169,6 +171,4 @@ $xrpl-grid-gutter: 8px; @include xrpl-grid-generate-cols(12, 'xl'); @include xrpl-grid-generate-auto('xl'); @include xrpl-grid-generate-offsets(12, 'xl'); -} - - +} \ No newline at end of file diff --git a/shared/components/PageGrid/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx index 2af68eac06..90154aa97f 100644 --- a/shared/components/PageGrid/page-grid.tsx +++ b/shared/components/PageGrid/page-grid.tsx @@ -40,10 +40,9 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): string = } if (value === "fill") { - // Generates xrpl-grid__col or xrpl-grid__col-md (based on documentation) - // Note: The documentation states 'xrpl-grid__col' for fill, and 'xrpl-grid__col-{breakpoint}' for fill - // The implementation below aligns with the documentation's example logic: - return prefix ? `xrpl-grid__col${prefixStr}` : "xrpl-grid__col"; + // Generates xrpl-grid__col-fill or xrpl-grid__col-md-fill + // This allows us to distinguish between "no span" and "span='fill'" in CSS + return `xrpl-grid__col${prefixStr}-fill`; } // Generates xrpl-grid__col-6 or xrpl-grid__col-md-6 diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 7e0f23bddc..4b134cbb65 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -13715,13 +13715,15 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } .xrpl-grid__col { box-sizing: border-box; + flex: auto; flex-shrink: 0; width: 100%; max-width: 100%; } -.xrpl-grid__col { +.xrpl-grid__col-fill { flex: 1 0 0; + width: auto; } .xrpl-grid__col-1 { @@ -14022,8 +14024,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } @media (min-width: 576px) { - .xrpl-grid__col-sm { + .xrpl-grid__col-sm-fill { flex: 1 0 0; + width: auto; } .xrpl-grid__col-sm-1 { flex: 0 0 auto; @@ -14087,8 +14090,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } } @media (min-width: 576px) { - .xrpl-grid__col-md { + .xrpl-grid__col-md-fill { flex: 1 0 0; + width: auto; } .xrpl-grid__col-md-1 { flex: 0 0 auto; @@ -14152,8 +14156,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } } @media (min-width: 992px) { - .xrpl-grid__col-lg { + .xrpl-grid__col-lg-fill { flex: 1 0 0; + width: auto; } .xrpl-grid__col-lg-1 { flex: 0 0 auto; @@ -14245,8 +14250,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } } @media (min-width: 1280px) { - .xrpl-grid__col-xl { + .xrpl-grid__col-xl-fill { flex: 1 0 0; + width: auto; } .xrpl-grid__col-xl-1 { flex: 0 0 auto; From 5433894f2068f557ca0eb19764769900f7f41f0a Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 3 Dec 2025 14:51:59 -0800 Subject: [PATCH 3/6] renaming class name to bds --- shared/components/PageGrid/_page-grid.scss | 86 +++--- shared/components/PageGrid/page-grid.md | 20 +- shared/components/PageGrid/page-grid.tsx | 28 +- static/css/devportal2024-v1.css | 296 ++++++++++----------- 4 files changed, 215 insertions(+), 215 deletions(-) diff --git a/shared/components/PageGrid/_page-grid.scss b/shared/components/PageGrid/_page-grid.scss index 83fadac6bf..f0f441f6b6 100644 --- a/shared/components/PageGrid/_page-grid.scss +++ b/shared/components/PageGrid/_page-grid.scss @@ -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'); } \ No newline at end of file diff --git a/shared/components/PageGrid/page-grid.md b/shared/components/PageGrid/page-grid.md index 0f45fbf23d..c40ae0f903 100644 --- a/shared/components/PageGrid/page-grid.md +++ b/shared/components/PageGrid/page-grid.md @@ -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 diff --git a/shared/components/PageGrid/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx index 90154aa97f..f1cd268840 100644 --- a/shared/components/PageGrid/page-grid.tsx +++ b/shared/components/PageGrid/page-grid.tsx @@ -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( ({ className, ...rest }, ref) => ( -
+
) ); @@ -76,7 +76,7 @@ PageGridRoot.displayName = "PageGrid"; // --- PageGrid.Row Component --- const PageGridRow = React.forwardRef( ({ className, ...rest }, ref) => ( -
+
) ); @@ -109,7 +109,7 @@ const PageGridCol = React.forwardRef((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((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((props, r return (
); diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 4b134cbb65..ed2fbd6038 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -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%; } } From 3e07b8400dbf26ff1186dcdaa1c3cc20e19b428d Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 3 Dec 2025 16:02:08 -0800 Subject: [PATCH 4/6] removing extra css --- shared/components/PageGrid/_page-grid.scss | 18 +-- static/css/devportal2024-v1.css | 138 --------------------- 2 files changed, 1 insertion(+), 155 deletions(-) diff --git a/shared/components/PageGrid/_page-grid.scss b/shared/components/PageGrid/_page-grid.scss index f0f441f6b6..215879e91b 100644 --- a/shared/components/PageGrid/_page-grid.scss +++ b/shared/components/PageGrid/_page-grid.scss @@ -65,16 +65,7 @@ $bds-grid-gutter: 8px; @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 bds-make-col(8, 8); - } @else { - @include bds-make-col($i, 8); - } - } - - // MD breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%) + // SM / MD breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%) @include media-breakpoint-up(md) { @if $i > 8 { @include bds-make-col(8, 8); @@ -143,13 +134,6 @@ $bds-grid-gutter: 8px; @include bds-grid-generate-offsets(4); // Tablet (≥576px) — maintain 8-column grid across sm/md ranges -@include media-breakpoint-up(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 bds-grid-generate-fill('md'); @include bds-grid-generate-cols(8, 'md'); diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index ed2fbd6038..10341ac561 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -13736,12 +13736,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-1 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-1 { flex: 0 0 auto; @@ -13759,12 +13753,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-2 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-2 { flex: 0 0 auto; @@ -13782,12 +13770,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-3 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-3 { flex: 0 0 auto; @@ -13805,12 +13787,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-4 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-4 { flex: 0 0 auto; @@ -13828,12 +13804,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-5 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-5 { flex: 0 0 auto; @@ -13851,12 +13821,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-6 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-6 { flex: 0 0 auto; @@ -13874,12 +13838,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-7 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-7 { flex: 0 0 auto; @@ -13897,12 +13855,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-8 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-8 { flex: 0 0 auto; @@ -13920,12 +13872,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-9 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-9 { flex: 0 0 auto; @@ -13943,12 +13889,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-10 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-10 { flex: 0 0 auto; @@ -13966,12 +13906,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-11 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-11 { flex: 0 0 auto; @@ -13989,12 +13923,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } -@media (min-width: 576px) { - .bds-grid__col-12 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); - } -} @media (min-width: 992px) { .bds-grid__col-12 { flex: 0 0 auto; @@ -14023,72 +13951,6 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov margin-left: 75%; } -@media (min-width: 576px) { - .bds-grid__col-sm-fill { - flex: 1 0 0; - width: auto; - } - .bds-grid__col-sm-1 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); - } - .bds-grid__col-sm-2 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); - } - .bds-grid__col-sm-3 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); - } - .bds-grid__col-sm-4 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); - } - .bds-grid__col-sm-5 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); - } - .bds-grid__col-sm-6 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); - } - .bds-grid__col-sm-7 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); - } - .bds-grid__col-sm-8 { - flex: 0 0 auto; - width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); - } - .bds-grid__col-sm-auto { - flex: 0 0 auto; - width: auto; - } - .bds-grid__offset-sm-0 { - margin-left: 0; - } - .bds-grid__offset-sm-1 { - margin-left: 12.5%; - } - .bds-grid__offset-sm-2 { - margin-left: 25%; - } - .bds-grid__offset-sm-3 { - margin-left: 37.5%; - } - .bds-grid__offset-sm-4 { - margin-left: 50%; - } - .bds-grid__offset-sm-5 { - margin-left: 62.5%; - } - .bds-grid__offset-sm-6 { - margin-left: 75%; - } - .bds-grid__offset-sm-7 { - margin-left: 87.5%; - } -} @media (min-width: 576px) { .bds-grid__col-md-fill { flex: 1 0 0; From f022c48f6c41e095944827cf96498bc713863835 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 3 Dec 2025 16:06:59 -0800 Subject: [PATCH 5/6] changing showcase file --- about/grid-showcase.page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/about/grid-showcase.page.tsx b/about/grid-showcase.page.tsx index 2804fbe977..70208affea 100644 --- a/about/grid-showcase.page.tsx +++ b/about/grid-showcase.page.tsx @@ -81,6 +81,8 @@ export default function GridShowcase() { Column 1 Column 2 + [No span set] + [No span set] `} > @@ -88,8 +90,8 @@ export default function GridShowcase() { span={6} span={6} - test - test + [No span set] + [No span set] From 021899906d0b6888ff1903d3cfa83af18b75c0a2 Mon Sep 17 00:00:00 2001 From: Calvin Jhunjhuwala Date: Wed, 3 Dec 2025 16:14:09 -0800 Subject: [PATCH 6/6] removing unnecessary npm package --- about/grid-showcase.page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/about/grid-showcase.page.tsx b/about/grid-showcase.page.tsx index 70208affea..eec4096cc9 100644 --- a/about/grid-showcase.page.tsx +++ b/about/grid-showcase.page.tsx @@ -1,4 +1,3 @@ -import { RFC_2822 } from "moment"; import * as React from "react"; import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";