{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:03:59.000Z","isPrivate":0,"projectId":"2463ef","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":670,"cssLen":905,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n ","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .play {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .pause {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .play {\n display: none;\n}\n\n.container input:checked ~ .pause {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: rotate(-180deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(-10deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:59.000Z","isPrivate":0,"projectId":"1b0b0c","snapshot":null,"tags":null,"title":"checkbox by guilhermeyohan","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":79,"cssLen":2672,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":"@supports (-webkit-appearance: none) or (-moz-appearance: none) {\n .checkbox-wrapper-13 input[type=checkbox] {\n --active: #275EFE;\n --active-inner: #fff;\n --focus: 2px rgba(39, 94, 254, .3);\n --border: #BBC1E1;\n --border-hover: #275EFE;\n --background: #fff;\n --disabled: #F6F8FF;\n --disabled-inner: #E1E6F9;\n -webkit-appearance: none;\n -moz-appearance: none;\n height: 21px;\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n cursor: pointer;\n border: 1px solid var(--bc, var(--border));\n background: var(--b, var(--background));\n transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:after {\n content: \"\";\n display: block;\n left: 0;\n top: 0;\n position: absolute;\n transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:checked {\n --b: var(--active);\n --bc: var(--active);\n --d-o: .3s;\n --d-t: .6s;\n --d-t-e: cubic-bezier(.2, .85, .32, 1.2);\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:disabled {\n --b: var(--disabled);\n cursor: not-allowed;\n opacity: 0.9;\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {\n --b: var(--disabled-inner);\n --bc: var(--border);\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:disabled + label {\n cursor: not-allowed;\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {\n --bc: var(--border-hover);\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:focus {\n box-shadow: 0 0 0 var(--focus);\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {\n width: 21px;\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {\n opacity: var(--o, 0);\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {\n --o: 1;\n }\n\n .checkbox-wrapper-13 input[type=checkbox] + label {\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n margin-left: 4px;\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {\n border-radius: 7px;\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {\n width: 5px;\n height: 9px;\n border: 2px solid var(--active-inner);\n border-top: 0;\n border-left: 0;\n left: 7px;\n top: 4px;\n transform: rotate(var(--r, 20deg));\n }\n\n .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {\n --r: 43deg;\n }\n}\n\n.checkbox-wrapper-13 * {\n box-sizing: inherit;\n}\n\n.checkbox-wrapper-13 *:before,\n .checkbox-wrapper-13 *:after {\n box-sizing: inherit;\n}\n\n"},{"created":"2024-01-22T17:03:59.000Z","isPrivate":0,"projectId":"f51c62","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1196,"cssLen":889,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n ","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .moon {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .sun {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .moon {\n display: none;\n}\n\n.container input:checked ~ .sun {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: rotate(-360deg) scale(0);\n opacity: 0;\n }\n\n 75% {\n transform: rotate(25deg);\n }\n}"},{"created":"2024-01-22T17:03:59.000Z","isPrivate":0,"projectId":"0407e9","snapshot":null,"tags":null,"title":"checkbox by elijahgummer","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":335,"cssLen":1295,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n \n

\n","css":".checkbox {\n position: relative;\n}\n\n.checkbox input[type=\"checkbox\"] {\n display: none;\n visibility: hidden;\n}\n\n.checkbox .cbx {\n -webkit-perspective: 20;\n perspective: 20;\n display: inline-block;\n border: 2px solid #e8e8eb;\n background: #e8e8eb;\n border-radius: 4px;\n transform: translate3d(0, 0, 0);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.checkbox .cbx:hover {\n border-color: #0b76ef;\n}\n\n.checkbox .flip {\n display: block;\n transition: all 0.4s ease;\n transform-style: preserve-3d;\n position: relative;\n width: 20px;\n height: 20px;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .cbx {\n border-color: #0b76ef;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .cbx .flip {\n transform: rotateY(180deg);\n}\n\n.checkbox .front,\n.checkbox .back {\n backface-visibility: hidden;\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n border-radius: 2px;\n}\n\n.checkbox .front {\n background: #fff;\n z-index: 1;\n}\n\n.checkbox .back {\n transform: rotateY(180deg);\n background: #0b76ef;\n text-align: center;\n color: #fff;\n line-height: 20px;\n box-shadow: 0 0 0 1px #0b76ef;\n}\n\n.checkbox .back svg {\n margin-top: 3px;\n fill: none;\n}\n\n.checkbox .back svg path {\n stroke: #fff;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n"},{"created":"2024-01-22T17:03:59.000Z","isPrivate":0,"projectId":"e81654","snapshot":null,"tags":null,"title":"checkbox by vinodjangid07","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":396,"cssLen":1106,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n\n \n\n\n\n\n","css":".bookmark {\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n#checkboxInput {\n display: none;\n}\n\n.svgIcon {\n height: 30px;\n}\n\n.svgIcon path {\n fill: rgb(153, 153, 153);\n}\n\n.bookmark::before {\n content: \"\\002B\";\n position: absolute;\n color: rgb(255, 255, 255);\n font-size: 1.2em;\n top: 1px;\n}\n\n#checkboxInput:checked + .bookmark::before {\n content: \"\\2713\";\n font-size: 0.70em;\n top: 5px;\n}\n\n#checkboxInput:checked + .bookmark .svgIcon path {\n fill: rgb(121, 199, 3);\n}\n\n#checkboxInput:active + .bookmark .svgIcon path {\n fill: rgb(204, 204, 204);\n}\n\n.bookmark::after {\n content: \"\";\n background-color: rgba(56, 105, 0, 0.342);\n position: absolute;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n z-index: -1;\n}\n\n#checkboxInput:checked + .bookmark::after {\n animation: puff-out-center .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;\n}\n\n@keyframes puff-out-center {\n 0% {\n transform: scale(1);\n filter: blur(0px);\n opacity: 1;\n }\n\n 100% {\n transform: scale(9);\n filter: blur(1px);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T17:03:59.000Z","isPrivate":0,"projectId":"60f37e","snapshot":null,"tags":null,"title":"checkbox by kennyotsu-monochromia","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2022,"cssLen":3455,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n\n \n \n

\n \n \n \n \n \n \n \n \n

","css":".wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 60px;\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n}\n\nfooter .demo {\n position: absolute;\n bottom: 10px;\n width: 500px;\n margin: 0 auto;\n}\n\nfooter .demo a {\n text-align: center;\n color: var(--black);\n text-decoration: none;\n font-weight: 100;\n border-bottom: 1px solid var(--black);\n}\n\n.circle {\n display: block;\n position: relative;\n padding: 0;\n z-index: 98;\n margin: 0 auto;\n -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n height: 60px;\n width: 60px;\n background-color: var(--night-rider);\n transition: 0.2s;\n text-align: center;\n}\n\n.circle:active {\n transform: scale(0.9);\n box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);\n}\n\n.circle:hover {\n cursor: pointer;\n background-color: var(--night-rider);\n box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);\n}\n\n.circle .svg {\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -15px;\n margin-top: -15px;\n width: 30px;\n height: 30px;\n transition: 0.5s;\n transform: rotate(180deg);\n}\n\n.sub-circle {\n z-index: 0;\n position: absolute;\n height: 40px;\n width: 40px;\n overflow: hidden;\n border-radius: 50%;\n transition: 0.3s;\n transform: scale(0.5);\n opacity: 0;\n padding: 0;\n margin: 0;\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);\n border: none;\n}\n\n.sub-circle label {\n background-color: var(--eer-black);\n display: block;\n color: var(--eer-black);\n width: 100%;\n height: 100%;\n line-height: 40px;\n transition: .5s;\n}\n\n.sub-circle label:hover {\n cursor: pointer;\n background-color: var(--eer-black);\n}\n\n.subs {\n left: -20px;\n top: -50px;\n width: 40px;\n height: 40px;\n text-align: center;\n z-index: 0;\n margin: 0 auto;\n position: relative;\n}\n\n.hidden-sub-trigger {\n display: none;\n}\n\n.hidden-sub-trigger:checked ~ label {\n background-color: var(--black);\n}\n\n.hidden-trigger {\n display: none;\n}\n\n.hidden-trigger:checked ~ .circle {\n transform: scale(0.9);\n cursor: pointer;\n background-color: var(--black);\n box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1);\n}\n\n.hidden-trigger:checked ~ .circle .svg {\n transform: rotate(45deg);\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(1) {\n transform: translate(0px, -100px) scale(1);\n opacity: 1;\n transition: 0.1s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(2) {\n transform: translate(75px, -75px) scale(1);\n opacity: 1;\n transition: 0.2s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(3) {\n transform: translate(100px, 0px) scale(1);\n opacity: 1;\n transition: 0.3s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(4) {\n transform: translate(75px, 75px) scale(1);\n opacity: 1;\n transition: 0.4s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(5) {\n transform: translate(0px, 100px) scale(1);\n opacity: 1;\n transition: 0.5s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(6) {\n transform: translate(-75px, 75px) scale(1);\n opacity: 1;\n transition: 0.6s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(7) {\n transform: translate(-100px, 0px) scale(1);\n opacity: 1;\n transition: 0.7s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(8) {\n transform: translate(-75px, -75px) scale(1);\n opacity: 1;\n transition: 0.8s;\n}\n"},{"created":"2024-01-22T17:03:59.000Z","isPrivate":0,"projectId":"e33b10","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1628,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n

","css":".heart-container {\n --heart-color: rgb(189, 91, 255);\n position: relative;\n width: 50px;\n height: 50px;\n transition: .3s;\n}\n\n.heart-container .checkbox {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 20;\n cursor: pointer;\n}\n\n.heart-container .svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.heart-container .svg-outline,\n .heart-container .svg-filled {\n fill: var(--heart-color);\n position: absolute;\n}\n\n.heart-container .svg-filled {\n animation: keyframes-svg-filled 1s;\n display: none;\n}\n\n.heart-container .svg-celebrate {\n position: absolute;\n animation: keyframes-svg-celebrate .5s;\n animation-fill-mode: forwards;\n display: none;\n stroke: var(--heart-color);\n fill: var(--heart-color);\n stroke-width: 2px;\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-filled {\n display: block\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-celebrate {\n display: block\n}\n\n@keyframes keyframes-svg-filled {\n 0% {\n transform: scale(0);\n }\n\n 25% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1);\n filter: brightness(1.5);\n }\n}\n\n@keyframes keyframes-svg-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n filter: brightness(1.5);\n }\n\n 100% {\n transform: scale(1.4);\n opacity: 0;\n display: none;\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"80f684","snapshot":null,"tags":null,"title":"checkbox by Shoh2008","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":512,"cssLen":2704,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n

Checkbox

\n \n

\n","css":".checkbox-wrapper-33 {\n --s-xsmall: 0.625em;\n --s-small: 1.2em;\n --border-width: 1px;\n --c-primary: #5f11e8;\n --c-primary-20-percent-opacity: rgb(95 17 232 / 20%);\n --c-primary-10-percent-opacity: rgb(95 17 232 / 10%);\n --t-base: 0.4s;\n --t-fast: 0.2s;\n --e-in: ease-in;\n --e-out: cubic-bezier(0.11, 0.29, 0.18, 0.98);\n}\n\n.checkbox-wrapper-33 .visuallyhidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.checkbox-wrapper-33 .checkbox {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n color: white;\n}\n\n.checkbox-wrapper-33 .checkbox + .checkbox {\n margin-top: var(--s-small);\n}\n\n.checkbox-wrapper-33 .checkbox__symbol {\n display: inline-block;\n display: flex;\n margin-right: calc(var(--s-small) * 0.7);\n border: var(--border-width) solid var(--c-primary);\n position: relative;\n border-radius: 0.1em;\n width: 1.5em;\n height: 1.5em;\n transition: box-shadow var(--t-base) var(--e-out),\n background-color var(--t-base);\n box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);\n}\n\n.checkbox-wrapper-33 .checkbox__symbol:after {\n content: \"\";\n position: absolute;\n top: 0.5em;\n left: 0.5em;\n width: 0.25em;\n height: 0.25em;\n background-color: var(--c-primary-20-percent-opacity);\n opacity: 0;\n border-radius: 3em;\n transform: scale(1);\n transform-origin: 50% 50%;\n}\n\n.checkbox-wrapper-33 .checkbox .icon-checkbox {\n width: 1em;\n height: 1em;\n margin: auto;\n fill: none;\n stroke-width: 3;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-miterlimit: 10;\n color: var(--c-primary);\n display: inline-block;\n}\n\n.checkbox-wrapper-33 .checkbox .icon-checkbox path {\n transition: stroke-dashoffset var(--t-fast) var(--e-in);\n stroke-dasharray: 30px, 31px;\n stroke-dashoffset: 31px;\n}\n\n.checkbox-wrapper-33 .checkbox__textwrapper {\n margin: 0;\n}\n\n.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol:after {\n -webkit-animation: ripple-33 1.5s var(--e-out);\n animation: ripple-33 1.5s var(--e-out);\n}\n\n.checkbox-wrapper-33\n .checkbox__trigger:checked\n + .checkbox__symbol\n .icon-checkbox\n path {\n transition: stroke-dashoffset var(--t-base) var(--e-out);\n stroke-dashoffset: 0px;\n}\n\n.checkbox-wrapper-33 .checkbox__trigger:focus + .checkbox__symbol {\n box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);\n}\n\n@-webkit-keyframes ripple-33 {\n from {\n transform: scale(0);\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(20);\n }\n}\n\n@keyframes ripple-33 {\n from {\n transform: scale(0);\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(20);\n }\n}\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"016f60","snapshot":null,"tags":null,"title":"checkbox by PriyanshuGupta28","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":137,"cssLen":3005,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n\n\n \n\n","css":".checkbox-wrapper {\n box-sizing: border-box;\n --background-color: #fff;\n --checkbox-height: 25px;\n}\n\n.checkbox-wrapper input[type=checkbox] {\n display: none;\n}\n\n.checkbox-wrapper .check-box {\n height: var(--checkbox-height);\n width: var(--checkbox-height);\n background-color: transparent;\n border: calc(var(--checkbox-height) * .1) solid #000;\n border-radius: 5px;\n position: relative;\n display: inline-block;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -moz-transition: border-color ease 0.2s;\n -o-transition: border-color ease 0.2s;\n -webkit-transition: border-color ease 0.2s;\n transition: border-color ease 0.2s;\n cursor: pointer;\n}\n\n.checkbox-wrapper .check-box::before,\n .checkbox-wrapper .check-box::after {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: absolute;\n height: 0;\n width: calc(var(--checkbox-height) * .2);\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n display: inline-block;\n -moz-transform-origin: left top;\n -ms-transform-origin: left top;\n -o-transform-origin: left top;\n -webkit-transform-origin: left top;\n transform-origin: left top;\n border-radius: 5px;\n content: \" \";\n -webkit-transition: opacity ease 0.5;\n -moz-transition: opacity ease 0.5;\n transition: opacity ease 0.5;\n}\n\n.checkbox-wrapper .check-box::before {\n top: calc(var(--checkbox-height) * .72);\n left: calc(var(--checkbox-height) * .41);\n box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);\n -moz-transform: rotate(-135deg);\n -ms-transform: rotate(-135deg);\n -o-transform: rotate(-135deg);\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n}\n\n.checkbox-wrapper .check-box::after {\n top: calc(var(--checkbox-height) * .37);\n left: calc(var(--checkbox-height) * .05);\n -moz-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n -o-transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n\n.checkbox-wrapper input[type=checkbox]:checked + .check-box,\n .checkbox-wrapper .check-box.checked {\n border-color: #5900ff;\n}\n\n.checkbox-wrapper input[type=checkbox]:checked + .check-box::after,\n .checkbox-wrapper .check-box.checked::after {\n height: calc(var(--checkbox-height) / 2);\n -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n animation: dothabottomcheck-19 0.2s ease 0s forwards;\n}\n\n.checkbox-wrapper input[type=checkbox]:checked + .check-box::before,\n .checkbox-wrapper .check-box.checked::before {\n height: calc(var(--checkbox-height) * 1.2);\n -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;\n -o-animation: dothatopcheck-19 0.4s ease 0s forwards;\n -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;\n animation: dothatopcheck-19 0.4s ease 0s forwards;\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"15adba","snapshot":null,"tags":null,"title":"checkbox by andrew-demchenk0","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1095,"cssLen":859,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":".theme {\n --bg-color: #fff;\n --main-color: #323232;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n background-color: var(--bg-color);\n border-radius: 100%;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.input {\n cursor: pointer;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 10;\n opacity: 0;\n}\n\n.icon {\n position: absolute;\n top: calc(50% -13px);\n left: calc(50% -13px);\n width: 26px;\n height: 26px;\n}\n\n.icon.icon-moon {\n fill: var(--main-color);\n}\n\n.icon.icon-sun {\n stroke: var(--main-color);\n display: none;\n}\n\n.input:checked ~ .icon.icon-sun {\n display: block;\n}\n\n.input:checked ~ .icon.icon-moon {\n display: none;\n}\n\n.theme:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"281fc1","snapshot":null,"tags":null,"title":"checkbox by gharsh11032000","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":211,"cssLen":940,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n Uiverse\n \n

\n","css":".checkbox {\n display: inline-block;\n position: relative;\n cursor: pointer;\n}\n\n.checkbox__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.checkbox__label {\n display: inline-block;\n padding-left: 30px;\n margin-bottom: 10px;\n position: relative;\n font-size: 16px;\n color: #fff;\n cursor: pointer;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.checkbox__custom {\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg,#e81cff, #40c9ff) border-box;\n border: 2px solid transparent;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.checkbox__input:checked + .checkbox__label .checkbox__custom {\n background-image: linear-gradient(145deg,#e81cff, #40c9ff);\n transform: rotate(45deg) scale(0.8);\n}\n\n.checkbox__label:hover .checkbox__custom {\n transform: scale(1.2);\n}\n\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"94ecc4","snapshot":null,"tags":null,"title":"checkbox by mrhyddenn","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n background: #606062;\n border-radius: 7px;\n box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5);\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-image: linear-gradient(#255CD2,#1D52C1)\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.20em;\n width: 0.24em;\n height: 0.6em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}"}]}},"actionData":null,"errors":null}