Merge branch 'main' into jo-docs-thanks-pagejo-docs-thanks-page

1 files changed, 74 insertions, 38 deletions

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index dacd8b289..3c927cf59 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,14 +1,19 @@
+// stylelint-disable indentation
+
 // Utilities
 
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map-merge(
   (
+    // scss-docs-start utils-vertical-align
     "align": (
       property: vertical-align,
       class: align,
       values: baseline top middle bottom text-bottom text-top
     ),
+    // scss-docs-end utils-vertical-align
+    // scss-docs-start utils-float
     "float": (
       responsive: true,
       property: float,
@@ -18,10 +23,14 @@ $utilities: map-merge(
         none: none,
       )
     ),
+    // scss-docs-end utils-float
+    // scss-docs-start utils-overflow
     "overflow": (
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    // scss-docs-end utils-overflow
+    // scss-docs-start utils-display
     "display": (
       responsive: true,
       print: true,
@@ -29,6 +38,8 @@ $utilities: map-merge(
       class: d,
       values: inline inline-block block grid table table-row table-cell flex inline-flex none
     ),
+    // scss-docs-end utils-display
+    // scss-docs-start utils-shadow
     "shadow": (
       property: box-shadow,
       class: shadow,
@@ -39,6 +50,8 @@ $utilities: map-merge(
         none: none,
       )
     ),
+    // scss-docs-end utils-shadow
+    // scss-docs-start utils-position
     "position": (
       property: position,
       values: static relative absolute fixed sticky
@@ -65,9 +78,13 @@ $utilities: map-merge(
       property: transform,
       class: translate-middle,
       values: (
-        null: (translateX(-50%) translateY(-50%))
+        null: translate(-50%, -50%),
+        x: translateX(-50%),
+        y: translateY(-50%),
       )
     ),
+    // scss-docs-end utils-position
+    // scss-docs-start utils-borders
     "border": (
       property: border,
       values: (
@@ -115,7 +132,9 @@ $utilities: map-merge(
       class: border,
       values: $border-widths
     ),
+    // scss-docs-end utils-borders
     // Sizing utilities
+    // scss-docs-start utils-sizing
     "width": (
       property: width,
       class: w,
@@ -168,7 +187,9 @@ $utilities: map-merge(
       class: min-vh,
       values: (100: 100vh)
     ),
+    // scss-docs-end utils-sizing
     // Flex utilities
+    // scss-docs-start utils-flex
     "flex": (
       responsive: true,
       property: flex,
@@ -271,7 +292,9 @@ $utilities: map-merge(
         last: 6,
       ),
     ),
+    // scss-docs-end utils-flex
     // Margin utilities
+    // scss-docs-start utils-spacing
     "margin": (
       responsive: true,
       property: margin,
@@ -400,7 +423,14 @@ $utilities: map-merge(
       class: ps,
       values: $spacers
     ),
+    // scss-docs-end utils-spacing
     // Text
+    // scss-docs-start utils-text
+    "font-family": (
+      property: font-family,
+      class: font,
+      values: (monospace: var(--#{$variable-prefix}font-monospace))
+    ),
     "font-size": (
       rfs: true,
       property: font-size,
@@ -423,10 +453,15 @@ $utilities: map-merge(
         bolder: $font-weight-bolder
       )
     ),
-    "text-transform": (
-      property: text-transform,
-      class: text,
-      values: lowercase uppercase capitalize
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      )
     ),
     "text-align": (
       responsive: true,
@@ -438,6 +473,31 @@ $utilities: map-merge(
         center: center,
       )
     ),
+    "text-decoration": (
+      property: text-decoration,
+      values: none underline line-through
+    ),
+    "text-transform": (
+      property: text-transform,
+      class: text,
+      values: lowercase uppercase capitalize
+    ),
+    "white-space": (
+      property: white-space,
+      class: text,
+      values: (
+        wrap: normal,
+        nowrap: nowrap,
+      )
+    ),
+    "word-wrap": (
+      property: word-wrap word-break,
+      class: text,
+      values: (break: break-word),
+      rtl: false
+    ),
+    // scss-docs-end utils-text
+    // scss-docs-start utils-color
     "color": (
       property: color,
       class: text,
@@ -453,16 +513,8 @@ $utilities: map-merge(
         )
       )
     ),
-    "line-height": (
-      property: line-height,
-      class: lh,
-      values: (
-        1: 1,
-        sm: $line-height-sm,
-        base: $line-height-base,
-        lg: $line-height-lg,
-      )
-    ),
+    // scss-docs-end utils-color
+    // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
       class: bg,
@@ -475,34 +527,13 @@ $utilities: map-merge(
         )
       )
     ),
+    // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,
       class: bg,
       values: (gradient: var(--#{$variable-prefix}gradient))
     ),
-    "white-space": (
-      property: white-space,
-      class: text,
-      values: (
-        wrap: normal,
-        nowrap: nowrap,
-      )
-    ),
-    "text-decoration": (
-      property: text-decoration,
-      values: none underline line-through
-    ),
-    "word-wrap": (
-      property: word-wrap word-break,
-      class: text,
-      values: (break: break-word),
-      rtl: false
-    ),
-    "font-family": (
-      property: font-family,
-      class: font,
-      values: (monospace: var(--#{$variable-prefix}font-monospace))
-    ),
+    // scss-docs-start utils-interaction
     "user-select": (
       property: user-select,
       values: all auto none
@@ -512,6 +543,8 @@ $utilities: map-merge(
       class: pe,
       values: none auto,
     ),
+    // scss-docs-end utils-interaction
+    // scss-docs-start utils-border-radius
     "rounded": (
       property: border-radius,
       class: rounded,
@@ -545,6 +578,8 @@ $utilities: map-merge(
       class: rounded-start,
       values: (null: $border-radius)
     ),
+    // scss-docs-end utils-border-radius
+    // scss-docs-start utils-visibility
     "visibility": (
       property: visibility,
       class: null,
@@ -553,6 +588,7 @@ $utilities: map-merge(
         invisible: hidden,
       )
     )
+    // scss-docs-end utils-visibility
   ),
   $utilities
 );