From 0298c613242a0b3b206e8efc4091b470561a264c Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 19 Dec 2020 14:15:24 +0100
Subject: [PATCH] bootstrap accordion #736

---
 src/pages/_data/menu.yml            |  3 +++
 src/pages/accordion.html            | 26 ++++++++++++++++++++++++++
 src/scss/_bootstrap-components.scss |  1 +
 src/scss/_tabler-core.scss          |  1 +
 src/scss/_variables.scss            |  8 ++++++++
 src/scss/ui/_accordion.scss         | 19 +++++++++++++++++++
 6 files changed, 58 insertions(+)
 create mode 100644 src/pages/accordion.html
 create mode 100644 src/scss/ui/_accordion.scss

diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index b218366541..389968b564 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -11,6 +11,9 @@ base:
     empty:
       title: Empty page
       url: empty.html
+    accordion:
+      title: Accordion
+      url: accordion.html
     blank:
       title: Blank page
       url: blank.html
diff --git a/src/pages/accordion.html b/src/pages/accordion.html
new file mode 100644
index 0000000000..b9f8a50802
--- /dev/null
+++ b/src/pages/accordion.html
@@ -0,0 +1,26 @@
+---
+title: Accordion
+---
+
+<div class="card">
+	<div class="card-body">
+
+		<div class="accordion" id="accordion-example">
+			{% for i in (1..4) %}
+			<div class="accordion-item">
+				<h2 class="accordion-header" id="heading-{{ i }}">
+					<button class="accordion-button {% unless i == 1 %}collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ i }}" aria-expanded="{% if i == 1 %}true{% else %}false{% endif %}">
+						Accordion Item #{{ i }}
+					</button>
+				</h2>
+				<div id="collapse-{{ i }}" class="accordion-collapse collapse{% if i == 1 %} show{% endif %}" data-bs-parent="#accordion-example">
+					<div class="accordion-body pt-0">
+						<strong>This is the {% cycle 'first', 'second', 'third', 'fourth' %} item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+					</div>
+				</div>
+			</div>
+			{% endfor %}
+		</div>
+
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/scss/_bootstrap-components.scss b/src/scss/_bootstrap-components.scss
index 6ea177782c..ece3f766d8 100644
--- a/src/scss/_bootstrap-components.scss
+++ b/src/scss/_bootstrap-components.scss
@@ -13,6 +13,7 @@
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
 @import "~bootstrap/scss/breadcrumb";
 @import "~bootstrap/scss/pagination";
 @import "~bootstrap/scss/badge";
diff --git a/src/scss/_tabler-core.scss b/src/scss/_tabler-core.scss
index 175073839a..4595fa6024 100644
--- a/src/scss/_tabler-core.scss
+++ b/src/scss/_tabler-core.scss
@@ -8,6 +8,7 @@
 @import "layout/page";
 @import "layout/footer";
 
+@import "ui/accordion";
 @import "ui/alerts";
 @import "ui/avatars";
 @import "ui/badges";
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index b7813a0b65..a48ffda144 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -255,6 +255,14 @@ $container-variations: (
 
 $content-padding-y: 1.25rem !default;
 
+//accordion
+$accordion-border-color: $border-color-transparent !default;
+$accordion-icon-width: 1rem !default;
+
+$accordion-button-active-bg: transparent !default;
+$accordion-button-active-color: inherit !default;
+
+$accordion-button-focus-border-color: $accordion-border-color !default;
 
 //alerts
 $alert-padding-x: 1rem !default;
diff --git a/src/scss/ui/_accordion.scss b/src/scss/ui/_accordion.scss
new file mode 100644
index 0000000000..813d58412a
--- /dev/null
+++ b/src/scss/ui/_accordion.scss
@@ -0,0 +1,19 @@
+.accordion-button {
+  &:focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:after {
+    opacity: $text-muted-opacity;
+  }
+
+  &:not(.collapsed) {
+    font-weight: $font-weight-bold;
+    border-bottom-color: transparent;
+
+    &:after {
+      opacity: 1;
+    }
+  }
+}
\ No newline at end of file