Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Small enhancements #37803

Merged
merged 4 commits into from Jan 6, 2023
Merged

Docs: Small enhancements #37803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c9c2ea8
Consistency with the doc
louismaximepiton Jan 4, 2023
08477f0
Bring a class to avoid weird behavior
louismaximepiton Jan 4, 2023
9bcbac3
Consistency + Add some explaining text
louismaximepiton Jan 4, 2023
572ce74
fix(color)
louismaximepiton Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions scss/_utilities.scss
View file
Open in desktop
Expand Up @@ -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
);
11 changes: 9 additions & 2 deletions site/assets/scss/_component-examples.scss
View file
Open in desktop
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/modal.md
View file
Open in desktop
Expand Up @@ -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.
Expand Down
16 changes: 11 additions & 5 deletions site/content/docs/5.3/utilities/z-index.md
View file
Open in desktop
Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea to display the classes here for a better understanding. However there's an issue with the rendering on dark mode where there's not enough contrast.

Screenshot 2023-01-04 at 15 59 16

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think I should force black color ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency I'd use the same set of colors as in https://getbootstrap.com/docs/5.3/layout/grid/ and https://getbootstrap.com/docs/5.3/layout/gutters/ in light/dark mode.
But let's wait for @mdo thoughts before doing any modifications.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I originally had these as translucent elements, but the feedback was that it make things a little less clear. I just use the inherited body color in those grid and gutter examples. Open to doing that again though to make this work better. Could also use some .text-dark so that it never changes color in dark mode.

<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
Expand All @@ -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" >}}
2 changes: 1 addition & 1 deletion site/layouts/_default/docs.html
View file
Open in desktop
Expand Up @@ -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 -}}
Expand Down