Docs: Small enhancements (#37803)

* Consistency with the doc * Bring a class to avoid weird behavior * Consistency + Add some explaining text * fix(color)
twbs · Jan 6, 2023 · fd1ec97 · fd1ec97
1 parent 702a3b6
commit fd1ec97
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -17,7 +17,7 @@ <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
     <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 -}}