diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 0d32549841..c3d466d5fb 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -45,36 +45,6 @@ Add labels to any list group item to show unread counts, activity, etc. {% endexample %} -## Linked items - -Linkify list group items by using anchor tags instead of list items (that also means a parent `
` instead of an `
+{% endexample %} + ## Contextual classes Use contextual classes to style list items, default or linked. Also includes `.active` state. {% example html %}
- Dapibus ac facilisis in - Cras sit amet nibh libero - Porta ac consectetur ac - Vestibulum at eros + Dapibus ac facilisis in + Cras sit amet nibh libero + Porta ac consectetur ac + Vestibulum at eros
{% endexample %} @@ -110,16 +110,16 @@ Add nearly any HTML within, even for linked list groups like the one below. {% example html %}
- -

List group item heading

+
+
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

- -

List group item heading

+
+
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

- -

List group item heading

+
+
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 3d74da4cbc..ba91d95f11 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -22,50 +22,15 @@ background-color: $list-group-bg; border: $list-group-border-width solid $list-group-border-color; - // Round the first and last items &:first-child { @include border-top-radius($list-group-border-radius); } + &:last-child { margin-bottom: 0; @include border-bottom-radius($list-group-border-radius); } -} -.list-group-flush { - .list-group-item { - border-radius: 0; - } -} - - -// Interactive list items -// -// Use anchor or button elements instead of `li`s or `div`s to create interactive -// list items. Includes an extra `.active` modifier class for selected items. - -// scss-lint:disable QualifyingElement -a.list-group-item, -button.list-group-item { - width: 100%; - color: $list-group-link-color; - text-align: inherit; - - .list-group-item-heading { - color: $list-group-link-heading-color; - } - - // Hover state - @include hover-focus { - color: $list-group-link-hover-color; - text-decoration: none; - background-color: $list-group-hover-bg; - } -} -// scss-lint:enable QualifyingElement - -.list-group-item { - // Disabled state &.disabled { @include plain-hover-focus { color: $list-group-disabled-color; @@ -82,11 +47,11 @@ button.list-group-item { } } - // Active class on item itself, not parent &.active { @include plain-hover-focus { z-index: 2; // Place active items above their siblings for proper border styling color: $list-group-active-color; + text-decoration: none; // Repeat here because it inherits global a:hover otherwise background-color: $list-group-active-bg; border-color: $list-group-active-border; @@ -103,6 +68,35 @@ button.list-group-item { } } +.list-group-flush { + .list-group-item { + border-radius: 0; + } +} + + +// Interactive list items +// +// Use anchor or button elements instead of `li`s or `div`s to create interactive +// list items. Includes an extra `.active` modifier class for selected items. + +.list-group-item-action { + width: 100%; // For `