Skip to content

Instantly share code, notes, and snippets.

@tst32

tst32/dabblet.css

Last active April 13, 2021 12:37
Show Gist options
  • Save tst32/49f530f581a1598c5a32a1a2cf7f456a to your computer and use it in GitHub Desktop.
Save tst32/49f530f581a1598c5a32a1a2cf7f456a to your computer and use it in GitHub Desktop.
Download ZIP
Checkboxes toggle-2state
Raw
dabblet.css
/**
* Checkboxes toggle-2state
*/
.checkbox-on-off input[type="checkbox"] {
position: relative;
opacity: 0;
}
.checkbox-on-off label {
/* 1 state */
display: block;
border: 1px solid transparent;
height: 120px;
width: 150px;
background: no-repeat
url("https://gist.githubusercontent.com/tst32/611d3636caa49f83c32e34ded7b6fee7/raw/8666a2e737f7064b355f9dd63e3b97d47dae8aba/bytile.svg");
cursor: pointer;
}
.checkbox-on-off input[type="checkbox"]:checked + label[id="autoplay-checkbox-label"] .checked {
display: block;
margin-top: 0px;
margin-left: 0px;
background-size: auto;
width: 100%;
height: 100%;
}
.checkbox-on-off label .checked {
/*2 state*/
display: none;
background: no-repeat
url("https://gist.githubusercontent.com/tst32/611d3636caa49f83c32e34ded7b6fee7/raw/a2bad4b04abe771e3a9d13f1e8ed759f2b686d2b/bylist.svg");
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"></span>
</label>
</span>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"90","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment