diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/list-group.md (renamed from site/content/docs/5.2/components/list-group.md) | 32 |
1 files changed, 20 insertions, 12 deletions
diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 7804c74..6c22809 100644 --- a/site/content/docs/5.2/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -154,7 +154,11 @@ Add `.list-group-horizontal` to change the layout of list group items from verti {{< /list-group.inline >}} {{< /example >}} -## Contextual classes +## Variants + +{{< callout info >}} +**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops). +{{< /callout >}} Use contextual classes to style list items with a stateful background and color. @@ -169,7 +173,9 @@ Use contextual classes to style list items with a stateful background and color. </ul> {{< /example >}} -Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item. +### For links and buttons + +Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item. {{< example >}} <div class="list-group"> @@ -183,7 +189,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o {{< /example >}} {{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ## With badges @@ -224,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> - <small class="text-muted">3 days ago</small> + <small class="text-body-secondary">3 days ago</small> </div> <p class="mb-1">Some placeholder content in a paragraph.</p> - <small class="text-muted">And some muted small print.</small> + <small class="text-body-secondary">And some muted small print.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> - <small class="text-muted">3 days ago</small> + <small class="text-body-secondary">3 days ago</small> </div> <p class="mb-1">Some placeholder content in a paragraph.</p> - <small class="text-muted">And some muted small print.</small> + <small class="text-body-secondary">And some muted small print.</small> </a> </div> {{< /example >}} @@ -311,15 +317,17 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca {{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins + +{{< deprecated-in "5.3.0" >}} -Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s. +Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s. {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}} -### Loop +### Sass loops -Loop that generates the modifier classes with the `list-group-item-variant()` mixin. +Loop that generates the modifier classes with an overriding of CSS variables. {{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}} @@ -443,7 +451,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane ### Methods {{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} +{{< partial "callouts/danger-async-methods.md" >}} {{< /callout >}} Activates your content as a tab element. |