mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Docs: Small enhancements (#37803)
* Consistency with the doc * Bring a class to avoid weird behavior * Consistency + Add some explaining text * fix(color)
This commit is contained in:
parent
702a3b6a61
commit
fd1ec97bd3
@ -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
|
||||
);
|
||||
|
@ -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) {
|
||||
|
@ -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.
|
||||
|
@ -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" >}}
|
||||
|
@ -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 -}}
|
||||
|
Loading…
Reference in New Issue
Block a user