diff options
| -rw-r--r-- | docs/4.0/components/collapse.md | 2 | ||||
| -rw-r--r-- | scss/_card.scss | 29 |
2 files changed, 30 insertions, 1 deletions
diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md index 0e914a264a..8c26630f95 100644 --- a/docs/4.0/components/collapse.md +++ b/docs/4.0/components/collapse.md @@ -66,7 +66,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/) component, you can extend the default collapse behavior to create an accordion. {% example html %} -<div id="accordion"> +<div class="accordion" id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> diff --git a/scss/_card.scss b/scss/_card.scss index 4c4845c0bb..c4b9a725da 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -268,3 +268,32 @@ } } } + + +// +// Accordion +// + +.accordion { + .card:not(:first-of-type):not(:last-of-type) { + border-bottom: 0; + border-radius: 0; + } + + .card:not(:first-of-type) { + .card-header:first-child { + border-radius: 0; + } + } + + .card:first-of-type { + border-bottom: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + .card:last-of-type { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} |