diff --git a/scss/_utilities.scss b/scss/_utilities.scss index d017d117f121..601ce39e09f3 100644 --- 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 cde77a2c9bec..9436fcc9a6f5 100644 --- 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 09ae0653d9f1..8f40ed5afa82 100644 --- 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 5e4fe05b06d4..ca7d8e35a1b1 100644 --- 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" >}} -
-
-
-
-
+
z-3
+
z-2
+
z-1
+
z-0
+
z-n1
{{< /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 52f25357b7a0..adc7aad646bb 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -17,7 +17,7 @@
Browse docs
-
+
{{- if .Page.Params.added -}} Added in v{{ .Page.Params.added }} {{- end -}}