Diagonal Fill Checkbox

[{"id":"1c999a44-61d6-4f47-b281-7bfb136fba9e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"88a76e82-6c87-46b5-bc6e-b18a3478cb63","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #111111;\\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.content {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.checkBox {\\n width: 30px;\\n height: 30px;\\n\\n display: block;\\n position: relative;\\n overflow: hidden;\\n\\n cursor: pointer;\\n border: 3px solid transparent;\\n border-radius: 10px;\\n box-shadow: 0 0 0 2px #ffffff;\\n}\\n\\n.checkBox input[type=\\\"checkbox\\\"] {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.checkBox div {\\n width: 60px;\\n height: 60px;\\n\\n position: absolute;\\n top: -52px;\\n left: -52px;\\n z-index: 1;\\n\\n background: #ffffff;\\n transform: rotate(45deg);\\n}\\n\\n.checkBox input[type=\\\"checkbox\\\"]:checked + div {\\n top: -10px;\\n left: -10px;\\n}\\n\\n.transition {\\n transition: 300ms ease;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Diagonal Fill Checkbox\\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\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"8f4a09b6-c340-4215-a32b-888c6a3c8a6c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"b453ff58-b735-412f-b9f3-aaf7571ef449","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n \\n

\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5a70aa14-0039-4f3b-a8ce-8c316845168a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"3e562e3b-68f3-4730-9a13-2ba43b41c40c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #111111;\\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.content {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.checkBox {\\n width: 30px;\\n height: 30px;\\n\\n display: block;\\n position: relative;\\n overflow: hidden;\\n\\n cursor: pointer;\\n border: 3px solid transparent;\\n border-radius: 10px;\\n box-shadow: 0 0 0 2px #ffffff;\\n}\\n\\n.checkBox input[type=\\\"checkbox\\\"] {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.checkBox div {\\n width: 60px;\\n height: 60px;\\n\\n position: absolute;\\n top: -52px;\\n left: -52px;\\n z-index: 1;\\n\\n background: #ffffff;\\n transform: rotate(45deg);\\n}\\n\\n.checkBox input[type=\\\"checkbox\\\"]:checked + div {\\n top: -10px;\\n left: -10px;\\n}\\n\\n.transition {\\n transition: 300ms ease;\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"45dfb9db-6354-4437-b21d-2acf87067095","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"d734837e-e0c7-49a2-8acf-c4c1fd618be2","type":"divider","props":{},"children":[]},{"id":"2fd7503e-c97b-4c0d-a980-67abd5c79108","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"a53511bd-ae45-403a-9679-8ad3fbdf59da","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 diagonal fill checkbox. It uses a dark page background, a small rounded square outline, and a white diagonal block that slides into the checkbox when checked.","styles":{}}],"children":[]},{"id":"939067b8-6011-4ce5-a46b-e6b30423346c","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #111111;\n font-family: Arial, Helvetica, sans-serif;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wcehr1zs4\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #111111;\\n font-family: Arial, Helvetica, sans-serif;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2fbae28-445c-4ee8-a895-7a7ea2eb30fa","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 content in the middle.","styles":{}}],"children":[]},{"id":"49082d36-b187-4d89-ab1e-f369a25cd315","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"022o1wahe\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7a0069be-79c5-4f54-82fb-e53c8bd3fcae","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Content Wrapper\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".content","styles":{"code":true}},{"type":"text","text":" wrapper uses Flexbox to keep the checkbox centered inside its own container.","styles":{}}],"children":[]},{"id":"8e3315a2-2ea7-4147-81b3-642fb7957d87","type":"procode","props":{"code":".content {\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"48dw91y71\",\"name\":\"code\",\"code\":\".content {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"43942e96-cd7e-457a-8ded-b9d47be574b2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checkbox Box\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".checkBox","styles":{"code":true}},{"type":"text","text":" label is the visible checkbox area. It has a fixed ","styles":{}},{"type":"text","text":"30px","styles":{"code":true}},{"type":"text","text":" size, rounded corners, and a white outline created with ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3e694b31-1dcc-4299-9dcd-2a28f5d894b5","type":"procode","props":{"code":".checkBox {\n width: 30px;\n height: 30px;\n\n display: block;\n position: relative;\n overflow: hidden;\n\n cursor: pointer;\n border: 3px solid transparent;\n border-radius: 10px;\n box-shadow: 0 0 0 2px #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"aci2671gx\",\"name\":\"code\",\"code\":\".checkBox {\\n width: 30px;\\n height: 30px;\\n\\n display: block;\\n position: relative;\\n overflow: hidden;\\n\\n cursor: pointer;\\n border: 3px solid transparent;\\n border-radius: 10px;\\n box-shadow: 0 0 0 2px #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2f29e353-42e6-48ba-b5dc-b58765284587","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Input\n","styles":{"bold":true}},{"type":"text","text":"The real checkbox input is hidden with ","styles":{}},{"type":"text","text":"opacity: 0","styles":{"code":true}},{"type":"text","text":", but it still controls the checked state.","styles":{}}],"children":[]},{"id":"af444c40-0fd3-4952-b107-e2bcb8d5ca7e","type":"procode","props":{"code":".checkBox input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qirq5zzph\",\"name\":\"code\",\"code\":\".checkBox input[type=\\\"checkbox\\\"] {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"056db859-a6d8-4211-afbc-e87dd131e0a7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Diagonal Fill Block\n","styles":{"bold":true}},{"type":"text","text":"The white fill is created with the ","styles":{}},{"type":"text","text":"

","styles":{"code":true}},{"type":"text","text":" element. It is larger than the checkbox and rotated ","styles":{}},{"type":"text","text":"45deg","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"18e6c5a1-c4ca-481c-b85f-64d85de205d1","type":"procode","props":{"code":".checkBox div {\n width: 60px;\n height: 60px;\n\n position: absolute;\n top: -52px;\n left: -52px;\n z-index: 1;\n\n background: #ffffff;\n transform: rotate(45deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ki9cjqs0f\",\"name\":\"code\",\"code\":\".checkBox div {\\n width: 60px;\\n height: 60px;\\n\\n position: absolute;\\n top: -52px;\\n left: -52px;\\n z-index: 1;\\n\\n background: #ffffff;\\n transform: rotate(45deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af21a3a4-ca24-4a3d-902c-27bd9da1306d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Unchecked State\n","styles":{"bold":true}},{"type":"text","text":"In the default state, the white rotated block is placed outside the checkbox area using negative ","styles":{}},{"type":"text","text":"top","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"left","styles":{"code":true}},{"type":"text","text":" values.","styles":{}}],"children":[]},{"id":"dc0ab5c2-ea47-45de-a554-6559a14bc8d8","type":"procode","props":{"code":".checkBox div {\n top: -52px;\n left: -52px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7c1wis5of\",\"name\":\"code\",\"code\":\".checkBox div {\\n top: -52px;\\n left: -52px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7f80b18c-be21-4fb1-b540-1e678e07c4dd","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked State\n","styles":{"bold":true}},{"type":"text","text":"When the checkbox is checked, the white diagonal block moves into the checkbox area.","styles":{}}],"children":[]},{"id":"25aed320-aa73-4168-8825-e2a659a94386","type":"procode","props":{"code":".checkBox input[type=\"checkbox\"]:checked + div {\n top: -10px;\n left: -10px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8ibbxussn\",\"name\":\"code\",\"code\":\".checkBox input[type=\\\"checkbox\\\"]:checked + div {\\n top: -10px;\\n left: -10px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"36513274-d823-4243-908c-e4f15de125f1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Diagonal Fill Animation\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".transition","styles":{"code":true}},{"type":"text","text":" class controls the movement speed. It animates the ","styles":{}},{"type":"text","text":"top","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"left","styles":{"code":true}},{"type":"text","text":" position changes smoothly.","styles":{}}],"children":[]},{"id":"a7a6a5a6-356b-4bfd-8083-6802e6dbd96c","type":"procode","props":{"code":".transition {\n transition: 300ms ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"j8pqfp9kv\",\"name\":\"code\",\"code\":\".transition {\\n transition: 300ms ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cbdbda79-32a2-4d3c-8c75-496c4afcd31a","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 code flow. The hidden checkbox controls the diagonal fill block using the adjacent sibling selector ","styles":{}},{"type":"text","text":"+","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3a75a37c-f154-4e1e-9a09-f819e7deafa9","type":"procode","props":{"code":".checkBox div {\n top: -52px;\n left: -52px;\n transform: rotate(45deg);\n}\n\n.checkBox input[type=\"checkbox\"]:checked + div {\n top: -10px;\n left: -10px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0d1wr3p4x\",\"name\":\"code\",\"code\":\".checkBox div {\\n top: -52px;\\n left: -52px;\\n transform: rotate(45deg);\\n}\\n\\n.checkBox input[type=\\\"checkbox\\\"]:checked + div {\\n top: -10px;\\n left: -10px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9acfb67-6a9d-482c-ba84-7934caef889e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"The white fill block is much larger than the checkbox. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" clips the block so only the part inside the rounded square is visible.","styles":{}}],"children":[]},{"id":"dc108ab1-9564-4ddc-a820-928a2538da6a","type":"procode","props":{"code":".checkBox {\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"if5txyzm0\",\"name\":\"code\",\"code\":\".checkBox {\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b976460f-49ee-4466-882f-05b0fb911e70","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"+ div","styles":{"code":true}},{"type":"text","text":" Works\n","styles":{"bold":true}},{"type":"text","text":"The fill block comes directly after the checkbox input in the HTML. Because of that, CSS can use ","styles":{}},{"type":"text","text":"input:checked + div","styles":{"code":true}},{"type":"text","text":" to move the fill when the checkbox is checked.","styles":{}}],"children":[]},{"id":"f77aa933-9255-4a5f-8a0c-e919f4d554ac","type":"procode","props":{"code":"\n \n

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

\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"46833fc0-57b6-47ba-85fa-5bc14c47d476","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Direction\n","styles":{"bold":true}},{"type":"text","text":"The fill enters diagonally because the block is rotated ","styles":{}},{"type":"text","text":"45deg","styles":{"code":true}},{"type":"text","text":" and moves from the top-left corner into the checkbox.","styles":{}}],"children":[]},{"id":"f60a88a9-9302-40ce-a53b-1ebdfbc88676","type":"procode","props":{"code":".checkBox div {\n transform: rotate(45deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"070f5ymx6\",\"name\":\"code\",\"code\":\".checkBox div {\\n transform: rotate(45deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5b5574c7-f605-4e33-92b8-3f1c41a83077","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the fill animation speed here:","styles":{}}],"children":[]},{"id":"51f04f9a-1c69-4e49-aff0-54dc05c66123","type":"procode","props":{"code":".transition {\n transition: 300ms ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"w8zvbp17m\",\"name\":\"code\",\"code\":\".transition {\\n transition: 300ms ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73841657-7fd2-4c5d-aba1-1cf238162b2d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the page background here:","styles":{}}],"children":[]},{"id":"f4f5c8f7-85fd-48a9-aed1-80b6c481f860","type":"procode","props":{"code":"body {\n background: #111111;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rijm30app\",\"name\":\"code\",\"code\":\"body {\\n background: #111111;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f66e33b4-4d81-43e6-b632-b7c17eab595a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the checkbox outline color here:","styles":{}}],"children":[]},{"id":"0800a4fe-bd4d-481a-a066-a0402f3e196c","type":"procode","props":{"code":".checkBox {\n box-shadow: 0 0 0 2px #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jvozu6vmd\",\"name\":\"code\",\"code\":\".checkBox {\\n box-shadow: 0 0 0 2px #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"35dcad48-a612-4c63-bfcd-8237759d38a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the diagonal fill color here:","styles":{}}],"children":[]},{"id":"f0eeb089-9860-43f4-a7c0-ea10df6dbfae","type":"procode","props":{"code":".checkBox div {\n background: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6w86i8non\",\"name\":\"code\",\"code\":\".checkBox div {\\n background: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8e61f642-bcce-4085-ac4b-5966e1134b9e","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":"9d25e742-cf43-4ce5-bf8f-2dd9d680feb2","type":"procode","props":{"code":".checkBox {\n width: 30px;\n height: 30px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"raw9z5lpc\",\"name\":\"code\",\"code\":\".checkBox {\\n width: 30px;\\n height: 30px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5e827f68-3bb2-4f14-8343-737802cc467b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the checkbox roundness here:","styles":{}}],"children":[]},{"id":"28660d6d-e67a-4a74-b393-8c3626974cc6","type":"procode","props":{"code":".checkBox {\n border-radius: 10px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1abi4i412\",\"name\":\"code\",\"code\":\".checkBox {\\n border-radius: 10px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"713b0fff-c7c9-40b8-8220-28c098eeff7f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the fill block size here:","styles":{}}],"children":[]},{"id":"d151609c-acd0-4285-8650-b14f2e0e1c47","type":"procode","props":{"code":".checkBox div {\n width: 60px;\n height: 60px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"be67yqp0q\",\"name\":\"code\",\"code\":\".checkBox div {\\n width: 60px;\\n height: 60px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4d478f2a-1f58-4ec1-aab7-5672b4128dd6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Position\n","styles":{"bold":true}},{"type":"text","text":"Change the hidden fill start position here:","styles":{}}],"children":[]},{"id":"ea710552-7bad-41a2-8e13-3865558c910e","type":"procode","props":{"code":".checkBox div {\n top: -52px;\n left: -52px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x90wjgurv\",\"name\":\"code\",\"code\":\".checkBox div {\\n top: -52px;\\n left: -52px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de57205c-c6b0-466c-8b6b-df6bccc8b071","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the checked fill end position here:","styles":{}}],"children":[]},{"id":"d5ecec23-caf7-4f25-a5d3-70464051b66a","type":"procode","props":{"code":".checkBox input[type=\"checkbox\"]:checked + div {\n top: -10px;\n left: -10px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"clsx7u3j3\",\"name\":\"code\",\"code\":\".checkBox input[type=\\\"checkbox\\\"]:checked + div {\\n top: -10px;\\n left: -10px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7e44097-a1ef-4d87-8ce9-1f485106cd16","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]