diff options
author | Andres Galante <agalante@gmail.com> | 2017-09-05 15:18:16 +0300 |
---|---|---|
committer | Andres Galante <agalante@gmail.com> | 2018-01-02 15:46:07 +0300 |
commit | c0246e926f0e9e955f34b34286f97cc201582ba1 (patch) | |
tree | b061742e405efd9fe1fb925be68a51296b545f81 | |
parent | 987ae5b8c8275c6753fd5ac86b37cd4c661b255c (diff) |
improves accordion styles
-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; + } +} |