From 975531198f387a54950539b32afda6206287b493 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Thu, 4 Feb 2021 10:48:03 -0800
Subject: [PATCH] checkboxes

---
 creator/index.php                |  5 +++-
 css/{style-7.css => style-8.css} | 49 ++++++++++++++++++++++++++++++++
 globalHTML/header-1.php          |  2 +-
 3 files changed, 54 insertions(+), 2 deletions(-)
 rename css/{style-7.css => style-8.css} (93%)

diff --git a/creator/index.php b/creator/index.php
index bebf47e7..1ec9705c 100644
--- a/creator/index.php
+++ b/creator/index.php
@@ -38,7 +38,10 @@ include('../globalHTML/header-1.php');
 			</div>
 			<div>
 				<h5 class='input-description'>Erase</h5>
-				<input id='frame-editor-erase'  class='input' type='checkbox' placeholder='Erase'>
+				<label class='checkbox-container input'>Erase Card
+					<input id='frame-editor-erase' type='checkbox' placeholder='Erase'>
+					<span class='checkmark'></span>
+				</label>
 			</div>
 		</div>
 		<div id='textbox-editor' class='textbox-editor'>
diff --git a/css/style-7.css b/css/style-8.css
similarity index 93%
rename from css/style-7.css
rename to css/style-8.css
index 8e3b7089..f508c0de 100644
--- a/css/style-7.css
+++ b/css/style-8.css
@@ -402,6 +402,55 @@ textarea.input {
 	max-height: 20rem;
 	transition: height 0s;
 }
+/*Checkboxes*/
+.checkbox-container {
+	display: block;
+	position: relative;
+	padding-left: 2rem;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.checkbox-container input {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+.checkmark {
+	position: absolute;
+	top: 0;
+	left: 0.25rem;
+	height: 1.5rem;
+	width: 1.5rem;
+	border-radius: 0.25rem;
+	background-color: #efefef;
+}
+.checkbox-container input:checked ~ .checkmark {
+	background-color: var(--color-selected);
+}
+.checkmark:after {
+	content: "";
+	position: absolute;
+	display: none;
+}
+.checkbox-container input:checked ~ .checkmark:after {
+	display: block;
+}
+.checkbox-container .checkmark:after {
+	left: 0.5rem;
+	top: 0.25rem;
+	width: 0.25rem;
+	height: 0.75rem;
+	border: solid var(--color-primary);
+	border-width: 0 0.25rem 0.25rem 0;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
 /*Collapsible*/
 .collapsible {
 	cursor: pointer;
diff --git a/globalHTML/header-1.php b/globalHTML/header-1.php
index 9cb4d5fc..996b8512 100644
--- a/globalHTML/header-1.php
+++ b/globalHTML/header-1.php
@@ -9,7 +9,7 @@
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 	<link rel="stylesheet" href="/css/reset.css">
-	<link rel="stylesheet" href="/css/style-7.css">
+	<link rel="stylesheet" href="/css/style-8.css">
 	<link rel="shortcut icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">