Last active
April 13, 2021 12:00
-
-
Save tst32/611d3636caa49f83c32e34ded7b6fee7 to your computer and use it in GitHub Desktop.
Checkboxes - The first commented line is your dabblet’s title
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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="Group"><g class="Group"><g class="Group"><g class="com.sun.star.drawing.ClosedBezierShape"><path class="BoundingBox" fill="none" d="M79 78h3839v2793H79z"/><path fill="#E0E0E0" d="M545 79c-82 0-163 22-232 62-71 41-130 100-171 171-40 69-62 150-62 232v1860c0 82 22 163 62 233 41 70 100 129 171 170 69 40 150 62 232 62l2906-1v1c82 0 163-22 233-62 70-41 129-100 170-170 40-70 62-151 62-233V543v1c0-82-22-163-62-233-41-70-100-129-170-170-70-40-151-62-233-62H545z"/></g><g class="com.sun.star.drawing.ClosedBezierShape"><path class="BoundingBox" fill="none" d="M0-1h3996v2951H0z"/><path fill="#616161" d="M444 171c-32 9-64 22-92 39-30 17-57 38-81 61-23 24-44 51-61 81-17 28-30 60-39 92-9 33-13 66-13 101v1860c0 34 4 67 13 100 9 32 22 64 39 92 17 30 38 57 61 81 24 23 51 44 81 61 28 17 60 30 92 39 33 9 66 13 100 13l2906-1 1 1c34 0 68-5 100-13 32-9 64-22 92-39 30-17 57-38 81-61 23-24 44-51 61-81 17-28 30-60 39-92 9-33 13-66 13-100V545c0-35-4-68-13-101-9-32-22-64-39-92-17-30-38-57-61-81-24-23-51-44-81-61-28-17-60-30-92-39-33-9-66-13-100-13H545c-35 0-68 4-101 13zm3006 2777-2905 1c-48 0-96-6-142-19-45-12-89-30-131-54-41-24-79-52-113-86s-62-72-86-113c-24-42-42-86-54-131-13-46-19-94-19-141V545c0-48 6-96 19-142 12-45 30-89 54-131 24-41 52-79 86-113s72-62 113-86c42-24 86-42 131-54C449 6 497 0 545 0h2906c47 0 95 6 141 19 45 12 89 30 131 54 41 24 79 52 113 86s62 72 86 113c24 42 42 86 54 131 13 46 19 93 19 141v1861c0 47-6 95-19 141-12 45-30 89-54 131-24 41-52 79-86 113s-72 62-113 86c-42 24-86 42-131 54-46 13-94 19-141 19l-1-1z"/></g></g><g class="com.sun.star.drawing.ClosedBezierShape"><path class="BoundingBox" fill="none" d="M587 546h307v307H587z"/><path fill="#616161" d="M588 699c0-42 15-78 44-107 30-30 66-45 108-45s78 15 108 45c29 29 44 65 44 107s-15 78-44 108c-30 30-66 45-108 45s-78-15-108-45c-29-30-44-66-44-108z"/></g><g class="com.sun.star.drawing.ClosedBezierShape"><path class="BoundingBox" fill="none" d="M587 1128h307v307H587z"/><path fill="#616161" d="M588 1281c0-42 15-78 44-108 30-30 66-45 108-45s78 15 108 45c29 30 44 66 44 108s-15 77-44 107c-30 30-66 45-108 45s-78-15-108-45c-29-30-44-65-44-107z"/></g><g class="com.sun.star.drawing.ClosedBezierShape"><path class="BoundingBox" fill="none" d="M587 1710h307v306H587z"/><path fill="#616161" d="M588 1862c0-41 15-77 44-107 30-30 66-45 108-45s78 15 108 45c29 30 44 66 44 107 0 42-15 78-44 108-30 30-66 45-108 45s-78-15-108-45c-29-30-44-66-44-108z"/></g><g class="com.sun.star.drawing.ClosedBezierShape"><path class="BoundingBox" fill="none" d="M587 2291h307v307H587z"/><path fill="#616161" d="M588 2444c0-42 15-78 44-108 30-29 66-44 108-44s78 15 108 44c29 30 44 66 44 108s-15 78-44 108c-30 29-66 44-108 44s-78-15-108-44c-29-30-44-66-44-108z"/></g></g><g class="com.sun.star.drawing.OpenBezierShape"><path class="BoundingBox" fill="none" d="M1059 577h2636v214H1059z"/><path fill="none" stroke="#616161" stroke-width="212" stroke-linejoin="bevel" stroke-linecap="round" d="M1165 683h2423"/></g><g class="com.sun.star.drawing.OpenBezierShape"><path class="BoundingBox" fill="none" d="M1067 1161h2636v214H1067z"/><path fill="none" stroke="#616161" stroke-width="212" stroke-linejoin="bevel" stroke-linecap="round" d="M1173 1268h2423"/></g><g class="com.sun.star.drawing.OpenBezierShape"><path class="BoundingBox" fill="none" d="M1067 1769h2636v214H1067z"/><path fill="none" stroke="#616161" stroke-width="212" stroke-linejoin="bevel" stroke-linecap="round" d="M1173 1875h2423"/></g><g class="com.sun.star.drawing.OpenBezierShape"><path class="BoundingBox" fill="none" d="M1067 2342h2636v214H1067z"/><path fill="none" stroke="#616161" stroke-width="212" stroke-linejoin="bevel" stroke-linecap="round" d="M1173 2448h2423"/></g></g></g></g></g></svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> | |
| <span class="unchecked"></span> | |
| <span class="toggle"> </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"> </span> | |
| <span class="unchecked"></span> | |
| <span class="toggle"> </span> | |
| </label> | |
| </span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"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