diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-04-19 21:21:43 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-19 21:21:43 +0300 |
commit | e089aef00fef68c6a815327d8b988e14cfcf4d9b (patch) | |
tree | 12b55f0088354b7be006fe9f3934e291fab08d07 /site/content/docs/5.1/components | |
parent | 9ec51f449904bae076b2334e748559706182f046 (diff) |
Refactor some docs examples CSS (#36194)
* Fix some more borders and margins
* Flex utilities docs: remove .bd-highlight class from snippets
* Explicit close target
* Reorder to keep base class up top
* Fix custom position example
* Tooltips: add code snippet, use scss-docs ref for custom tooltip
* Tweak text for pagination examples
* Modals: move custom styles to utilities
* Grid docs: Combine selectors and share coloring
* Refactor tons of little things
Diffstat (limited to 'site/content/docs/5.1/components')
-rw-r--r-- | site/content/docs/5.1/components/modal.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/offcanvas.md | 2 | ||||
-rw-r--r-- | site/content/docs/5.1/components/pagination.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/tooltips.md | 15 |
4 files changed, 12 insertions, 13 deletions
diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index a33f7e615d..d9bd120d46 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -38,8 +38,8 @@ Keep reading for demos and usage guidelines. Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. -<div class="bd-example bd-example-modal"> - <div class="modal" tabindex="-1"> +<div class="bd-example bg-light"> + <div class="modal position-static d-block" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 3abdc3acf0..56ae26e6ba 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -151,7 +151,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5> - <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button> </div> <div class="offcanvas-body"> <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p> diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md index 8e05a18614..7251405761 100644 --- a/site/content/docs/5.1/components/pagination.md +++ b/site/content/docs/5.1/components/pagination.md @@ -122,7 +122,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for ## Alignment -Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). +Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). For example, with `.justify-content-center`: {{< example >}} <nav aria-label="Page navigation example"> @@ -140,6 +140,8 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr </nav> {{< /example >}} +Or with `.justify-content-end`: + {{< example >}} <nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md index 1831dff722..9460da2a0b 100644 --- a/site/content/docs/5.1/components/tooltips.md +++ b/site/content/docs/5.1/components/tooltips.md @@ -47,10 +47,10 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { Hover over the links below to see tooltips: -<div class="bd-example tooltip-demo"> - <p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project. - </p> -</div> +{{< example class="tooltip-demo" >}} +<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project. +</p> +{{< /example >}} ### Custom tooltips @@ -58,11 +58,8 @@ Hover over the links below to see tooltips: You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable. -```scss -.custom-tooltip { - --bs-tooltip-bg: var(--bs-primary); -} -``` +{{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}} + {{< example class="tooltip-demo" >}} <button type="button" class="btn btn-secondary" |