From: Andres Galante <agalante@gmail.com>
Date: Tue, 5 Sep 2017 12:18:16 +0000 (-0300)
Subject: improves accordion styles
X-Git-Tag: v4.1.0~99^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c0246e926f0e9e955f34b34286f97cc201582ba1;p=thirdparty%2Fbootstrap.git

improves accordion styles
---

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;
+  }
+}