Feat: Add Acordion Component #1

matifandy8 · Nov 12, 2023 · b8ff165 · b8ff165
1 parent c71dc8c
commit b8ff165
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 5 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -801,3 +801,29 @@ input.nb-checkbox {
   font-size: 1.2rem;
   font-weight: bold;
   box-shadow: 2px 2px 0px black; }
+
+input {
+  position: absolute;
+  opacity: 0;
+  z-index: -1; }
+
+.accordion {
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 2px 2px 0px black;
+  border: 1px solid black; }
+  .accordion-label {
+    display: flex;
+    padding: 1em;
+    font-weight: bold;
+    cursor: pointer;
+    color: #fff; }
+  .accordion-content {
+    max-height: 0;
+    padding: 0 1em;
+    background: white;
+    transition: all 0.35s; }
+
+.accordion-tab:checked ~ .accordion-content {
+  max-height: 100vh;
+  padding: 1em; }
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -436,11 +436,37 @@ <h3>Alert</h3>
                   </code>
                 </pre>
             </figure>
+        </section>
+        <section class="sections">
+            <h3>Accordion</h3>
+            <p class="component-description">
+                Section demonstrates an accordion component provided by NeoBrutalismCSS.
+            </p>
 
-
-
-
+            <div class="accordion">
+                <input type="checkbox" id="tab1" class="accordion-tab">
+                <label class="accordion-label bg-blue" for="tab1">Item 1</label>
+                <div class="accordion-content">
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
+                </div>
+            </div>
+
+            <figure class="highlight">
+                <pre>
+                  <button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
+                  <code class="language-html" data-lang="html">
+<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"accordion"</span><span class="tag">&gt;</span>
+       <span class="tag">&lt;input</span> <span class="class">class=</span><span class="name">"accordion-tab"</span> type=<span class="name">"checkbox"</span> id=<span class="name">"tab1"</span> <span class="tag">/&gt;</span>
+       <span class="tag">label </span> <span class="class">class=</span><span class="name">"accordion-label bg-blue"</span> <span class="class">for=</span><span class="name">"tab1"</span><span class="tag">&gt;</span>Item 1<span class="tag">&lt;/label&gt;</span>
+       <span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"accordion-content"</span><span class="tag">&gt;</span>
+       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
+       <span class="tag">&lt;/div&gt;</span>
+<span class="tag">&lt;/div&gt;</span>
+                  </code>
+                </pre>
+            </figure>
         </section>
+
         <section class="sections backgrounds">
             <h3>Colors</h3>
             <p class="component-description">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "NeoBrutalismCSS design framework that embraces the aesthetics of neo-brutalism in web",
   "main": "dist/index.min.css",
   "repository": {

diff --git a/src/scss/components/_accordion.scss b/src/scss/components/_accordion.scss
@@ -0,0 +1,33 @@
+input {
+    position: absolute;
+    opacity: 0;
+    z-index: -1;
+}
+
+.accordion {
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black;
+    &-label {
+        display: flex;
+        padding: 1em;
+        font-weight: bold;
+        cursor: pointer;
+        color: #fff;
+    }
+
+    &-content {
+        max-height: 0;
+        padding: 0 1em;
+        background: white;
+        transition: all 0.35s;
+    }
+}
+
+.accordion-tab:checked {
+    ~.accordion-content {
+        max-height: 100vh;
+        padding: 1em;
+    }
+}
diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -14,3 +14,4 @@
 @import "components/badge";
 @import "components/modal";
 @import "components/alert";
+@import "components/accordion";