diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-03-11 08:49:47 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2021-03-11 09:04:32 +0300 |
| commit | 5c6e72c6fea2cef2c7e169ed1d68f9146081d246 (patch) | |
| tree | d8daeade3b748d25b15423604b04e81f6cd94799 | |
| parent | defce830276d04238350c2b738b1d02197c6e37d (diff) | |
Change from element selector to the opt-in class
| -rw-r--r-- | scss/_list-group.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/list-group.md | 8 |
2 files changed, 5 insertions, 7 deletions
diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ecacb05f28..2193168c52 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -12,8 +12,7 @@ @include border-radius($list-group-border-radius); } -// stylelint-disable selector-no-qualifying-type -ol.list-group { +.list-group-numbered { list-style-type: none; counter-reset: section; @@ -23,7 +22,6 @@ ol.list-group { counter-increment: section; } } -// stylelint-enable selector-no-qualifying-type // Interactive list items diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 4caaeb8de7..6cad46a4de 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -94,14 +94,14 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis </ul> {{< /example >}} -## Ordered list +## Numbered -Replace the unordered list element with an ordered list to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization. +Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization. Numbers are generated by `counter-reset` on the `<ol>`, and then styled and placed with a `::before` psuedo-element on the `<li>` with `counter-increment` and `content`. {{< example >}} -<ol class="list-group"> +<ol class="list-group list-group-numbered"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Cras justo odio</li> @@ -111,7 +111,7 @@ Numbers are generated by `counter-reset` on the `<ol>`, and then styled and plac These work great with custom content as well. {{< example >}} -<ol class="list-group"> +<ol class="list-group list-group-numbered"> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> |