gutters

Orange-OpenSource · Oct 7, 2024 · d14c37b · d14c37b
1 parent 495e26c
commit d14c37b
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 14 deletions.
diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -184,15 +184,25 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null)
 // scss-docs-start grid-gutters
 $gutters: (
   2xs: $ouds-grid-2xs-column-gap, // 8
-  xs: $ouds-grid-xs-column-gap, // 8
-  sm: $ouds-grid-sm-column-gap, // 8
+  xs: $ouds-grid-xs-column-gap, // 16
+  sm: $ouds-grid-sm-column-gap, // 16
   md: $ouds-grid-md-column-gap, // 24
   lg: $ouds-grid-lg-column-gap, // 24
   xl: $ouds-grid-xl-column-gap, // 32
   2xl: $ouds-grid-2xl-column-gap, // 32
   3xl: $ouds-grid-3xl-column-gap // 40
 ) !default;
 // scss-docs-end grid-gutters
+
+// scss-docs-start gutters
+$gutters-utilities: (
+  none: 0,
+  extra-short: 16px,
+  short: 24px,
+  large: 40px,
+) !default;
+// scss-docs-end gutters
+
 // End mod
 
 $alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; // OUDS mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -551,7 +551,7 @@ $paragraph-margin-bottom:   1rem !default;
 // OUDS mod
 // scss-docs-start grid-breakpoints
 $grid-breakpoints: (
-  2xs: $ouds-grid-2xs-min-width, // 0
+  2xs: 0,
   xs: $ouds-grid-xs-min-width, // 390
   sm: $ouds-grid-sm-min-width, // 480
   md: $ouds-grid-md-min-width, // 736

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
@@ -126,7 +126,7 @@
       // Gutters
       //
       // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-      @each $key, $value in $gutters {
+      @each $key, $value in $gutters-utilities {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
           --#{$prefix}gutter-x: #{$value};

diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss
@@ -78,7 +78,7 @@ $ouds-elevation-y-500:  12px !default;
 //$ouds-grid-width-700: 1680px !default;
 //$ouds-grid-width-800: 1920px !default;
 
-$ouds-grid-min-width-100: 0 !default; // 2xs
+//$ouds-grid-min-width-100: 1px !default; // 2xs
 $ouds-grid-min-width-200: 390px !default; // xs
 $ouds-grid-min-width-300: 480px !default; // sm
 $ouds-grid-min-width-400: 736px !default; // md
@@ -109,7 +109,7 @@ $ouds-grid-margin-1700: 80px !default;
 $ouds-grid-margin-2500: 112px !default;
 
 //$ouds-grid-column-gap-10: 1px !default;
-$ouds-grid-column-gap-100: 8px !default;
+$ouds-grid-column-gap-100: 16px !default;
 //$ouds-grid-column-gap-200: 16px !default;
 //$ouds-grid-column-gap-300: 20px !default;
 $ouds-grid-column-gap-400: 24px !default;

diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss
@@ -81,7 +81,7 @@ $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default;
 
 // scss-docs-start ouds-semantic-grid
 //$ouds-grid-2xs-width:         $ouds-grid-width-100 !default;
-$ouds-grid-2xs-min-width:     $ouds-grid-min-width-100 !default;
+//$ouds-grid-2xs-min-width:     $ouds-grid-min-width-100 !default;
 //$ouds-grid-2xs-max-width:     $ouds-grid-max-width-100 !default;
 $ouds-grid-2xs-margin:        $ouds-grid-margin-100 !default;
 $ouds-grid-2xs-column-gap:    $ouds-grid-column-gap-100 !default;

diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html
@@ -157,13 +157,13 @@ <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
 
     <h2 class="mt-4">Gutters</h2>
     <p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
-    <div class="row row-cols-1 row-cols-md-3 gx-4 text-center">
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+    <div class="row row-cols-1 row-cols-md-3 gx-short text-center">
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
     </div>
     <p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
     <div class="row row-cols-1 row-cols-md-3 gy-4 text-center">