Add dedicated accordion component based on Collapse JS

1 files changed, 124 insertions, 0 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;
+      }
+    }
+  }
+}