Add dedicated accordion component based on Collapse JS

4 files changed, 152 insertions, 27 deletions

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
new file mode 100644
index 0000000000..53715274a7
--- /dev/null
+++ b/scss/_accordion.scss
@@ -0,0 +1,124 @@
+//
+// Base styles
+//
+
+.accordion-button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: $accordion-button-padding-y $accordion-button-padding-x;
+  @include font-size($font-size-base);
+  color: $accordion-button-color;
+  background-color: $accordion-button-bg;
+  border: solid $accordion-border-color;
+  border-width: $accordion-border-width $accordion-border-width 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+
+  &:not(.collapsed) {
+    color: $accordion-button-active-color;
+    background-color: $accordion-button-active-bg;
+
+    &::after {
+      background-image: escape-svg($accordion-button-active-icon);
+      transform: $accordion-icon-transform;
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: $accordion-icon-width;
+    height: $accordion-icon-width;
+    margin-left: auto;
+    content: "";
+    background-image: escape-svg($accordion-button-icon);
+    background-repeat: no-repeat;
+    background-size: $accordion-icon-width;
+    transform-origin: center center;
+    @include transition($accordion-icon-transition);
+  }
+
+  &:focus {
+    position: relative;
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  @include border-radius($accordion-border-radius);
+
+  &:last-of-type {
+    .accordion-button {
+      border-bottom-width: $accordion-border-width;
+
+      // Only set a border-radius on the last item if the accordion is collapsed
+      &.collapsed {
+        @include border-bottom-radius($accordion-border-radius);
+      }
+    }
+
+    .accordion-body {
+      border-width: 0 $accordion-border-width $accordion-border-width;
+      @include border-bottom-radius($accordion-border-radius);
+    }
+  }
+
+  &:first-of-type {
+    .accordion-button {
+      @include border-top-radius($accordion-border-radius);
+    }
+  }
+}
+
+.accordion-body {
+  padding: $accordion-body-padding-y $accordion-body-padding-x;
+  border: solid $accordion-border-color;
+  border-width: $accordion-border-width $accordion-border-width 0;
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  .accordion-button {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+  }
+
+  .accordion-body {
+    border-width: 0;
+  }
+
+  .accordion-item {
+    border-right-width: 0;
+    border-left-width: 0;
+    @include border-radius(0);
+
+    &:first-of-type {
+      .accordion-button {
+        border-top-width: 0;
+        @include border-top-radius(0);
+      }
+    }
+
+    &:last-of-type {
+      .accordion-button {
+        border-bottom-width: 0;
+        @include border-bottom-radius(0);
+      }
+
+      .accordion-body {
+        border-width: 0;
+      }
+    }
+  }
+}
diff --git a/scss/_card.scss b/scss/_card.scss
index a526ec143c..9b0f4969a6 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -213,30 +213,3 @@
     }
   }
 }
-
-
-//
-// Accordion
-//
-
-.accordion {
-  overflow-anchor: none;
-
-  > .card {
-    overflow: hidden;
-
-    &:not(:last-of-type) {
-      border-bottom: 0;
-      @include border-bottom-radius(0);
-    }
-
-    &:not(:first-of-type) {
-      @include border-top-radius(0);
-    }
-
-    > .card-header {
-      @include border-radius(0);
-      margin-bottom: -$card-border-width;
-    }
-  }
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 781ec79a42..6c5a070f26 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1014,6 +1014,33 @@ $card-img-overlay-padding:          $spacer !default;
 
 $card-group-margin:                 $grid-gutter-width / 2 !default;
 
+// Accordion
+$accordion-padding-y:                     1rem !default;
+$accordion-padding-x:                     1.25rem !default;
+$accordion-color:                         $body-color !default;
+$accordion-bg:                            transparent !default;
+$accordion-border-width:                  $border-width !default;
+$accordion-border-color:                  rgba($black, .125) !default;
+$accordion-border-radius:                 $border-radius !default;
+
+$accordion-body-padding-y:                $accordion-padding-y !default;
+$accordion-body-padding-x:                $accordion-padding-x !default;
+
+$accordion-button-padding-y:              $accordion-padding-y !default;
+$accordion-button-padding-x:              $accordion-padding-x !default;
+$accordion-button-color:                  $accordion-color !default;
+$accordion-button-bg:                     $accordion-bg !default;
+$accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
+$accordion-button-active-color:           $primary !default;
+
+$accordion-icon-width:                    1.25rem !default;
+$accordion-icon-color:                    $accordion-color !default;
+$accordion-icon-active-color:             $accordion-button-active-color !default;
+$accordion-icon-transition:               transform .2s ease-in-out !default;
+$accordion-icon-transform:                rotate(180deg) !default;
+
+$accordion-button-icon:         url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='#{$accordion-icon-color}' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
 
 // Tooltips
 
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index c65caab6de..27514484c1 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -28,6 +28,7 @@
 @import "nav";
 @import "navbar";
 @import "card";
+@import "accordion";
 @import "breadcrumb";
 @import "pagination";
 @import "badge";