GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

checkboxes

Browse Source
This commit is contained in:
Kyle
2021-02-04 10:48:03 -08:00
parent 8f7fe5a9ea
commit 975531198f
3 changed files with 54 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
creator/index.php
View File

@@ -38,7 +38,10 @@ include('../globalHTML/header-1.php');
</div> </div>
<div> <div>
<h5 class='input-description'>Erase</h5> <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> </div>
<div id='textbox-editor' class='textbox-editor'> <div id='textbox-editor' class='textbox-editor'>

49
css/style-7.css → css/style-8.css
View File

@@ -402,6 +402,55 @@ textarea.input {
max-height: 20rem; max-height: 20rem;
transition: height 0s; 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*/
.collapsible { .collapsible {
cursor: pointer; cursor: pointer;

2
globalHTML/header-1.php
View File

@@ -9,7 +9,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/css/reset.css"> <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="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">