diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-03-29 01:05:37 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-29 01:05:37 +0300 |
commit | e342142b61aacc187c776052bde93e414eb25db7 (patch) | |
tree | 33cce334f95cd8b69525e7a22d53a1b3506540b7 /site | |
parent | 7f35bc5b65dccf6c953321e47342c4ed0b7c4b2b (diff) |
Train PR: CSS variables for accordion, cards, navs, and modals (#36071)
* Convert accordion to CSS vars
* Update accordion.md
* Convert navs to CSS variables
* Split up CSS vars
* bundlewatch
* fix vars
* Convert cards to CSS vars
* Convert modals to CSS variables
* Bundlewatch
Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/5.1/components/accordion.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.1/components/card.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.1/components/modal.md | 12 | ||||
-rw-r--r-- | site/content/docs/5.1/components/navs-tabs.md | 20 |
4 files changed, 48 insertions, 4 deletions
diff --git a/site/content/docs/5.1/components/accordion.md b/site/content/docs/5.1/components/accordion.md index 535ae46b5a..ee906f686a 100644 --- a/site/content/docs/5.1/components/accordion.md +++ b/site/content/docs/5.1/components/accordion.md @@ -150,8 +150,16 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}} + +### Sass variables + {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md index 3effb21d00..22b413325c 100644 --- a/site/content/docs/5.1/components/card.md +++ b/site/content/docs/5.1/components/card.md @@ -722,8 +722,16 @@ Just like with card groups, card footers will automatically line up. In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="card-css-vars" file="scss/_card.scss" >}} + +### Sass variables + {{< scss-docs name="card-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index 6facc239c5..d3e64a96ad 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -766,10 +766,20 @@ Another override is the option to pop up a modal that covers the user viewport, </div> </div> -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="modal-css-vars" file="scss/_modal.scss" >}} + +{{< scss-docs name="modal-backdrop-css-vars" file="scss/_modal.scss" >}} + +### Sass variables + {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} ### Loop diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md index 7e2a20d7ac..81591013d3 100644 --- a/site/content/docs/5.1/components/navs-tabs.md +++ b/site/content/docs/5.1/components/navs-tabs.md @@ -304,10 +304,28 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </ul> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +On the `.nav` base class: + +{{< scss-docs name="nav-css-vars" file="scss/_nav.scss" >}} + +On the `.nav-tabs` modifier class: + +{{< scss-docs name="nav-tabs-css-vars" file="scss/_nav.scss" >}} + +On the `.nav-pills` modifier class: + +{{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}} + +### Sass variables + {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}} ## JavaScript behavior |