{"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":229,"projects":[{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"1c614d","snapshot":null,"tags":null,"title":"switch by nihad-abbasov","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":124,"jsLen":0,"cssLen":3556,"pureCSS":1,"html":"\n \n

\n\n","css":"/* switch settings 👇 */\n\n.ui-switch {\n /* switch */\n --switch-bg: rgb(135, 150, 165);\n --switch-width: 48px;\n --switch-height: 20px;\n /* circle */\n --circle-diameter: 32px;\n --circle-bg: rgb(232, 89, 15);\n --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);\n}\n\n.ui-switch input {\n display: none;\n}\n\n.slider {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: var(--switch-width);\n height: var(--switch-height);\n background: var(--switch-bg);\n border-radius: 999px;\n position: relative;\n cursor: pointer;\n}\n\n.slider .circle {\n top: calc(var(--circle-inset) * -1);\n left: 0;\n width: var(--circle-diameter);\n height: var(--circle-diameter);\n position: absolute;\n background: var(--circle-bg);\n border-radius: inherit;\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+\");\n background-repeat: no-repeat;\n background-position: center center;\n -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);\n ;\n}\n\n.slider .circle::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.75);\n border-radius: inherit;\n -webkit-transition: all 500ms;\n -o-transition: all 500ms;\n transition: all 500ms;\n opacity: 0;\n}\n\n/* actions */\n\n.ui-switch input:checked+.slider .circle {\n left: calc(100% - var(--circle-diameter));\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=\");\n background-color: rgb(0, 56, 146);\n}\n\n.ui-switch input:active+.slider .circle::before {\n -webkit-transition: 0s;\n -o-transition: 0s;\n transition: 0s;\n opacity: 1;\n width: 0;\n height: 0;\n}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"29ea78","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":738,"jsLen":0,"cssLen":4378,"pureCSS":1,"html":"\n \n

\n","css":".sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0\n}\n\n.relative {\n position: relative\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-8 {\n height: 2rem\n}\n\n.w-20 {\n width: 5rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-rose-400 {\n --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-red-900 {\n --tw-gradient-to: #7f1d1d var(--tw-gradient-to-position)\n}\n\n.shadow-inner {\n --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-gray-900 {\n --tw-shadow-color: #111827;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.ring-gray-900 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity))\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:-left-2::after {\n content: var(--tw-content);\n left: -0.5rem\n}\n\n.after\\:-top-2::after {\n content: var(--tw-content);\n top: -0.5rem\n}\n\n.after\\:flex::after {\n content: var(--tw-content);\n display: flex\n}\n\n.after\\:h-12::after {\n content: var(--tw-content);\n height: 3rem\n}\n\n.after\\:w-12::after {\n content: var(--tw-content);\n width: 3rem\n}\n\n.after\\:items-center::after {\n content: var(--tw-content);\n align-items: center\n}\n\n.after\\:justify-center::after {\n content: var(--tw-content);\n justify-content: center\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:border-4::after {\n content: var(--tw-content);\n border-width: 4px\n}\n\n.after\\:border-gray-900::after {\n content: var(--tw-content);\n --tw-border-opacity: 1;\n border-color: rgb(17 24 39 / var(--tw-border-opacity))\n}\n\n.after\\:bg-gray-50::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.after\\:outline-none::after {\n content: var(--tw-content);\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.peer:checked ~ .peer-checked\\:bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\\:from-emerald-500{--tw-gradient-from:#10b981 var(--tw-gradient-from-position);--tw-gradient-to:rgb(16 185 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.peer:checked ~ .peer-checked\\:to-emerald-900{--tw-gradient-to:#064e3b var(--tw-gradient-to-position)}.peer:checked ~ .peer-checked\\:after\\:translate-x-14::after{content:var(--tw-content);--tw-translate-x:3.5rem;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:focus ~ .peer-focus\\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus ~ .peer-focus\\:ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.peer:focus ~ .peer-focus\\:ring-gray-900{--tw-ring-opacity:1;--tw-ring-color:rgb(17 24 39 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"3167d3","snapshot":null,"tags":null,"title":"switch by Praashoo7","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1466,"jsLen":0,"cssLen":1487,"pureCSS":1,"html":"\n \n \n \n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3.8em;\n height: 3.8em;\n}\n\n.torch {\n margin-top: 0.9em;\n margin-left: 0.95em;\n width: 30px;\n height: 30px;\n transform: rotate(-45deg);\n}\n\n.slider .b {\n position: relative;\n top: -3.3em;\n transform: rotate(270deg);\n}\n\n.slider .bling_85 {\n stroke: #fff;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-dasharray: 3;\n stroke-dashoffset: 15;\n transition: all 0.3s ease;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: .4s;\n border-radius: 50%;\n background-color: rgba(116, 115, 115, 0.2);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.chk_85:checked + .slider {\n animation: tap 0.3s linear forwards;\n}\n\n.chk_85:checked + .slider .bling_85 {\n animation: bling_8561328 0.3s linear forwards;\n animation-delay: 0.2s;\n}\n\n.chk_85:checked + .slider {\n background-color: #FFA133;\n}\n\n.chk_85:focus + .slider {\n box-shadow: 0 0 1px #FFA133;\n}\n\n@keyframes bling_8561328 {\n 50% {\n stroke-dasharray: 3;\n stroke-dashoffset: 12;\n }\n\n 100% {\n stroke-dasharray: 3;\n stroke-dashoffset: 9;\n }\n}\n\n@keyframes tap {\n 50% {\n scale: 0.9;\n }\n\n 100% {\n scale: 1;\n }\n}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"372a8a","snapshot":null,"tags":null,"title":"switch by faxriddin20","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":91,"jsLen":0,"cssLen":960,"pureCSS":1,"html":"\n \n \n\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background: black;\n border-radius: 50px;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2em;\n width: 2em;\n inset: 0;\n background-color: white;\n border-radius: 50px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch input:checked + .slider {\n background: lime;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #0974f1;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.6em);\n}\n"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"ac9d49","snapshot":null,"tags":null,"title":"switch by G4b413l","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":88,"jsLen":0,"cssLen":981,"pureCSS":1,"html":"\n \n \n","css":".switch input {\n display: none;\n}\n\n.switch {\n width: 60px;\n height: 30px;\n position: relative;\n}\n\n.slider {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 30px;\n box-shadow: 0 0 0 2px #777, 0 0 4px #777;\n cursor: pointer;\n border: 4px solid transparent;\n overflow: hidden;\n transition: 0.2s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background-color: #777;\n border-radius: 30px;\n transform: translateX(-30px);\n /*translateX(-(w-h))*/\n transition: 0.2s;\n}\n\ninput:checked + .slider:before {\n transform: translateX(30px);\n /*translateX(w-h)*/\n background-color: limeGreen;\n}\n\ninput:checked + .slider {\n box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;\n}\n\n.switch200 .slider:before {\n width: 200%;\n transform: translateX(-82px);\n /*translateX(-(w-h))*/\n}\n\n.switch200 input:checked + .slider:before {\n background-color: red;\n}\n\n.switch200 input:checked + .slider {\n box-shadow: 0 0 0 2px red, 0 0 8px red;\n}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"ccb6df","snapshot":null,"tags":null,"title":"switch by DawidMazurek4","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":88,"jsLen":0,"cssLen":1095,"pureCSS":1,"html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgb(0, 0, 0);\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: rgb(219, 198, 2);\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #000000;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #000000;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}\n\n.slider::after {\n width: 20px;\n height: 20px;\n left: 20%;\n top: 10%;\n border-radius: 50%;\n position: absolute;\n content: \"\";\n background-color: rgb(0, 0, 0);\n transition: ease 0.4s;\n}\n\ninput:checked + .slider::after {\n left: 80%;\n width: 0px;\n height: 0px;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"033930","snapshot":null,"tags":null,"title":"switch by AbanoubMagdy1","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":88,"jsLen":0,"cssLen":833,"pureCSS":1,"html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n transition: .3s cubic-bezier(0,2.18,.64,.69);\n}\n\ninput:checked + .slider {\n background-color: #3bd826;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #3bd826;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"097889","snapshot":null,"tags":null,"title":"switch by KINGFRESS","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":134,"jsLen":0,"cssLen":1419,"pureCSS":1,"html":"\n \n \n \n \n","css":"/* Dark Mode Only ;) */\n\n/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: .5em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #5B5B5B;\n transition: .4s;\n border-radius: 30px;\n display: flex;\n align-items: center;\n}\n\n.slider .circle {\n background-color: #212121;\n height: 3em;\n width: 3em;\n border-radius: 50%;\n position: absolute;\n left: 0;\n transform: translateX(-50%);\n transition: .4s;\n}\n\n.slider .circle::before {\n position: absolute;\n content: \"\";\n height: 2.3em;\n width: 2.3em;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(182, 182, 182);\n transition: .4s;\n}\n\n.slider .circle::after {\n content: '';\n background-color: #212121;\n height: 1.7em;\n width: 1.7em;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: .4s;\n}\n\ninput:checked + .slider .circle {\n transform: translateX(2em);\n transition: .4s;\n}\n\ninput:checked + .slider .circle::before {\n background-color: #e1e1e1;\n transition: .4s;\n}\n\ninput:checked + .slider .circle::after {\n width: 0;\n height: 0;\n transition: .4s;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"3083e7","snapshot":null,"tags":null,"title":"switch by alexruix","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":92,"jsLen":0,"cssLen":916,"pureCSS":1,"html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 30px;\n box-shadow: 0 0 0 2px #f32f2150;\n border: 4px solid transparent;\n overflow: hidden;\n transition: .4s;\n background: transparent;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n border-radius: 30px;\n background-color: #f32f21;\n transform: translateX(-50%);\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #f7b48e;\n}\n\ninput:focus:checked + .slider {\n box-shadow: 0 0 0 2px #f32f21, 0 0 4px #777;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"539b70","snapshot":null,"tags":null,"title":"switch by xantha01","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":131,"jsLen":0,"cssLen":1569,"pureCSS":1,"html":" \n \n

\n ","css":"#checkbox {\n display: none;\n}\n\n.switch {\n position: relative;\n width: 70px;\n height: 70px;\n background-color: rgb(255, 5, 5);\n border-radius: 50%;\n z-index: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid rgb(255, 126, 126);\n box-shadow: 0px 0px 3px rgb(248, 248, 248) inset;\n}\n\n.powersign {\n position: relative;\n width: 30%;\n height: 30%;\n border: 4px solid rgb(248, 248, 248);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.powersign::before {\n content: \"\";\n width: 8px;\n height: 60%;\n background-color: rgb(248, 248, 248);\n position: absolute;\n top: -60%;\n z-index: 2;\n}\n\n.powersign::after {\n content: \"\";\n width: 3px;\n height: 60%;\n background-color: rgb(255, 5, 5);\n position: absolute;\n top: -60%;\n z-index: 3;\n}\n\n#checkbox:checked + .switch .powersign {\n border: 4px solid rgb(255, 255, 255);\n box-shadow: 0px 0px 10px rgb(151, 243, 255),\n 0px 0px 5px rgb(151, 243, 255) inset;\n}\n\n#checkbox:checked + .switch .powersign::after {\n background-color: rgb(150, 255, 194);\n}\n\n#checkbox:checked + .switch {\n box-shadow: 0px 0px 1px rgb(150, 255, 194) inset,\n 0px 0px 2px rgb(150, 255, 194) inset,\n 0px 0px 10px rgb(150, 255, 194) inset,\n 0px 0px 40px rgb(150, 255, 194),\n 0px 0px 100px rgb(150, 255, 194),\n 0px 0px 5px rgb(150, 255, 194);\n border: 2px solid rgb(255, 255, 255);\n background-color: rgb(136, 219, 150);\n}\n\n#checkbox:checked + .switch .powersign::before {\n background-color: rgb(255, 255, 255);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"548c8c","snapshot":null,"tags":null,"title":"switch by KshitijAdhikaree","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":99,"jsLen":0,"cssLen":1027,"pureCSS":1,"html":"\n \n \n\n","css":"/* The switch - the box around the slider */\n.switch-container {\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch-container input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.switch-container .slider {\n --background: linear-gradient(to right, #090613ef, #18151f);\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--background);\n transition: background-color 0.5s;\n border-radius: 30px;\n}\n\n.switch-container .slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 50%;\n left: 10%;\n bottom: 15%;\n box-shadow: inset 15px -4px 0px 15px #f8ea27;\n background: var(--background);\n transition: transform 0.5s, box-shadow 0.5s;\n}\n\n.switch-container input:checked + .slider {\n background-color: #000;\n}\n\n.switch-container input:checked + .slider:before {\n transform: translateX(100%);\n box-shadow: inset 8px -4px 0px 0px #f8f8f4;\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"818833","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":224,"jsLen":0,"cssLen":839,"pureCSS":1,"html":" \n \n

\n \n\n","css":"#checkbox {\n display: none;\n}\n\n.toggle {\n position: relative;\n width: 40px;\n height: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition-duration: .3s;\n}\n\n.bars {\n width: 100%;\n height: 4px;\n background-color: rgb(76, 189, 151);\n border-radius: 5px;\n transition-duration: .3s;\n}\n\n#checkbox:checked + .toggle .bars {\n margin-left: 13px;\n}\n\n#checkbox:checked + .toggle #bar2 {\n transform: rotate(135deg);\n margin-left: 0;\n transform-origin: center;\n transition-duration: .3s;\n}\n\n#checkbox:checked + .toggle #bar1 {\n transform: rotate(45deg);\n transition-duration: .3s;\n transform-origin: left center;\n}\n\n#checkbox:checked + .toggle #bar3 {\n transform: rotate(-45deg);\n transition-duration: .3s;\n transform-origin: left center;\n}\n"}]}},"actionData":null,"errors":null}