{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"a4a1b9","snapshot":null,"tags":null,"title":"checkbox by Bodyhc","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":999,"cssLen":2681,"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 Sketch\n \n \n

\n","css":".checkbox-wrapper-16 *,\n .checkbox-wrapper-16 *:after,\n .checkbox-wrapper-16 *:before {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-16 .checkbox-input {\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n background-color: #2260ff;\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,\n .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 7rem;\n min-height: 7rem;\n border-radius: 0.5rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n transition: 0.15s ease;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:before {\n content: \"\";\n position: absolute;\n display: block;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n border-radius: 50%;\n top: 0.25rem;\n left: 0.25rem;\n opacity: 0;\n transform: scale(0);\n transition: 0.25s ease;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E\");\n background-size: 12px;\n background-repeat: no-repeat;\n background-position: 50% 50%;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover {\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-icon {\n transition: 0.375s ease;\n color: #494949;\n}\n\n.checkbox-wrapper-16 .checkbox-icon svg {\n width: 3rem;\n height: 3rem;\n}\n\n.checkbox-wrapper-16 .checkbox-label {\n color: #707070;\n transition: 0.375s ease;\n text-align: center;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"193247","snapshot":null,"tags":null,"title":"checkbox by PriyanshuGupta28","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":2743,"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","css":".checkbox-wrapper * {\n -webkit-tap-highlight-color: transparent;\n outline: none;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-wrapper label {\n --size: 50px;\n --shadow: calc(var(--size) * .07) calc(var(--size) * .1);\n position: relative;\n display: block;\n width: var(--size);\n height: var(--size);\n margin: 0 auto;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n border-radius: 50%;\n box-shadow: 0 var(--shadow) #ffbeb8;\n cursor: pointer;\n transition: 0.2s ease transform, 0.2s ease background-color,\n 0.2s ease box-shadow;\n overflow: hidden;\n z-index: 1;\n}\n\n.checkbox-wrapper label:before {\n content: \"\";\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n width: calc(var(--size) * .7);\n height: calc(var(--size) * .7);\n margin: 0 auto;\n background-color: #fff;\n transform: translateY(-50%);\n border-radius: 50%;\n box-shadow: inset 0 var(--shadow) #ffbeb8;\n transition: 0.2s ease width, 0.2s ease height;\n}\n\n.checkbox-wrapper label:hover:before {\n width: calc(var(--size) * .55);\n height: calc(var(--size) * .55);\n box-shadow: inset 0 var(--shadow) #ff9d96;\n}\n\n.checkbox-wrapper label:active {\n transform: scale(0.9);\n}\n\n.checkbox-wrapper .tick_mark {\n position: absolute;\n top: -1px;\n right: 0;\n left: calc(var(--size) * -.05);\n width: calc(var(--size) * .6);\n height: calc(var(--size) * .6);\n margin: 0 auto;\n margin-left: calc(var(--size) * .14);\n transform: rotateZ(-40deg);\n}\n\n.checkbox-wrapper .tick_mark:before,\n .checkbox-wrapper .tick_mark:after {\n content: \"\";\n position: absolute;\n background-color: #fff;\n border-radius: 2px;\n opacity: 0;\n transition: 0.2s ease transform, 0.2s ease opacity;\n}\n\n.checkbox-wrapper .tick_mark:before {\n left: 0;\n bottom: 0;\n width: calc(var(--size) * .1);\n height: calc(var(--size) * .3);\n box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);\n transform: translateY(calc(var(--size) * -.68));\n}\n\n.checkbox-wrapper .tick_mark:after {\n left: 0;\n bottom: 0;\n width: 100%;\n height: calc(var(--size) * .1);\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);\n transform: translateX(calc(var(--size) * .78));\n}\n\n.checkbox-wrapper input[type=\"checkbox\"]:checked + label {\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"]:checked + label:before {\n width: 0;\n height: 0;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"]:checked + label .tick_mark:before,\n .checkbox-wrapper input[type=\"checkbox\"]:checked + label .tick_mark:after {\n transform: translate(0);\n opacity: 1;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"44015b","snapshot":null,"tags":null,"title":"checkbox by nanda248","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":264,"cssLen":1343,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n ENGINE\n START\n STOP\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 checkmark=outer-circle */\n.circle {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 6em;\n height: 6em;\n border-radius: 50%;\n border: 6px solid #838996;\n background-color: #282828;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n}\n\n.circle span {\n color: #e5e4e2;\n font-size: small;\n}\n\n.circle .led {\n width: 1em;\n height: 0.2em;\n background-color: #BBBBBB;\n border-radius: 5px;\n transition: 0.4s;\n}\n\n.engine-text {\n margin-top: 0.75em;\n font-weight: 500;\n}\n\n.start-text, .stop-text {\n font-weight: 600;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .circle .led {\n background-color: #FDDA16;\n box-shadow: #FDDA16 0px 1px 0px, #FDDA16 0px 0px 8px;\n}\n\n.container input:checked ~ .circle {\n box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,\n rgba(14, 30, 37, 0.32) 0px 2px 16px 0px,\n inset 3px 3px 8px 1px #485871,\n inset -3px -3px 8px 1px #485871;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"17d111","snapshot":null,"tags":null,"title":"checkbox by JkHuger","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":928,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}\n\n.checkbox input[type=\"checkbox\"] {\n opacity: 0;\n position: absolute;\n}\n\n.checkbox .checkmark {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n border: 1px solid #ccc;\n border-radius: 50%;\n transition: background-color 0.2s ease;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .checkmark {\n background-color: #0078d4;\n border-color: #0078d4;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .checkmark:after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #fff;\n transition: transform 0.2s ease;\n transform: scale(1);\n}\n\n.checkbox .checkmark:after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: transparent;\n transform: scale(0);\n transition: transform 0.2s ease;\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"fe1ae3","snapshot":null,"tags":null,"title":"checkbox by Shoh2008","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":770,"cssLen":854,"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 Checkbox\n \n

\n","css":".checkbox-wrapper-37 input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-wrapper-37 .terms-label {\n cursor: pointer;\n display: flex;\n align-items: center;\n color: white;\n}\n\n.checkbox-wrapper-37 .terms-label .label-text {\n margin-left: 10px;\n}\n\n.checkbox-wrapper-37 .checkbox-svg {\n width: 30px;\n height: 30px;\n}\n\n.checkbox-wrapper-37 .checkbox-box {\n fill: #fff;\n stroke: #ff7a00;\n stroke-dasharray: 800;\n stroke-dashoffset: 800;\n transition: stroke-dashoffset 0.6s ease-in;\n}\n\n.checkbox-wrapper-37 .checkbox-tick {\n stroke: #ff7a00;\n stroke-dasharray: 172;\n stroke-dashoffset: 172;\n transition: stroke-dashoffset 0.6s ease-in;\n}\n\n.checkbox-wrapper-37\n input[type=\"checkbox\"]:checked\n + .terms-label\n .checkbox-box,\n.checkbox-wrapper-37\n input[type=\"checkbox\"]:checked\n + .terms-label\n .checkbox-tick {\n stroke-dashoffset: 0;\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"6f153a","snapshot":null,"tags":null,"title":"checkbox by KSAplay","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":561,"cssLen":899,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

\n","css":".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: 25px;\n user-select: none;\n transition: 100ms;\n}\n\n.checkmark {\n top: 0;\n left: 0;\n height: 2em;\n width: 2em;\n transition: 100ms;\n animation: dislike_401 400ms ease;\n}\n\n.container input:checked ~ .checkmark path {\n fill: #1C7DFF;\n stroke-width: 1.2;\n stroke: #212121;\n /*same background color*/\n}\n\n.container input:checked ~ .checkmark {\n animation: like_401 400ms ease;\n}\n\n.container:hover {\n transform: scale(1.1);\n}\n\n@keyframes like_401 {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes dislike_401 {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"e8f7e5","snapshot":null,"tags":null,"title":"checkbox by PriyanshuGupta28","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":1279,"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 Checkbox\n \n

\n\n\n","css":".checkbox-wrapper-65 *,\n .checkbox-wrapper-65 ::after,\n .checkbox-wrapper-65 ::before {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-65 .cbx {\n position: relative;\n display: block;\n float: left;\n width: 18px;\n height: 18px;\n border-radius: 4px;\n background-color: #1c4780;\n background-image: linear-gradient(#0f698d, #1d3c6b);\n box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);\n transition: all 0.15s ease;\n}\n\n.checkbox-wrapper-65 .cbx svg {\n position: absolute;\n top: 3px;\n left: 3px;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: #fff;\n stroke-width: 2;\n stroke-dasharray: 17;\n stroke-dashoffset: 17;\n transform: translate3d(0, 0, 0);\n}\n\n.checkbox-wrapper-65 .cbx + span {\n float: left;\n margin-left: 6px;\n}\n\n.checkbox-wrapper-65 {\n user-select: none;\n}\n\n.checkbox-wrapper-65 label {\n display: inline-block;\n cursor: pointer;\n}\n\n.checkbox-wrapper-65 input[type=\"checkbox\"] {\n display: none;\n visibility: hidden;\n}\n\n.checkbox-wrapper-65 input[type=\"checkbox\"]:checked + .cbx {\n background-color: #606062;\n background-image: linear-gradient(#2584d2, #1d52c1);\n}\n\n.checkbox-wrapper-65 input[type=\"checkbox\"]:checked + .cbx svg {\n stroke-dashoffset: 0;\n transition: all 0.15s ease;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"812451","snapshot":null,"tags":null,"title":"checkbox by JOBOYA","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":128,"cssLen":1070,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n Agree\n\n","css":".checkbox {\n position: relative;\n display: inline-block;\n cursor: pointer;\n font-size: 16px;\n color: #666;\n line-height: 1.5;\n margin-bottom: 20px;\n font-family: Arial, sans-serif;\n user-select: none;\n}\n\n.checkbox input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 30px;\n width: 30px;\n border: 2px solid #666;\n border-radius: 5px;\n transition: all 0.2s ease-in-out;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.checkbox:hover .checkmark {\n transform: translateX(-20px) translateY(-2px) rotate(10deg);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\n}\n\n.checkbox input:checked ~ .checkmark {\n background-color: #666;\n border-color: #666;\n}\n\n.checkbox input:checked ~ .checkmark:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 14px;\n border: solid #fff;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.text {\n margin-left: 40px;\n display: inline-block;\n transition: all 0.2s ease-in-out;\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"1dbb93","snapshot":null,"tags":null,"title":"checkbox by sujeet-12","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1821,"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 animation: jello-horizontal 0.9s both;\n}\n\n.checkmark:hover {\n animation: jello-horizontal 0.9s both;\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 border-radius: 50%;\n background-color: #eee;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: royalblue;\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.25em;\n width: 0.25em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}\n\n@keyframes jello-horizontal {\n 0% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(0.95, 1.05, 1);\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, 0.95, 1);\n transform: scale3d(1.05, 0.95, 1);\n }\n\n 100% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"d0c748","snapshot":null,"tags":null,"title":"checkbox by AKAspidey01","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":231,"cssLen":1157,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n

\n","css":".checkboxtoggler {\n width: 3em;\n display: flex;\n flex-direction: column;\n gap: 0.7em;\n cursor: pointer;\n}\n\n.line-1 {\n background: #df6447;\n height: 0.3em;\n border-radius: 10em;\n transition-duration: 500ms;\n}\n\n.line-2 {\n background: #df6447;\n height: 0.3em;\n border-radius: 10em;\n transition-duration: 500ms;\n}\n\n.line-3 {\n background: #df6447;\n height: 0.3em;\n border-radius: 10em;\n transition-duration: 500ms;\n}\n\n#toggleChecker {\n height: 3em;\n width: 100%;\n display: none;\n}\n\n#toggleChecker:checked + #togglerLable .checkboxtoggler .line-1 {\n -webkit-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);\n -ms-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);\n transform: rotate(45deg) translateY(0.7em) translateX(0.7em);\n}\n\n#toggleChecker:checked + #togglerLable .checkboxtoggler .line-2 {\n -webkit-transform: rotate(-45deg) translateY(0em) translateX(0.1em);\n -ms-transform: rotate(-45deg) translateY(0em) translateX(0.1em);\n transform: rotate(-45deg) translateY(0em) translateX(0.1em);\n}\n\n#toggleChecker:checked + #togglerLable .checkboxtoggler .line-3 {\n transform: scaleX(0);\n transform-origin: left;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"d9f328","snapshot":null,"tags":null,"title":"checkbox by milegelu","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2959,"cssLen":2648,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

ball

\n \n \n \n \n

Game

\n\n","css":".container {\n --UnChacked-color: hsl(0, 0%, 10%);\n --chacked-color: hsl(216, 100%, 60%);\n --font-color: white;\n --chacked-font-color: var(--font-color);\n --icon-size: 1.5em;\n --anim-time: 0.2s;\n --anim-scale: 0.1;\n --base-radius: 0.8em;\n}\n\n.container {\n display: flex;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n fill: var(--font-color);\n color: var(--font-color);\n}\n\n/* Hide the default checkbox */\n.container input {\n display: none;\n}\n\n/* Base custom checkbox */\n.checkmark {\n background: var(--UnChacked-color);\n border-radius: var(--base-radius);\n\n display: flex;\n padding: 0.5em;\n}\n.icon {\n width: var(--icon-size);\n height: auto;\n filter: drop-shadow(0px 2px var(--base-radius) rgba(0, 0, 0, 0.25));\n}\n.name {\n margin: 0 0.25em;\n}\n.Yes {\n width: 0;\n}\n.name.Yes {\n display: none;\n}\n\n/* action custom checkbox */\n.container:hover .checkmark,\n.container:hover .icon,\n.container:hover .name {\n transform: scale(calc(1 + var(--anim-scale)));\n}\n\n.container:active .checkmark,\n.container:active .icon,\n.container:active .name {\n transform: scale(calc(1 - var(--anim-scale) / 2));\n border-radius: calc(var(--base-radius) * 2);\n}\n.checkmark::before {\n content: \"\";\n opacity: 0.5;\n transform: scale(1);\n border-radius: var(--base-radius);\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n}\n.checkmark:hover:before {\n background-color: hsla(0, 0%, 50%, 0.2);\n}\n.container input:checked + .checkmark:before {\n animation: boon calc(var(--anim-time)) ease;\n animation-delay: calc(var(--anim-time) / 2);\n}\n\n/* When the checkbox is checked*/\n.container input:checked + .checkmark {\n --UnChacked-color: var(--chacked-color);\n fill: var(--chacked-font-color);\n color: var(--chacked-font-color);\n}\n\n.container input:checked ~ .checkmark .No {\n width: 0;\n}\n.container input:checked ~ .checkmark .name.No {\n display: none;\n}\n\n.container input:checked ~ .checkmark .Yes {\n width: var(--icon-size);\n}\n.container input:checked ~ .checkmark .name.Yes {\n width: auto;\n display: unset;\n}\n\n/*Animation*/\n.container,\n.checkmark,\n.checkmark:after,\n.icon,\n.checkmark .name {\n transition: all var(--anim-time);\n}\n\n/*Unuse*/\n@keyframes icon-rot {\n 50% {\n transform: rotateZ(180deg) scale(calc(1 - var(--anim-scale)));\n border-radius: 1em;\n }\n to {\n transform: rotate(360deg);\n border-radius: var(--base-radius);\n }\n}\n/*Unuse*/\n@keyframes boo {\n 80% {\n transform: scale(1.4);\n }\n 99% {\n transform: scale(1.7);\n border: 2px solid var(--UnChacked-color);\n }\n to {\n transform: scale(0);\n }\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"483e83","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":482,"cssLen":1534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n border-radius: 50%;\n background-color: white;\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 transition: .3s;\n transform: scale(0);\n border-radius: 50%;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #20c580;\n transform: scale(1);\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.container input:checked ~ .celebrate {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.25em;\n width: 0.30em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}\n\n.container .celebrate {\n position: absolute;\n transform-origin: center;\n animation: kfr-celebrate .4s;\n animation-fill-mode: forwards;\n display: none;\n stroke: #20c580;\n}\n\n@keyframes kfr-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n transform: scale(1.2);\n opacity: 0;\n display: none;\n }\n}"}]}},"actionData":null,"errors":null}