Checkboxes - The first commented line is your dabblet’s title

bylist.svg

bytile.svg

<svg version="1.2" width="40mm" height="29.5mm" viewBox="0 0 4000 2950" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><defs class="ClipPathGroup"><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 0h4000v2950H0z"/></clipPath></defs><g class="SlideGroup"><g class="Slide" clip-path="url(#a)"><g class="Page"><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M-4-8h4012v2962H-4z"/><path fill="#E0E0E0" d="M542 72h1c-82 0-163 22-234 63s-129 99-170 170-63 152-63 234v1867c0 82 22 163 63 234s99 129 170 170 152 63 234 63h2917c82 0 163-22 234-63s129-99 170-170 63-152 63-234V538v1c0-82-22-163-63-234s-99-129-170-170-152-63-234-63H542z"/><path fill="none" stroke="#696969" stroke-width="159" stroke-linejoin="bevel" d="M542 72h1c-82 0-163 22-234 63s-129 99-170 170-63 152-63 234v1867c0 82 22 163 63 234s99 129 170 170 152 63 234 63h2917c82 0 163-22 234-63s129-99 170-170 63-152 63-234V538v1c0-82-22-163-63-234s-99-129-170-170-152-63-234-63H542z" style="opacity:.6"/><text class="TextShape"><tspan class="TextParagraph" font-family="Wingdings" font-size="212" font-weight="400"><tspan class="TextPosition" x="541" y="603"><tspan>      </tspan></tspan><tspan class="TextPosition" x="541" y="841"><tspan>      </tspan></tspan></tspan></text></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M818 298h684v743H818z"/><path fill="#696969" d="M932 299c-19 0-39 5-56 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 56 15h455c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56V412v1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15H932z"/><path fill="none" stroke="#696969" d="M932 299c-19 0-39 5-56 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 56 15h455c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56V412v1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15H932z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M2632 298h684v743h-684z"/><path fill="#696969" d="M2746 299c-19 0-39 5-56 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 56 15h455c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56V412v1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/><path fill="none" stroke="#696969" d="M2746 299c-19 0-39 5-56 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 56 15h455c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56V412v1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M1725 298h684v743h-684z"/><path fill="silver" d="M1839 299h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56V412v1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/><path fill="none" stroke="#696969" d="M1839 299h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56V412v1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M2645 1136h684v743h-684z"/><path fill="silver" d="M2759 1137h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/><path fill="none" stroke="#696969" d="M2759 1137h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M1734 1136h684v743h-684z"/><path fill="#696969" d="M1848 1137h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/><path fill="none" stroke="#696969" d="M1848 1137h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M819 1989h684v743H819z"/><path fill="#696969" d="M933 1990c-19 0-39 5-56 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 56 15h454c20 0 40-5 57-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-57-15H933z"/><path fill="none" stroke="#696969" d="M933 1990c-19 0-39 5-56 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 56 15h454c20 0 40-5 57-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-57-15H933z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M1733 1989h684v743h-684z"/><path fill="silver" d="M1847 1990h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/><path fill="none" stroke="#696969" d="M1847 1990h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15h-455z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M2638 1959h684v743h-684z"/><path fill="#696969" d="M2752 1960h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h453c20 0 40-5 57-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-57-15h-454z"/><path fill="none" stroke="#696969" d="M2752 1960h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h453c20 0 40-5 57-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-57-15h-454z"/></g><g class="com.sun.star.drawing.CustomShape"><path class="BoundingBox" fill="none" d="M830 1138h684v743H830z"/><path fill="silver" d="M944 1139h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15H944z"/><path fill="none" stroke="#696969" d="M944 1139h1c-20 0-40 5-57 15-18 10-32 24-42 42-10 17-15 37-15 57v513c0 19 5 39 15 56 10 18 24 32 42 42 17 10 37 15 57 15h454c19 0 39-5 56-15 18-10 32-24 42-42 10-17 15-37 15-56v-514 1c0-20-5-40-15-57-10-18-24-32-42-42-17-10-37-15-56-15H944z"/></g></g></g></g></svg>

dabblet.css

/**
 * Checkboxes - The first commented line is your dabblet’s title
 */

.checkbox-on-off {

  position: relative;

  display: inline-block;

  width: auto; 

  padding-right: 2px;

  overflow: hidden;

  vertical-align: middle;

    margin-top: 10px;

}



.checkbox-on-off input[type=checkbox] {

  position: absolute;

  opacity: 0;

}





.checkbox-on-off input[type=checkbox]:checked+label {

  background-color: lightblue;

}



.checkbox-on-off label {

  display: inline-block;

  border: 1px solid transparent;

  height: 300px;

  width: 300px;

  background: #b8b8b8;

  cursor: pointer;

  border-radius: 20px;

}



.checkbox-on-off input[type=checkbox]:checked+label .checked {

  display: inline-block;

  margin-top: 0px;

  margin-left: 0px;

  background: no-repeat url('https://gist.githubusercontent.com/tst32/611d3636caa49f83c32e34ded7b6fee7/raw/9df9282b32b63c236e26e690aed8ada7db349173/bytile.svg');

  background-size: auto;

  width: 100%;

  height: 100%;

}



.checkbox-on-off label .checked {

  display: none;
  
 background: no-repeat url('https://gist.githubusercontent.com/tst32/611d3636caa49f83c32e34ded7b6fee7/raw/9df9282b32b63c236e26e690aed8ada7db349173/bylist.svg');

}



.checkbox-on-off input[type=checkbox]:checked+label .unchecked {

  display: none;

  background: no-repeat url('https://gist.githubusercontent.com/tst32/611d3636caa49f83c32e34ded7b6fee7/raw/9df9282b32b63c236e26e690aed8ada7db349173/bytile.svg');

}



.checkbox-on-off label .unchecked {

  display: inline-block;

  float: right;

  padding-right: 3px;

}



.checkbox-on-off input[type=checkbox]:checked+label .toggle {

  float: right;

}



.checkbox-on-off label .toggle {

  float: left;

  background: #fbfbfb;

  height: 15px;

  width: 13px;

  border-radius: 20px;

}

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">&nbsp;</span>

        <span class="unchecked"></span>

        <span class="toggle">&nbsp;</span>

    </label>

</span>



<span class="checkbox-on-off ">

    <input id="autoplay-checkbox" class="" type="checkbox" checked="">

    <label for="autoplay-checkbox" id="autoplay-checkbox-label">

        <span class="checked">&nbsp;</span>

        <span class="unchecked"></span>

        <span class="toggle">&nbsp;</span>

    </label>

</span>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"90","seethrough":"1","prefixfree":"1","page":"all"}