Flip Checkbox

[{"id":"65072c44-cf77-46f5-8e16-86779c6bb5d2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9886ebce-8d42-4542-aab1-8968e0748c08","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.checkbox-container {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\\n\\n.checkbox {\\n display: none;\\n}\\n\\n.checkbox-label {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n cursor: pointer;\\n}\\n\\n.checkbox-flip {\\n width: 60px;\\n height: 60px;\\n perspective: 1000px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: relative;\\n transition:\\n transform 0.4s ease,\\n box-shadow 0.3s ease;\\n}\\n\\n.checkbox-front,\\n.checkbox-back {\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-radius: 12px;\\n backface-visibility: hidden;\\n transition: transform 0.3s ease;\\n}\\n\\n.checkbox-front {\\n background: linear-gradient(135deg, #22c55e, #16a34a);\\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\n transform: rotateY(0deg);\\n}\\n\\n.checkbox-back {\\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\n transform: rotateY(180deg);\\n}\\n\\n.checkbox-wrapper:hover .checkbox-flip {\\n transform: scale(1.1);\\n transition: transform 0.4s ease-out;\\n}\\n\\n.checkbox:checked + .checkbox-label .checkbox-front {\\n transform: rotateY(180deg);\\n}\\n\\n.checkbox:checked + .checkbox-label .checkbox-back {\\n transform: rotateY(0deg);\\n}\\n\\n.checkbox:focus + .checkbox-label .checkbox-flip {\\n box-shadow:\\n 0 0 15px rgba(54, 181, 73, 0.7),\\n 0 0 20px rgba(0, 193, 212, 0.4);\\n}\\n\\n.icon-path {\\n stroke: white;\\n stroke-width: 2;\\n fill: transparent;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .checkbox-flip,\\n .checkbox-front,\\n .checkbox-back {\\n transition: none;\\n }\\n\\n .checkbox-wrapper:hover .checkbox-flip {\\n transform: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Flip Checkbox\\n \\n \\n \\n

\\n

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

\\n

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

\\n\\n

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

\\n

\\n \\n

\\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"5cce1cf4-1745-424a-8e26-920e5aef3a22","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c531c675-7bc9-4c1b-a8c1-7de9d79cd2a6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"6b8b1126-57a3-44ba-8cf6-24d00ae4b183","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

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

\\n

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

\\n\\n

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

\\n

\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9235ff2f-4bb0-4259-8973-9cd0082779fc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"a1538e40-b433-430a-af1a-81cdc22a2b86","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.checkbox-container {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\\n\\n.checkbox {\\n display: none;\\n}\\n\\n.checkbox-label {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n cursor: pointer;\\n}\\n\\n.checkbox-flip {\\n width: 60px;\\n height: 60px;\\n perspective: 1000px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: relative;\\n transition:\\n transform 0.4s ease,\\n box-shadow 0.3s ease;\\n}\\n\\n.checkbox-front,\\n.checkbox-back {\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-radius: 12px;\\n backface-visibility: hidden;\\n transition: transform 0.3s ease;\\n}\\n\\n.checkbox-front {\\n background: linear-gradient(135deg, #22c55e, #16a34a);\\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\n transform: rotateY(0deg);\\n}\\n\\n.checkbox-back {\\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\n transform: rotateY(180deg);\\n}\\n\\n.checkbox-wrapper:hover .checkbox-flip {\\n transform: scale(1.1);\\n transition: transform 0.4s ease-out;\\n}\\n\\n.checkbox:checked + .checkbox-label .checkbox-front {\\n transform: rotateY(180deg);\\n}\\n\\n.checkbox:checked + .checkbox-label .checkbox-back {\\n transform: rotateY(0deg);\\n}\\n\\n.checkbox:focus + .checkbox-label .checkbox-flip {\\n box-shadow:\\n 0 0 15px rgba(54, 181, 73, 0.7),\\n 0 0 20px rgba(0, 193, 212, 0.4);\\n}\\n\\n.icon-path {\\n stroke: white;\\n stroke-width: 2;\\n fill: transparent;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .checkbox-flip,\\n .checkbox-front,\\n .checkbox-back {\\n transition: none;\\n }\\n\\n .checkbox-wrapper:hover .checkbox-flip {\\n transform: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a326fac9-b529-46f6-95a1-6a55f82e37c9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"dc4d722d-0eb5-465e-ad52-22c227533f62","type":"divider","props":{},"children":[]},{"id":"a6459385-9fb3-4a51-ba58-af4f9e66173b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1fdfdf04-8451-4f61-90f4-f63ae8470c3b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"2794b819-dbe8-4c90-ac5a-bdeed69979ff","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a flip checkbox. It shows a green front face with a plus icon, then flips to a blue back face with a check icon when checked.","styles":{}}],"children":[]},{"id":"8ea6a34b-dffe-4711-b107-0e83bed61b44","type":"procode","props":{"code":".checkbox-front {\n background: linear-gradient(135deg, #22c55e, #16a34a);\n}\n\n.checkbox-back {\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\n}","language":"javascript","filename":"","files":"[{\"id\":\"aiiy9usjx\",\"name\":\"code\",\"code\":\".checkbox-front {\\n background: linear-gradient(135deg, #22c55e, #16a34a);\\n}\\n\\n.checkbox-back {\\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"98e675c9-2978-4bd8-8dc0-dadab031f558","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The checkbox is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the checkbox in the middle.","styles":{}}],"children":[]},{"id":"bbc6da52-a1dd-402b-a268-fc0eb3fe1cf6","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s6059sxuo\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78c9db9d-8f59-43bb-b72a-8a72fca03fa3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Container\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".checkbox-container","styles":{"code":true}},{"type":"text","text":" uses Flexbox to center the checkbox wrapper.","styles":{}}],"children":[]},{"id":"9cd94f89-d103-47fb-84ea-917f0abe13e2","type":"procode","props":{"code":".checkbox-container {\n display: flex;\n justify-content: center;\n align-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wvrkd304f\",\"name\":\"code\",\"code\":\".checkbox-container {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30fbdd52-9f02-4fae-8b38-979fe18ef442","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Checkbox Input\n","styles":{"bold":true}},{"type":"text","text":"The native checkbox input is hidden with ","styles":{}},{"type":"text","text":"display: none","styles":{"code":true}},{"type":"text","text":", but it still controls the checked state through the label.","styles":{}}],"children":[]},{"id":"4d9a0a3c-93ff-41a3-a324-fa698e378007","type":"procode","props":{"code":".checkbox {\n display: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qbpyelqv0\",\"name\":\"code\",\"code\":\".checkbox {\\n display: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"174c6784-2595-4fed-aafc-0b67d572b1b1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Clickable Label\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".checkbox-label","styles":{"code":true}},{"type":"text","text":" is connected to the input using ","styles":{}},{"type":"text","text":"for=\"checkbox\"","styles":{"code":true}},{"type":"text","text":". Clicking the label toggles the hidden checkbox.","styles":{}}],"children":[]},{"id":"acae58ba-dfde-4762-b8fd-df1f713c24dc","type":"procode","props":{"code":"\n\n\n ...\n","language":"javascript","filename":"","files":"[{\"id\":\"0rujtx8bz\",\"name\":\"code\",\"code\":\"\\n\\n\\n ...\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae0b80d1-ffe8-4974-bdae-d7b17c22895b","type":"procode","props":{"code":".checkbox-label {\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"p60zzxo44\",\"name\":\"code\",\"code\":\".checkbox-label {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9a13959-7794-4878-a392-73929fc97dc5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flip Wrapper\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".checkbox-flip","styles":{"code":true}},{"type":"text","text":" is the main square wrapper. It has ","styles":{}},{"type":"text","text":"perspective: 1000px","styles":{"code":true}},{"type":"text","text":" so the front and back faces can rotate in 3D.","styles":{}}],"children":[]},{"id":"1a9579a4-7951-41e3-96a4-9f7077b1d425","type":"procode","props":{"code":".checkbox-flip {\n width: 60px;\n height: 60px;\n perspective: 1000px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n transition:\n transform 0.4s ease,\n box-shadow 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"cj5rbacss\",\"name\":\"code\",\"code\":\".checkbox-flip {\\n width: 60px;\\n height: 60px;\\n perspective: 1000px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: relative;\\n transition:\\n transform 0.4s ease,\\n box-shadow 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"610ce033-f392-4996-aa22-5e7c6732af75","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Front And Back Faces\n","styles":{"bold":true}},{"type":"text","text":"Both faces are positioned absolutely on top of each other. ","styles":{}},{"type":"text","text":"backface-visibility: hidden","styles":{"code":true}},{"type":"text","text":" hides the back side during rotation.","styles":{}}],"children":[]},{"id":"bf3d9e23-c8e0-4e5c-971f-29320772ca07","type":"procode","props":{"code":".checkbox-front,\n.checkbox-back {\n width: 100%;\n height: 100%;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 12px;\n backface-visibility: hidden;\n transition: transform 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zreop7t6q\",\"name\":\"code\",\"code\":\".checkbox-front,\\n.checkbox-back {\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-radius: 12px;\\n backface-visibility: hidden;\\n transition: transform 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"83f2eddd-7a67-4173-98be-9e47b90c98f8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Front Face\n","styles":{"bold":true}},{"type":"text","text":"The front face starts visible with ","styles":{}},{"type":"text","text":"rotateY(0deg)","styles":{"code":true}},{"type":"text","text":". It uses a green gradient and contains the plus icon.","styles":{}}],"children":[]},{"id":"33c7d20a-f657-4218-aadd-83845f366104","type":"procode","props":{"code":".checkbox-front {\n background: linear-gradient(135deg, #22c55e, #16a34a);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transform: rotateY(0deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"qxamf2tha\",\"name\":\"code\",\"code\":\".checkbox-front {\\n background: linear-gradient(135deg, #22c55e, #16a34a);\\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\n transform: rotateY(0deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1b68af5-c710-4ddf-814d-7b7df103c97d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Back Face\n","styles":{"bold":true}},{"type":"text","text":"The back face starts hidden by rotating ","styles":{}},{"type":"text","text":"180deg","styles":{"code":true}},{"type":"text","text":". It uses a blue gradient and contains the check icon.","styles":{}}],"children":[]},{"id":"e6b0c4a4-5390-44ef-b3a8-b0e8f9ce4836","type":"procode","props":{"code":".checkbox-back {\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transform: rotateY(180deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"dyo8ljxhv\",\"name\":\"code\",\"code\":\".checkbox-back {\\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\n transform: rotateY(180deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56ba4d6e-a8bc-452f-a920-3ad0ea3d64b4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Scale\n","styles":{"bold":true}},{"type":"text","text":"On hover, the entire flip square scales up slightly.","styles":{}}],"children":[]},{"id":"00bb7fff-b62d-4900-a70b-e01099725c3c","type":"procode","props":{"code":".checkbox-wrapper:hover .checkbox-flip {\n transform: scale(1.1);\n transition: transform 0.4s ease-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9l0zhrc73\",\"name\":\"code\",\"code\":\".checkbox-wrapper:hover .checkbox-flip {\\n transform: scale(1.1);\\n transition: transform 0.4s ease-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"42c64c53-fb55-4f84-b101-24f6e18abdb7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Front Rotation\n","styles":{"bold":true}},{"type":"text","text":"When the checkbox is checked, the front face rotates away to ","styles":{}},{"type":"text","text":"180deg","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a035c154-7213-45d3-98a1-9abd1d9fe73b","type":"procode","props":{"code":".checkbox:checked + .checkbox-label .checkbox-front {\n transform: rotateY(180deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"5u5a5e66y\",\"name\":\"code\",\"code\":\".checkbox:checked + .checkbox-label .checkbox-front {\\n transform: rotateY(180deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f972cb0e-636e-4b12-9c4a-ae5bb07de259","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Back Rotation\n","styles":{"bold":true}},{"type":"text","text":"When the checkbox is checked, the back face rotates into view at ","styles":{}},{"type":"text","text":"0deg","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"36adfd93-b3d3-4368-930b-ae69a720b401","type":"procode","props":{"code":".checkbox:checked + .checkbox-label .checkbox-back {\n transform: rotateY(0deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"5lu9tabwv\",\"name\":\"code\",\"code\":\".checkbox:checked + .checkbox-label .checkbox-back {\\n transform: rotateY(0deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0dc15a7c-d22c-4aca-9260-f2e3c5b7cdb5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Glow\n","styles":{"bold":true}},{"type":"text","text":"When the checkbox receives focus, the flip wrapper gets a green-blue glow shadow.","styles":{}}],"children":[]},{"id":"8d468c27-2125-408c-81b4-7c6e7b375294","type":"procode","props":{"code":".checkbox:focus + .checkbox-label .checkbox-flip {\n box-shadow:\n 0 0 15px rgba(54, 181, 73, 0.7),\n 0 0 20px rgba(0, 193, 212, 0.4);\n}","language":"javascript","filename":"","files":"[{\"id\":\"064fnqffb\",\"name\":\"code\",\"code\":\".checkbox:focus + .checkbox-label .checkbox-flip {\\n box-shadow:\\n 0 0 15px rgba(54, 181, 73, 0.7),\\n 0 0 20px rgba(0, 193, 212, 0.4);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"42e44893-f12f-4533-b1d7-d66b47731d3d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Path Style\n","styles":{"bold":true}},{"type":"text","text":"The SVG paths use a white stroke and transparent fill. This makes the plus and check icons look outlined.","styles":{}}],"children":[]},{"id":"895f3508-51c6-481c-b3f8-cdec75a981b7","type":"procode","props":{"code":".icon-path {\n stroke: white;\n stroke-width: 2;\n fill: transparent;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hl45omx9d\",\"name\":\"code\",\"code\":\".icon-path {\\n stroke: white;\\n stroke-width: 2;\\n fill: transparent;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"29c464a2-e554-40dc-aa9f-5f5b0fde5eab","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main interaction flow. The checkbox state rotates the front face out and the back face in.","styles":{}}],"children":[]},{"id":"fafba98b-d7d3-4873-8b1a-6972890c1eec","type":"procode","props":{"code":".checkbox:checked + .checkbox-label .checkbox-front {\n transform: rotateY(180deg);\n}\n\n.checkbox:checked + .checkbox-label .checkbox-back {\n transform: rotateY(0deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"uyg6kwajv\",\"name\":\"code\",\"code\":\".checkbox:checked + .checkbox-label .checkbox-front {\\n transform: rotateY(180deg);\\n}\\n\\n.checkbox:checked + .checkbox-label .checkbox-back {\\n transform: rotateY(0deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"358bb21b-e02b-4260-b738-fa159b73cc2f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"+ .checkbox-label","styles":{"code":true}},{"type":"text","text":" Works\n","styles":{"bold":true}},{"type":"text","text":"The label comes directly after the checkbox input. Because of that, CSS can use the adjacent sibling selector ","styles":{}},{"type":"text","text":"+","styles":{"code":true}},{"type":"text","text":" to style the flip faces based on the checked state.","styles":{}}],"children":[]},{"id":"4af7f136-0740-4c91-819c-77036a8eae24","type":"procode","props":{"code":"\n\n\n

...

\n","language":"javascript","filename":"","files":"[{\"id\":\"9nb8vpgwj\",\"name\":\"code\",\"code\":\"\\n\\n\\n

\\n

...

\\n

...

\\n

\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"852bf5ea-6f39-4df7-a19c-f8bd02df5cea","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"backface-visibility: hidden","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"During the 3D rotation, each face has a back side. This property hides the reverse side so the flip looks clean.","styles":{}}],"children":[]},{"id":"30174f82-e464-41a9-9170-9ab2a9cd319c","type":"procode","props":{"code":".checkbox-front,\n.checkbox-back {\n backface-visibility: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"df50hps8s\",\"name\":\"code\",\"code\":\".checkbox-front,\\n.checkbox-back {\\n backface-visibility: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cd911695-3592-4541-9455-5f8391526b98","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"perspective","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"perspective: 1000px","styles":{"code":true}},{"type":"text","text":" gives the rotation a 3D feeling instead of looking like a flat 2D swap.","styles":{}}],"children":[]},{"id":"f2062d5a-2654-49f7-826b-561a241326af","type":"procode","props":{"code":".checkbox-flip {\n perspective: 1000px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vfh9ybrk6\",\"name\":\"code\",\"code\":\".checkbox-flip {\\n perspective: 1000px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de918a83-a8c4-4568-9a25-46452fb4c05e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The wrapper scale uses ","styles":{}},{"type":"text","text":"0.4s","styles":{"code":true}},{"type":"text","text":", while the front and back face rotations use ","styles":{}},{"type":"text","text":"0.3s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"cb270ee1-979b-49a4-a3dd-6ce0630cff31","type":"procode","props":{"code":".checkbox-flip {\n transition:\n transform 0.4s ease,\n box-shadow 0.3s ease;\n}\n\n.checkbox-front,\n.checkbox-back {\n transition: transform 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tg67eb53l\",\"name\":\"code\",\"code\":\".checkbox-flip {\\n transition:\\n transform 0.4s ease,\\n box-shadow 0.3s ease;\\n}\\n\\n.checkbox-front,\\n.checkbox-back {\\n transition: transform 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b4ad53e-288e-4f2f-aaa9-453936c799a0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"If the user prefers reduced motion, transitions are removed and the hover scale is disabled.","styles":{}}],"children":[]},{"id":"04b1259c-b05c-4e3b-9bd7-468eeac55636","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .checkbox-flip,\n .checkbox-front,\n .checkbox-back {\n transition: none;\n }\n\n .checkbox-wrapper:hover .checkbox-flip {\n transform: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"9usmveirt\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .checkbox-flip,\\n .checkbox-front,\\n .checkbox-back {\\n transition: none;\\n }\\n\\n .checkbox-wrapper:hover .checkbox-flip {\\n transform: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a908fdeb-e987-4510-866d-bdb0fc5b086b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the flip speed here:","styles":{}}],"children":[]},{"id":"fb6c1c24-03bc-40d5-ac60-fca25d39989f","type":"procode","props":{"code":".checkbox-front,\n.checkbox-back {\n transition: transform 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qd1v9crab\",\"name\":\"code\",\"code\":\".checkbox-front,\\n.checkbox-back {\\n transition: transform 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e6ef108-99ac-4ced-ab7d-7ce452675fe4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover scale speed here:","styles":{}}],"children":[]},{"id":"686f661c-d825-486a-8e02-228210eb2568","type":"procode","props":{"code":".checkbox-flip {\n transition:\n transform 0.4s ease,\n box-shadow 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"11w1658nd\",\"name\":\"code\",\"code\":\".checkbox-flip {\\n transition:\\n transform 0.4s ease,\\n box-shadow 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0efedc1-1cda-46cc-bf16-669a3beb556d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the front green gradient here:","styles":{}}],"children":[]},{"id":"7879bedd-e38f-4eef-8229-8f79f575cccc","type":"procode","props":{"code":".checkbox-front {\n background: linear-gradient(135deg, #22c55e, #16a34a);\n}","language":"javascript","filename":"","files":"[{\"id\":\"c8z5y4t8p\",\"name\":\"code\",\"code\":\".checkbox-front {\\n background: linear-gradient(135deg, #22c55e, #16a34a);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2bdce335-ecec-40f5-a9d2-3eac5b8f6dcf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the back blue gradient here:","styles":{}}],"children":[]},{"id":"38ef9be1-d79d-4431-9240-0d5351833743","type":"procode","props":{"code":".checkbox-back {\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\n}","language":"javascript","filename":"","files":"[{\"id\":\"28rk399e8\",\"name\":\"code\",\"code\":\".checkbox-back {\\n background: linear-gradient(135deg, #2563eb, #0ea5e9);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"61cbdab0-94ee-423e-a6b4-b6cd92f9a6c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon color here:","styles":{}}],"children":[]},{"id":"5f2e8812-b285-486a-bc33-bbcbb967e70a","type":"procode","props":{"code":".icon-path {\n stroke: white;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fjlpci3zh\",\"name\":\"code\",\"code\":\".icon-path {\\n stroke: white;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cacfc005-942e-480d-852f-34ef1eaea016","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the checkbox size here:","styles":{}}],"children":[]},{"id":"9ffc90e1-d3e6-4eb5-b00d-42a4fdb02a19","type":"procode","props":{"code":".checkbox-flip {\n width: 60px;\n height: 60px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lahcmjtn4\",\"name\":\"code\",\"code\":\".checkbox-flip {\\n width: 60px;\\n height: 60px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce30d268-bfc4-44af-850a-f020bcf46f8d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the corner radius here:","styles":{}}],"children":[]},{"id":"6c7403bf-8221-48dc-b36f-b2d3884e575d","type":"procode","props":{"code":".checkbox-front,\n.checkbox-back {\n border-radius: 12px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ryoo8fbja\",\"name\":\"code\",\"code\":\".checkbox-front,\\n.checkbox-back {\\n border-radius: 12px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0470932a-1edc-4e22-a400-8cacee1aa5ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the SVG icon size inside ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"ab2881ac-bbbf-442e-a1a5-ba001ddd8468","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"","url":"data:image/svg+xml;utf8,%3Csvg%20fill%3D%22white%22%20height%3D%2232%22%20width%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%3E%3C%2Fsvg%3E","caption":"","showPreview":true},"children":[]},{"id":"529d2947-b513-46db-a335-fab7009170c0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon / Content\n","styles":{"bold":true}},{"type":"text","text":"The front icon uses a plus path.","styles":{}}],"children":[]},{"id":"1c01a1d7-e2ff-429f-82bd-f70fffeb0de6","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"sf7coobk6\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a1aed766-adea-4c73-bb99-918cc0e7a66f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The back icon uses a check path.","styles":{}}],"children":[]},{"id":"ba2bf9a5-25f6-4b59-b2df-d66568174806","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"rq9j1hq52\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"71240d72-eb9f-4cd2-9219-72455bb94378","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9568a3e7-ec54-441f-a09d-125d8e0b166e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]