rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Docs: Small enhancements (#37803)

Browse Source 
* Consistency with the doc

* Bring a class to avoid weird behavior

* Consistency + Add some explaining text

* fix(color)
This commit is contained in:
Louis-Maxime Piton 2023-01-06 04:59:59 +01:00 committed by GitHub
parent 702a3b6a61
commit fd1ec97bd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_utilities.scss
View File

@ -796,11 +796,13 @@ $utilities: map-merge(
) )
), ),
// scss-docs-end utils-visibility // scss-docs-end utils-visibility
// scss-docs-start utils-zindex
"z-index": ( "z-index": (
property: z-index, property: z-index,
class: z, class: z,
values: $zindex-levels, values: $zindex-levels,
) )
// scss-docs-end utils-zindex
), ),
$utilities $utilities
); );

11
site/assets/scss/_component-examples.scss
View File

@ -314,8 +314,15 @@
min-height: 15rem; min-height: 15rem;
> div { > div {
background-color: tint-color($bd-violet, 75%); color: var(--bs-body-bg);
border: 1px solid tint-color($bd-violet, 50%); background-color: var(--bd-violet);
border: 1px solid var(--bd-purple);
> span {
position: absolute;
right: 5px;
bottom: 0;
}
} }
> :nth-child(2) { > :nth-child(2) {

2
site/content/docs/5.3/components/modal.md
View File

@ -488,7 +488,7 @@ exampleModal.addEventListener('show.bs.modal', event => {
const button = event.relatedTarget const button = event.relatedTarget
// Extract info from data-bs-* attributes // Extract info from data-bs-* attributes
const recipient = button.getAttribute('data-bs-whatever') 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. // and then do the updating in a callback.
// //
// Update the modal's content. // Update the modal's content.

16
site/content/docs/5.3/utilities/z-index.md
View File

@ -16,11 +16,11 @@ We call these "low-level" `z-index` utilities because of their default values of
{{< /callout >}} {{< /callout >}}
{{< example class="bd-example-zindex-levels position-relative" >}} {{< example class="bd-example-zindex-levels position-relative" >}}
<div class="z-3 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"></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"></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"></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"></div> <div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>
{{< /example >}} {{< /example >}}
## Overlays ## 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. Customize this Sass map to change the available values and generated utilities.
{{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}} {{< 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" >}}

2
site/layouts/_default/docs.html
View File

@ -17,7 +17,7 @@
<main class="bd-main order-1"> <main class="bd-main order-1">
<div class="bd-intro pt-2 ps-lg-2"> <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="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 -}} {{- 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> <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 -}} {{- end -}}