Docs: Small enhancements (#37803)

* Consistency with the doc

* Bring a class to avoid weird behavior

* Consistency + Add some explaining text

* fix(color)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index d017d117f1210b87db770730f6ee71f04bf7833a..601ce39e09f35ef4340abcc3ef8a0e52430fd77f 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -796,11 +796,13 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-visibility
+    // scss-docs-start utils-zindex
     "z-index": (
       property: z-index,
       class: z,
       values: $zindex-levels,
     )
+    // scss-docs-end utils-zindex
   ),
   $utilities
 );

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f47ca1ada00b3a49960e20408f794c267c49129e..eedacb449eb63eeb3cb1230b7987d0213b558a4c 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -314,8 +314,15 @@
   min-height: 15rem;
 
   > div {
-    background-color: tint-color($bd-violet, 75%);
-    border: 1px solid tint-color($bd-violet, 50%);
+    color: var(--bs-body-bg);
+    background-color: var(--bd-violet);
+    border: 1px solid var(--bd-purple);
+
+    > span {
+      position: absolute;
+      right: 5px;
+      bottom: 0;
+    }
   }
 
   > :nth-child(2) {

diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index 09ae0653d9f16e67a8dfbdbae23de234e24c78f2..8f40ed5afa82af5a1cc73379d38e91f150ab6fea 100644 (file)
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -488,7 +488,7 @@ exampleModal.addEventListener('show.bs.modal', event => {
   const button = event.relatedTarget
   // Extract info from data-bs-* attributes
   const recipient = button.getAttribute('data-bs-whatever')
-  // If necessary, you could initiate an AJAX request here
+  // If necessary, you could initiate an Ajax request here
   // and then do the updating in a callback.
   //
   // Update the modal's content.

diff --git a/site/content/docs/5.3/utilities/z-index.md b/site/content/docs/5.3/utilities/z-index.md
index 5e4fe05b06d441fc2e2a2b3289a52d169c070b45..ca7d8e35a1b1790988c2566ddda755840d0d6598 100644 (file)
--- a/site/content/docs/5.3/utilities/z-index.md
+++ b/site/content/docs/5.3/utilities/z-index.md
@@ -16,11 +16,11 @@ We call these "low-level" `z-index` utilities because of their default values of
 {{< /callout >}}
 
 {{< example class="bd-example-zindex-levels position-relative" >}}
-<div class="z-3 position-absolute p-5 rounded-3"></div>
-<div class="z-2 position-absolute p-5 rounded-3"></div>
-<div class="z-1 position-absolute p-5 rounded-3"></div>
-<div class="z-0 position-absolute p-5 rounded-3"></div>
-<div class="z-n1 position-absolute p-5 rounded-3"></div>
+<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
+<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
+<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
+<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
+<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>
 {{< /example >}}
 
 ## Overlays
@@ -42,3 +42,9 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale
 Customize this Sass map to change the available values and generated utilities.
 
 {{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-zindex" file="scss/_utilities.scss" >}}

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 52f25357b7a0b65b5c26c0d4f056492eda13bfc4..adc7aad646bbc74c102b6d5ad00ddc2a3162c584 100644 (file)
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -17,7 +17,7 @@
     <main class="bd-main order-1">
       <div class="bd-intro pt-2 ps-lg-2">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap">
             {{- if .Page.Params.added -}}
               <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added }}</small>
             {{- end -}}