Checkmark

{"loaderData":{"0":null,"0-3":{"total":7517,"projects":[{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"4279bb","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.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(91, 255, 195);\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:56.000Z","isPrivate":0,"projectId":"05a763","snapshot":null,"tags":null,"title":"checkbox by aadium","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":831,"cssLen":1007,"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

","css":".container {\n width: 120px;\n height: 120px;\n position: relative;\n border-radius: 50%;\n}\n\n.play-btn {\n position: absolute;\n appearance: none;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: conic-gradient(#ff6347, #ff6347);\n cursor: pointer;\n outline: none;\n}\n\n.play-btn::before {\n content: \"\";\n position: absolute;\n width: 93%;\n height: 93%;\n background-color: #000;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.play-btn:checked {\n animation: borderAnimate 700ms ease-in-out 1;\n animation-fill-mode: forwards;\n}\n\n@keyframes borderAnimate {\n 0% {\n transform: rotate(0);\n background: conic-gradient(#ff6347, transparent 20%);\n }\n\n 80% {\n background: conic-gradient(#ff6347, transparent 90%);\n }\n\n 100% {\n transform: rotate(360deg);\n background: conic-gradient(#ff6347, #ff6347);\n }\n}\n\n.play-icon {\n position: absolute;\n width: 40px;\n height: 40px;\n left: 60%;\n top: 50%;\n background-color: #ff6347;\n transform: translate(-60%, -50%) rotate(90deg);\n clip-path: polygon(50% 15%, 0% 100%, 100% 100%);\n transition: all 400ms ease-in-out;\n cursor: pointer;\n}\n\n.play-btn:checked + .play-icon {\n clip-path: polygon(0 100%, 0% 100%, 100% 100%);\n}\n\n.pause-icon {\n position: absolute;\n width: 40px;\n height: 40px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n}\n\n.pause-icon::before {\n content: \"\";\n position: absolute;\n width: 0%;\n height: 100%;\n background-color: #ff6347;\n left: 0;\n}\n\n.pause-icon::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 100%;\n background-color: #ff6347;\n right: 0;\n}\n\n.play-btn:checked ~ .pause-icon::before {\n animation: reveal 300ms ease-in-out 350ms 1;\n animation-fill-mode: forwards;\n}\n\n.play-btn:checked ~ .pause-icon::after {\n animation: reveal 300ms ease-in-out 600ms 1;\n animation-fill-mode: forwards;\n}\n\n@keyframes reveal {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 35%;\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"46ed61","snapshot":null,"tags":null,"title":"checkbox by Javierrocadev","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":835,"cssLen":3662,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n\n","css":".relative{position:relative}.left-2{left:0.5rem}.top-2{top:0.5rem}.z-20{z-index:20}.flex{display:flex}.hidden{display:none}.h-12{height:3rem}.h-8{height:2rem}.w-12{width:3rem}.w-8{width:2rem}.scale-0{--tw-scale-x:0;--tw-scale-y:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-emerald-800{--tw-gradient-from:#065f46 var(--tw-gradient-from-position);--tw-gradient-to:rgb(6 95 70 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-emerald-700{--tw-gradient-to:rgb(4 120 87 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #047857 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-emerald-500{--tw-gradient-to:#10b981 var(--tw-gradient-to-position)}.opacity-0{opacity:0}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-0::before{content:var(--tw-content);right:0px}.before\\:h-8::before{content:var(--tw-content);height:2rem}.before\\:w-8::before{content:var(--tw-content);width:2rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\\:blur-sm::before{content:var(--tw-content);--tw-blur:blur(4px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-1::after{content:var(--tw-content);bottom:0.25rem}.after\\:left-1::after{content:var(--tw-content);left:0.25rem}.after\\:z-10::after{content:var(--tw-content);z-index:10}.after\\:h-4::after{content:var(--tw-content);height:1rem}.after\\:w-4::after{content:var(--tw-content);width:1rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\\:blur-sm::after{content:var(--tw-content);--tw-blur:blur(4px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.peer:checked ~ .peer-checked\\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked ~ .peer-checked\\:bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\\:opacity-100{opacity:1}.peer:checked ~ .peer-checked\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.peer:checked ~ .peer-checked\\:duration-300{transition-duration:300ms}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"1d0040","snapshot":null,"tags":null,"title":"checkbox by krlozCJ","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":411,"cssLen":1064,"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":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n display: none;\n color: white;\n}\n\n.container {\n --size: 50px;\n width: var(--size);\n display: block;\n height: var(--size);\n background-color: #191A1E;\n border-radius: 100%;\n cursor: pointer;\n padding: 5px;\n color: white;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n}\n\n.container .checkmark {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n transition: all ease 0.3s;\n padding: 8px;\n}\n\n.container .checkmark svg {\n opacity: 0;\n transition: all ease 0.3s;\n}\n\n.container input:checked + .checkmark {\n box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;\n}\n\n.container input:checked + .checkmark svg {\n opacity: 1;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"52008e","snapshot":null,"tags":null,"title":"checkbox by Galahhad","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":2980,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* checkbox settings 👇 */\n\n.ui-checkbox {\n --primary-color: #1677ff;\n --secondary-color: #fff;\n --primary-hover-color: #4096ff;\n /* checkbox */\n --checkbox-diameter: 20px;\n --checkbox-border-radius: 5px;\n --checkbox-border-color: #d9d9d9;\n --checkbox-border-width: 1px;\n --checkbox-border-style: solid;\n /* checkmark */\n --checkmark-size: 1.2;\n}\n\n.ui-checkbox, \n.ui-checkbox *, \n.ui-checkbox *::before, \n.ui-checkbox *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.ui-checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: var(--checkbox-diameter);\n height: var(--checkbox-diameter);\n border-radius: var(--checkbox-border-radius);\n background: var(--secondary-color);\n border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);\n -webkit-transition: all 0.3s;\n -o-transition: all 0.3s;\n transition: all 0.3s;\n cursor: pointer;\n position: relative;\n}\n\n.ui-checkbox::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);\n box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);\n border-radius: inherit;\n opacity: 0;\n -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.ui-checkbox::before {\n top: 40%;\n left: 50%;\n content: \"\";\n position: absolute;\n width: 4px;\n height: 7px;\n border-right: 2px solid var(--secondary-color);\n border-bottom: 2px solid var(--secondary-color);\n -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);\n -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);\n transform: translate(-50%, -50%) rotate(45deg) scale(0);\n opacity: 0;\n -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;\n -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;\n transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;\n}\n\n/* actions */\n\n.ui-checkbox:hover {\n border-color: var(--primary-color);\n}\n\n.ui-checkbox:checked {\n background: var(--primary-color);\n border-color: transparent;\n}\n\n.ui-checkbox:checked::before {\n opacity: 1;\n -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));\n -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));\n transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));\n -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n}\n\n.ui-checkbox:active:not(:checked)::after {\n -webkit-transition: none;\n -o-transition: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n transition: none;\n opacity: 1;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"2f05e9","snapshot":null,"tags":null,"title":"checkbox by bociKond","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1356,"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 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"}]}},"actionData":null,"errors":null}