improves accordion styles

diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md
index 0e914a264a8dddd67daa0edfc4b7b64f1d9d3681..8c26630f95d174e5fbcea37d3ed6203929a9d14c 100644 (file)
--- 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 4c4845c0bb1fd3572c07156e90d50c7798f6b805..c4b9a725da133d3e580764678912b2221cf6f91a 100644 (file)
--- 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;
+  }
+}