feat: Add Dropdown Menu (select) #2

matifandy8 · Dec 12, 2023 · 57d3b80 · 57d3b80
1 parent 4837427
commit 57d3b80
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 6 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -827,3 +827,26 @@ input.nb-checkbox {
 .accordion-tab:checked ~ .accordion-content {
   max-height: 100vh;
   padding: 1em; }
+
+.dropdown {
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 2px 2px 0px black;
+  border: 1px solid black;
+  padding: 10px;
+  cursor: pointer; }
+  .dropdown::after {
+    content: '\25BC';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%); }
+  .dropdown option {
+    background-color: #fff;
+    color: #333;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black;
+    padding: 10px; }
+  .dropdown:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -454,18 +454,40 @@ <h3>Accordion</h3>
             <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>
+<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>
+<span class="tag">&lt;/div&gt;</span></code>
+                </pre>
+            </figure>
+        </section>
+
+        <section class="sections">
+            <h3>Dropdown</h3>
+            <p class="component-description">
+                Section demonstrates an dropdown component provided by NeoBrutalismCSS.
+            </p>
+            <select class="dropdown">
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+            </select>
+
+            <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;select</span> <span class="class">class=</span><span class="name">"dropdown"</span><span class="tag">&gt;</span>
+   <span class="tag">&lt;option</span> <span class="class">value=</span><span class="name">"option1"</span><span class="tag">&gt;</span>Option 1<span class="tag">&lt;/option&gt;</span>
+   <span class="tag">&lt;option</span> <span class="class">value=</span><span class="name">"option2"</span><span class="tag">&gt;</span>Option 2<span class="tag">&lt;/option&gt;</span>
+   <span class="tag">&lt;option</span> <span class="class">value=</span><span class="name">"option3"</span><span class="tag">&gt;</span>Option 3<span class="tag">&lt;/option&gt;</span>
+<span class="tag">&lt;/select&gt;</span></code>
                 </pre>
             </figure>
         </section>
+
 
         <section class="sections backgrounds">
             <h3>Colors</h3>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "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/_dropdown.scss b/src/scss/components/_dropdown.scss
@@ -0,0 +1,29 @@
+.dropdown {
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 2px 2px 0px black;
+  border: 1px solid black;
+  padding: 10px;
+  cursor: pointer;
+
+  &::after {
+    content: '\25BC'; 
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+  }
+
+  option {
+    background-color: #fff;
+    color: #333;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black;
+    padding: 10px;
+  }
+
+  &:focus {
+    outline: none; 
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
+  }
+}
diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -15,3 +15,4 @@
 @import "components/modal";
 @import "components/alert";
 @import "components/accordion";
+@import "components/dropdown";