{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":139,"projects":[{"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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1095,"jsLen":0,"cssLen":859,"pureCSS":1,"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":"1d9abd","snapshot":null,"tags":null,"title":"checkbox by Praashoo7","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1318,"jsLen":0,"cssLen":1605,"pureCSS":1,"html":"\n \n

\n \n

Liked!

\n","css":"/* Hide the default checkbox */\n.container input {\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: 3em;\n width: 3em;\n background-color: #171717;\n border-radius: 10px;\n transition: .2s ease-in-out;\n z-index: 2;\n}\n\n.like {\n position: relative;\n font-size: 0.8em;\n top: -3.5em;\n text-align: center;\n z-index: -1;\n}\n\n.icon {\n margin: 0.2em;\n fill: white;\n transition: .4s ease-in-out;\n}\n\n.checkmark:hover {\n background-color: white;\n}\n\n.checkmark:hover .icon {\n fill: black;\n transform: rotate(-8deg);\n transform-origin: bottom left;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: limegreen;\n}\n\n.container input:checked ~ .like {\n color: white;\n animation: 0.6s up_3951;\n}\n\n.container input:checked ~ .checkmark .icon {\n fill: white;\n transform: none;\n animation: 0.5s jump_3951;\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@keyframes up_3951 {\n 100% {\n transform: translateY(-2em);\n }\n}\n\n@keyframes jump_3951 {\n 50% {\n transform-origin: center;\n transform: translateY(-0.5em) rotate(-8deg);\n }\n\n 100% {\n transform-origin: center;\n transform: translateY(0em);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"269adf","snapshot":null,"tags":null,"title":"checkbox by mscholz-dev","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":507,"jsLen":0,"cssLen":1021,"pureCSS":1,"html":"

\n \n \n \n Checkbox\n \n

\n\n\n","css":"/* add this to your :root variables */\n.checkbox {\n --light: rgba(207, 205, 205, 0.425);\n --primary-color: #8c00ff;\n --duration: 0.3s;\n --ease: ease-in-out;\n}\n\n/* hide checkbox */\n.checkbox input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox label {\n align-items: center;\n cursor: pointer;\n display: flex;\n}\n\n.checkbox label span {\n margin-left: 8px;\n}\n\n.checkbox svg {\n height: 30px;\n width: 30px;\n}\n\n/* svg rectangle property */\n.checkbox svg > rect {\n fill: var(--light);\n stroke: #8c00ff;\n /* responsive values */\n stroke-dasharray: 400%;\n stroke-dashoffset: 400%;\n transition: var(--duration) stroke-dashoffset var(--ease);\n}\n\n/* svg check property */\n.checkbox svg path {\n stroke: var(--primary-color);\n /* responsive values */\n stroke-dasharray: 100%;\n stroke-dashoffset: 100%;\n transition: var(--duration) stroke-dashoffset var(--ease);\n}\n\n.checkbox input[type=\"checkbox\"]:checked + label svg > rect,\n .checkbox input[type=\"checkbox\"]:checked + label svg path {\n stroke-dashoffset: 0;\n}\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":211,"jsLen":0,"cssLen":940,"pureCSS":1,"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":"6dd50b","snapshot":null,"tags":null,"title":"checkbox by barisdogansutcu","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":522,"jsLen":0,"cssLen":956,"pureCSS":1,"html":"

\n \n

\n \n \n \n \n

\n","css":".volume {\n width: 60px;\n height: 60px;\n border-radius: 100%;\n background-color: rgb(205, 191, 247);\n overflow: hidden;\n position: relative;\n}\n.volume-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s ease;\n overflow: hidden;\n position: relative;\n}\n.volume-input {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n z-index: 999;\n}\n.volume-icon:before {\n content: \"\";\n display: flex;\n width: 0px;\n height: 0px;\n border-radius: 100%;\n transition: all 0.2s ease;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(32, 33, 36);\n}\n.volume-input:checked + .volume-icon:before {\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n}\n.volume-svg {\n z-index: 2;\n color: rgb(32, 33, 36);\n height: 30px;\n width: 30px;\n}\n.volume-input:checked + .volume-icon svg {\n color: rgb(255, 255, 255);\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":512,"jsLen":0,"cssLen":2704,"pureCSS":1,"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":"90d23d","snapshot":null,"tags":null,"title":"checkbox by boryanakrasteva","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":150,"jsLen":0,"cssLen":1264,"pureCSS":1,"html":"\n \n \n \n","css":"/* Customize the label (the checkbox-btn) */\n.checkbox-btn {\n display: block;\n position: relative;\n padding-left: 30px;\n margin-bottom: 10px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n/* Hide the browser's default checkbox */\n.checkbox-btn input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.checkbox-btn label {\n cursor: pointer;\n font-size: 14px;\n}\n/* Create a custom checkbox */\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 18px;\n width: 18px;\n border-radius: 5px;\n border: 3px solid #1663a7;\n}\n.checkbox-btn input:checked ~ .checkmark {\n background-color: transparent;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n visibility: hidden;\n opacity: 0;\n left: 3.5px;\n top: 0.5px;\n width: 3.5px;\n height: 6px;\n border: 2.5px solid #1663a7;\n border-width: 0 2.5px 2.5px 0;\n transition: .3s ease-in-out;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n/* Show the checkmark when checked */\n.checkbox-btn input:checked ~ .checkmark:after {\n visibility: visible;\n opacity: 1;\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":110,"jsLen":0,"cssLen":1073,"pureCSS":1,"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}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"97ffc7","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1093,"jsLen":0,"cssLen":928,"pureCSS":1,"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 .flag-regular {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .flag-solid {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .flag-regular {\n display: none;\n}\n\n.container input:checked ~ .flag-solid {\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(0deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(-10deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"a3f7f2","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1031,"jsLen":0,"cssLen":932,"pureCSS":1,"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 .clipboard {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .clipboard-check {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .clipboard {\n display: none;\n}\n\n.container input:checked ~ .clipboard-check {\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(0deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(-10deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"d67055","snapshot":null,"tags":null,"title":"checkbox by KSAplay","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":479,"jsLen":0,"cssLen":863,"pureCSS":1,"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: 20px;\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_effect 400ms ease;\n}\n\n.container input:checked ~ .checkmark path {\n fill: #FF5353;\n stroke-width: 0;\n}\n\n.container input:checked ~ .checkmark {\n animation: like_effect 400ms ease;\n}\n\n.container:hover {\n transform: scale(1.1);\n}\n\n@keyframes like_effect {\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_effect {\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:03:58.000Z","isPrivate":0,"projectId":"ff5e96","snapshot":null,"tags":null,"title":"checkbox by Smit-Prajapati","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":41,"jsLen":0,"cssLen":793,"pureCSS":1,"html":"\n","css":".checkbox {\n appearance: none;\n width: 30px;\n aspect-ratio: 1;\n border-radius: 8px;\n border: 2px solid black;\n position: relative;\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox::before {\n font-family: \"Quicksand\", sans-serif;\n position: absolute;\n bottom: -4px;\n left: 1px;\n content: \"✔\";\n font-size: 40px;\n color: rgb(255, 153, 0);\n transform: scale(0);\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox:checked::before {\n animation: zoom 0.5s ease-in-out;\n transform: scale(1);\n}\n\n@keyframes zoom {\n 0% {\n transform: scale(0);\n }\n\n 20% {\n transform: scale(1.5);\n }\n\n 40% {\n transform: scale(0.5);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 70% {\n transform: scale(1.2);\n }\n\n 90% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}"}]}},"actionData":null,"errors":null}