From 7b4a0fdbde8bb91178cf5afd2c1b7db12d05bab6 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sat, 11 Dec 2021 19:31:21 -0700
Subject: [PATCH] create exit button

i robbed all the CSS don't @ me
---
 scripts/modal/exitbtn.js | 28 +++++++++++++++
 styles/modal.css         | 76 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 scripts/modal/exitbtn.js

diff --git a/scripts/modal/exitbtn.js b/scripts/modal/exitbtn.js
new file mode 100644
index 0000000..308a1c0
--- /dev/null
+++ b/scripts/modal/exitbtn.js
@@ -0,0 +1,28 @@
+module.exports = (parent, btnID) => {
+    let wr = document.createElement('div');
+    wr.className = 'exit-wrapper';
+    parent.appendChild(wr);
+    let btn = document.createElement('a');
+    btn.className = 'exit-button';
+    btn.id = btnID;
+    wr.appendChild(btn)
+    let ind = document.createElement('div');
+    ind.className = 'exit-in';
+    btn.appendChild(ind);
+    let inbl1 = document.createElement('div');
+    inbl1.className = 'exit-button-block';
+    ind.appendChild(inbl1);
+    let inbl2 = document.createElement('div');
+    inbl2.className = 'exit-button-block';
+    ind.appendChild(inbl2);
+    let outd = document.createElement('div');
+    outd.className = 'exit-out';
+    btn.appendChild(outd);
+    let outbl1 = document.createElement('div');
+    outbl1.className = 'exit-button-block';
+    outd.appendChild(outbl1);
+    let outbl2 = document.createElement('div');
+    outbl2.className = 'exit-button-block';
+    outd.appendChild(outbl2);
+    return wr;
+};
\ No newline at end of file
diff --git a/styles/modal.css b/styles/modal.css
index 720d0e5..b9760d3 100644
--- a/styles/modal.css
+++ b/styles/modal.css
@@ -58,4 +58,80 @@
     left: 0;
     background-color: #1717176d;
     z-index: 2;
+}
+
+
+/* robbed this shit from some website somewhere. i'm not this cool.
+ * https://codepen.io/maneeshc/pen/pPxKQm
+ * that's the codepen i robbed it from */
+
+.exit-wrapper {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.exit-button {
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    overflow: hidden;
+}
+.exit-button > div {
+    position: relative;
+}
+.exit-button-block {
+    width: 40px;
+    height: 20px;
+    position: relative;
+    overflow: hidden;
+}
+.exit-button-block:before, .exit-button-block:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: calc(55% - 4px);
+    display: block;
+    width: 4px;
+    height: 25px;
+    transform-origin: bottom center;
+    background: white;
+    transition: all ease-out 280ms;
+}
+.exit-button-block:last-of-type {
+    transform: rotate(180deg);
+}
+.exit-button .exit-in .exit-button-block:before {
+    transition-delay: 280ms;
+    transform: translateX(20px) translateY(-20px) rotate(45deg);
+}
+.exit-button .exit-in .exit-button-block:after {
+    transition-delay: 280ms;
+    transform: translateX(-22px) translateY(-22px) rotate(-45deg);
+}
+.exit-button .exit-out {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.exit-button .exit-out .exit-button-block:before {
+    transform: translateX(-5px) translateY(5px) rotate(45deg);
+}
+.exit-button .exit-out .exit-button-block:after {
+    transform: translateX(5px) translateY(5px) rotate(-45deg);
+}
+.exit-button:hover .exit-in .exit-button-block:before {
+    transform: translateX(-5px) translateY(5px) rotate(45deg);
+}
+.exit-button:hover .exit-in .exit-button-block:after {
+    transform: translateX(5px) translateY(5px) rotate(-45deg);
+}
+.exit-button:hover .exit-out .exit-button-block:before {
+    transform: translateX(-20px) translateY(20px) rotate(45deg);
+}
+.exit-button:hover .exit-out .exit-button-block:after {
+    transform: translateX(20px) translateY(20px) rotate(-45deg);
 }
\ No newline at end of file