feat: add modal component

matifandy8 · Oct 23, 2023 · 10aef91 · 10aef91
1 parent 076ee58
commit 10aef91
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 10 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -602,13 +602,14 @@ html {
 .card {
   width: 300px;
   margin: 20px;
-  border: 2px solid #000;
   border-radius: 8px;
   overflow: hidden;
-  transition: box-shadow 0.2s ease, transform 0.3s ease; }
+  border: 3px solid #000;
+  box-shadow: -3px 3px 0px #000000;
+  transition: box-shadow 0.2s ease, transform 0.2s ease; }
   .card:hover {
-    box-shadow: 3px 3px 0px #000000;
-    transform: translate(-6px, -6px); }
+    box-shadow: 0px 0px 0px #000000;
+    transform: translate(-6px, 6px); }
 
 .card a {
   margin: 0;
@@ -701,3 +702,59 @@ input.nb-checkbox {
       color: #031926;
       padding: 10px;
       margin: 0; }
+
+input[type="checkbox"] {
+  display: none; }
+
+input[type="checkbox"]:checked ~ .modal,
+input[type="checkbox"]:checked ~ .modal-background {
+  display: block; }
+
+.modal-background {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 9998; }
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: none;
+  width: 300px;
+  height: 300px;
+  background-color: #fff;
+  box-sizing: border-box;
+  z-index: 9999; }
+  .modal > p {
+    padding: 15px;
+    margin: 0; }
+  .modal-header {
+    background-color: #f9f9f9;
+    border-bottom: 1px solid #dddddd;
+    box-sizing: border-box;
+    height: 50px; }
+    .modal-header h3 {
+      margin: 0;
+      box-sizing: border-box;
+      padding-left: 15px;
+      line-height: 50px;
+      color: #4d4d4d;
+      font-size: 16px;
+      display: inline-block; }
+    .modal-header label {
+      box-sizing: border-box;
+      border-left: 1px solid #dddddd;
+      float: right;
+      line-height: 50px;
+      padding: 0 15px 0 15px;
+      cursor: pointer; }
+      .modal-header label:hover img {
+        opacity: 0.6; }
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -362,6 +362,27 @@ <h3>Avatar</h3>
                   </code>
                 </pre>
             </figure>
+        </section>
+        <section class="sections">
+            <h3>Modal</h3>
+            <p class="component-description">
+                Section demonstrates a modal component provided by NeoBrutalismCSS.
+            </p>
+            <input type="checkbox" id="modal">
+            <label for="modal" class="nb-button rounded green">Open Modal</label>
+            <label for="modal" class="modal-background"></label>
+            <div class="modal dialog">
+                <div class="modal-header">
+                    <h3>Modal Title</h3>
+                    <label for="modal">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEUAAABNTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU0N3NIOAAAAJnRSTlMAAQIDBAUGBwgRFRYZGiEjQ3l7hYaqtLm8vsDFx87a4uvv8fP1+bbY9ZEAAAB8SURBVBhXXY5LFoJAAMOCIP4VBRXEv5j7H9HFDOizu2TRFljedgCQHeocWHVaAWStXnKyl2oVWI+kd1XLvFV1D7Ng3qrWKYMZ+MdEhk3gbhw59KvlH0eTnf2mgiRwvQ7NW6aqNmncukKhnvo/zzlQ2PR/HgsAJkncH6XwAcr0FUY5BVeFAAAAAElFTkSuQmCC"
+                            width="16" height="16" alt="">
+                    </label>
+                </div>
+                <p>Content for the modal</p>
+            </div>
+
+
         </section>
         <section class="sections backgrounds">
             <h3>Colors</h3>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.1.5",
+  "version": "0.2.5",
   "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/_cards.scss b/src/scss/components/_cards.scss
@@ -1,13 +1,14 @@
 .card {
   width: 300px;
   margin: 20px;
-  border: 2px solid #000;
   border-radius: 8px;
   overflow: hidden;
-  transition: box-shadow 0.2s ease, transform 0.3s ease;
+  border: 3px solid #000;
+  box-shadow: -3px 3px 0px #000000;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
   &:hover {
-    box-shadow: 3px 3px 0px #000000;
-    transform: translate(-6px, -6px);
+    box-shadow: 0px 0px 0px #000000;
+    transform: translate(-6px, 6px);
   }
 }
 

diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
@@ -0,0 +1,71 @@
+input[type="checkbox"] {
+  display: none;
+}
+
+input[type="checkbox"]:checked ~ .modal,
+input[type="checkbox"]:checked ~ .modal-background {
+  display: block;
+}
+
+.modal-background {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 9998;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: none;
+  width: 300px;
+  height: 300px;
+  background-color: #fff;
+  box-sizing: border-box;
+  z-index: 9999;
+
+  > p {
+    padding: 15px;
+    margin: 0;
+  }
+
+  &-header {
+    background-color: #f9f9f9;
+    border-bottom: 1px solid #dddddd;
+    box-sizing: border-box;
+    height: 50px;
+
+    h3 {
+      margin: 0;
+      box-sizing: border-box;
+      padding-left: 15px;
+      line-height: 50px;
+      color: #4d4d4d;
+      font-size: 16px;
+      display: inline-block;
+    }
+
+    label {
+      box-sizing: border-box;
+      border-left: 1px solid #dddddd;
+      float: right;
+      line-height: 50px;
+      padding: 0 15px 0 15px;
+      cursor: pointer;
+
+      &:hover {
+        img {
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -12,3 +12,4 @@
 @import "components/avatar";
 @import "components/checkbox";
 @import "components/badge";
+@import "components/modal";