checkboxes

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'>

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;

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">