Card Switch Toggle

[{"id":"b7847a9c-7723-43e3-a7fd-70d34c0aa32e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1e87c066-95d8-4eb0-9211-94de7b30b351","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: #f3f3f3;\\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.card-switch {\\n --input-focus: #2d8cf0;\\n --font-color: #323232;\\n --font-color-sub: #666666;\\n --bg-color: #ffffff;\\n --bg-color-alt: #666666;\\n --main-color: #323232;\\n\\n position: relative;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n gap: 30px;\\n width: 50px;\\n height: 20px;\\n}\\n\\n.card-toggle {\\n opacity: 0;\\n width: 0;\\n height: 0;\\n}\\n\\n.card-slider {\\n position: absolute;\\n inset: 0;\\n cursor: pointer;\\n border-radius: 5px;\\n border: 2px solid var(--main-color);\\n background-color: var(--bg-color);\\n box-shadow: 4px 4px var(--main-color);\\n transition:\\n background-color 0.3s ease,\\n box-shadow 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.card-slider::before {\\n position: absolute;\\n content: \\\"\\\";\\n height: 20px;\\n width: 20px;\\n left: -2px;\\n bottom: 2px;\\n border: 2px solid var(--main-color);\\n border-radius: 5px;\\n background-color: var(--bg-color);\\n box-shadow: 0 3px 0 var(--main-color);\\n transition:\\n transform 0.3s ease,\\n box-shadow 0.3s ease;\\n}\\n\\n.card-toggle:checked + .card-slider {\\n background-color: var(--input-focus);\\n}\\n\\n.card-toggle:checked + .card-slider::before {\\n transform: translateX(30px);\\n}\\n\\n.card-toggle:active + .card-slider {\\n transform: translate(2px, 2px);\\n box-shadow: 2px 2px var(--main-color);\\n}\\n\\n.card-toggle:active + .card-slider::before {\\n box-shadow: 0 1px 0 var(--main-color);\\n}\\n\\n.card-toggle:focus-visible + .card-slider {\\n outline: 3px solid rgba(45, 140, 240, 0.35);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .card-slider,\\n .card-slider::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Card Switch Toggle\\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\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"8a5e1e2e-18c8-41fc-a3f8-d382a0bbb311","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"8815e755-90bc-4383-b1a2-eb420485ec6d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

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

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b2c5ac22-0804-4c8a-a8b9-2ddff8b4ef98","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"e607ecf8-174d-4286-a581-4c28b875ee54","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: #f3f3f3;\\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.card-switch {\\n --input-focus: #2d8cf0;\\n --font-color: #323232;\\n --font-color-sub: #666666;\\n --bg-color: #ffffff;\\n --bg-color-alt: #666666;\\n --main-color: #323232;\\n\\n position: relative;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n gap: 30px;\\n width: 50px;\\n height: 20px;\\n}\\n\\n.card-toggle {\\n opacity: 0;\\n width: 0;\\n height: 0;\\n}\\n\\n.card-slider {\\n position: absolute;\\n inset: 0;\\n cursor: pointer;\\n border-radius: 5px;\\n border: 2px solid var(--main-color);\\n background-color: var(--bg-color);\\n box-shadow: 4px 4px var(--main-color);\\n transition:\\n background-color 0.3s ease,\\n box-shadow 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.card-slider::before {\\n position: absolute;\\n content: \\\"\\\";\\n height: 20px;\\n width: 20px;\\n left: -2px;\\n bottom: 2px;\\n border: 2px solid var(--main-color);\\n border-radius: 5px;\\n background-color: var(--bg-color);\\n box-shadow: 0 3px 0 var(--main-color);\\n transition:\\n transform 0.3s ease,\\n box-shadow 0.3s ease;\\n}\\n\\n.card-toggle:checked + .card-slider {\\n background-color: var(--input-focus);\\n}\\n\\n.card-toggle:checked + .card-slider::before {\\n transform: translateX(30px);\\n}\\n\\n.card-toggle:active + .card-slider {\\n transform: translate(2px, 2px);\\n box-shadow: 2px 2px var(--main-color);\\n}\\n\\n.card-toggle:active + .card-slider::before {\\n box-shadow: 0 1px 0 var(--main-color);\\n}\\n\\n.card-toggle:focus-visible + .card-slider {\\n outline: 3px solid rgba(45, 140, 240, 0.35);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .card-slider,\\n .card-slider::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c85990f2-9b4b-426b-a428-937186916fa3","type":"divider","props":{},"children":[]},{"id":"26242e96-4559-4a40-a2a2-957532f3d44c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"bcbaa239-4e25-44b7-a425-0a5d71fac122","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 card switch toggle. It uses a small rectangular track, square knob, dark border, white background, and hard offset shadow.","styles":{}}],"children":[]},{"id":"f1046be9-2e72-464c-a632-b68de63b9856","type":"procode","props":{"code":".card-switch {\n --input-focus: #2d8cf0;\n --font-color: #323232;\n --font-color-sub: #666666;\n --bg-color: #ffffff;\n --bg-color-alt: #666666;\n --main-color: #323232;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dq9v8htbv\",\"name\":\"code\",\"code\":\".card-switch {\\n --input-focus: #2d8cf0;\\n --font-color: #323232;\\n --font-color-sub: #666666;\\n --bg-color: #ffffff;\\n --bg-color-alt: #666666;\\n --main-color: #323232;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fcc8bdcf-c06c-4018-a523-babb7ca014bf","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The toggle is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the viewport height and places the switch in the center.","styles":{}}],"children":[]},{"id":"60f4749f-faf1-497d-adfc-006d4df9429d","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mndttob41\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1372331a-23fa-4335-9587-d5f08070f221","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Switch Wrapper\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".card-switch","styles":{"code":true}},{"type":"text","text":" label becomes the clickable switch wrapper. It has a fixed size of ","styles":{}},{"type":"text","text":"50px","styles":{"code":true}},{"type":"text","text":" by ","styles":{}},{"type":"text","text":"20px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a807781a-65da-4ee0-a5f3-412aa21c1a8d","type":"procode","props":{"code":".card-switch {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 30px;\n width: 50px;\n height: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jfhmko4bg\",\"name\":\"code\",\"code\":\".card-switch {\\n position: relative;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n gap: 30px;\\n width: 50px;\\n height: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1739997-e0d1-4fc4-b005-39b98fcb4ec7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Checkbox\n","styles":{"bold":true}},{"type":"text","text":"The real checkbox is hidden visually, but it still controls the checked and unchecked state.","styles":{}}],"children":[]},{"id":"d3d9ee5d-4763-4a40-90aa-9d2323bf67e5","type":"procode","props":{"code":".card-toggle {\n opacity: 0;\n width: 0;\n height: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"faajet396\",\"name\":\"code\",\"code\":\".card-toggle {\\n opacity: 0;\\n width: 0;\\n height: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"797845e2-25f9-4122-838f-4e6f25846d44","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Slider Track\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".card-slider","styles":{"code":true}},{"type":"text","text":" is the visible switch track. It fills the wrapper using ","styles":{}},{"type":"text","text":"position: absolute","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"inset: 0","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a472c277-45ee-462f-a868-8b245e8d1bd7","type":"procode","props":{"code":".card-slider {\n position: absolute;\n inset: 0;\n cursor: pointer;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"v5duapif1\",\"name\":\"code\",\"code\":\".card-slider {\\n position: absolute;\\n inset: 0;\\n cursor: pointer;\\n border-radius: 5px;\\n border: 2px solid var(--main-color);\\n background-color: var(--bg-color);\\n box-shadow: 4px 4px var(--main-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74c68abf-3e3b-4399-9bcd-c384a808784f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Knob Setup\n","styles":{"bold":true}},{"type":"text","text":"The switch knob is created with ","styles":{}},{"type":"text","text":".card-slider::before","styles":{"code":true}},{"type":"text","text":". It starts on the left side and has its own border and shadow.","styles":{}}],"children":[]},{"id":"d896909a-6444-4e2d-aef7-611b0eff9a67","type":"procode","props":{"code":".card-slider::before {\n position: absolute;\n content: \"\";\n height: 20px;\n width: 20px;\n left: -2px;\n bottom: 2px;\n border: 2px solid var(--main-color);\n border-radius: 5px;\n background-color: var(--bg-color);\n box-shadow: 0 3px 0 var(--main-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"fsc5iwgj4\",\"name\":\"code\",\"code\":\".card-slider::before {\\n position: absolute;\\n content: \\\"\\\";\\n height: 20px;\\n width: 20px;\\n left: -2px;\\n bottom: 2px;\\n border: 2px solid var(--main-color);\\n border-radius: 5px;\\n background-color: var(--bg-color);\\n box-shadow: 0 3px 0 var(--main-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3b1824a5-e23d-463b-84df-2ce708fc7807","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Track State\n","styles":{"bold":true}},{"type":"text","text":"When the checkbox is checked, the track background becomes blue.","styles":{}}],"children":[]},{"id":"977301f1-01b6-40e3-8c58-3be181e31c2d","type":"procode","props":{"code":".card-toggle:checked + .card-slider {\n background-color: var(--input-focus);\n}","language":"javascript","filename":"","files":"[{\"id\":\"43zqazz16\",\"name\":\"code\",\"code\":\".card-toggle:checked + .card-slider {\\n background-color: var(--input-focus);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d3eaa9d-b8d7-4124-884b-127fdef9dec4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Knob Movement\n","styles":{"bold":true}},{"type":"text","text":"When checked, the knob slides to the right by ","styles":{}},{"type":"text","text":"30px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"19d982d5-1709-4901-b147-3a504ffbe003","type":"procode","props":{"code":".card-toggle:checked + .card-slider::before {\n transform: translateX(30px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3dmgyu2r3\",\"name\":\"code\",\"code\":\".card-toggle:checked + .card-slider::before {\\n transform: translateX(30px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"278f38cc-943f-4a9b-bb70-6a1de5ae7cc3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Pressed State\n","styles":{"bold":true}},{"type":"text","text":"When clicking, the slider moves down-right and the hard shadow becomes smaller. This makes the toggle feel pressed.","styles":{}}],"children":[]},{"id":"22559201-822a-44cf-8d7b-57b117019a42","type":"procode","props":{"code":".card-toggle:active + .card-slider {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px var(--main-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zmczd71b4\",\"name\":\"code\",\"code\":\".card-toggle:active + .card-slider {\\n transform: translate(2px, 2px);\\n box-shadow: 2px 2px var(--main-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7639e62-8954-4fc8-9b5c-316441ca94e4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Pressed Knob Shadow\n","styles":{"bold":true}},{"type":"text","text":"When active, the knob shadow also becomes smaller.","styles":{}}],"children":[]},{"id":"5d247c2b-4836-4515-97f5-d8ecfa3b0107","type":"procode","props":{"code":".card-toggle:active + .card-slider::before {\n box-shadow: 0 1px 0 var(--main-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"9nmzty9ij\",\"name\":\"code\",\"code\":\".card-toggle:active + .card-slider::before {\\n box-shadow: 0 1px 0 var(--main-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ac1869cf-a4f8-4bbb-9185-1dcad8159de7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Visible\n","styles":{"bold":true}},{"type":"text","text":"When focused with keyboard navigation, the switch shows a soft blue outline.","styles":{}}],"children":[]},{"id":"eb24884c-b5dd-4f3e-a734-a47ac2262b20","type":"procode","props":{"code":".card-toggle:focus-visible + .card-slider {\n outline: 3px solid rgba(45, 140, 240, 0.35);\n outline-offset: 6px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"efgra1j48\",\"name\":\"code\",\"code\":\".card-toggle:focus-visible + .card-slider {\\n outline: 3px solid rgba(45, 140, 240, 0.35);\\n outline-offset: 6px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"08d56559-34b4-494a-9481-33546af7b0f9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The track background, track shadow, press movement, knob movement, and knob shadow use ","styles":{}},{"type":"text","text":"0.3s ease","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"315378c4-61c7-4e28-9620-ac740fa2d98a","type":"procode","props":{"code":".card-slider {\n transition:\n background-color 0.3s ease,\n box-shadow 0.3s ease,\n transform 0.3s ease;\n}\n\n.card-slider::before {\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8c70c55dv\",\"name\":\"code\",\"code\":\".card-slider {\\n transition:\\n background-color 0.3s ease,\\n box-shadow 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.card-slider::before {\\n transition:\\n transform 0.3s ease,\\n box-shadow 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d37bae6a-2c11-42ab-8774-1f6d46dde750","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 logic flow. The hidden checkbox controls the visible track and knob using the adjacent sibling selector ","styles":{}},{"type":"text","text":"+","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3356bd3c-1eab-4900-b673-9669c8a84d45","type":"procode","props":{"code":".card-toggle:checked + .card-slider {\n background-color: var(--input-focus);\n}\n\n.card-toggle:checked + .card-slider::before {\n transform: translateX(30px);\n}\n\n.card-toggle:active + .card-slider {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px var(--main-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"dv7yin76d\",\"name\":\"code\",\"code\":\".card-toggle:checked + .card-slider {\\n background-color: var(--input-focus);\\n}\\n\\n.card-toggle:checked + .card-slider::before {\\n transform: translateX(30px);\\n}\\n\\n.card-toggle:active + .card-slider {\\n transform: translate(2px, 2px);\\n box-shadow: 2px 2px var(--main-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7abe00c8-a531-4928-a158-6db505f4f594","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"+ .card-slider","styles":{"code":true}},{"type":"text","text":" Works\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".card-slider","styles":{"code":true}},{"type":"text","text":" comes directly after the checkbox input in the HTML. Because of that, CSS can style the slider based on the checkbox state.","styles":{}}],"children":[]},{"id":"73e321aa-6d0d-4915-b247-a24c73483b93","type":"procode","props":{"code":"\n \n \n \n","language":"javascript","filename":"","files":"[{\"id\":\"hmo8k5lcr\",\"name\":\"code\",\"code\":\"\\n \\n \\n \\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ebba1a9f-4ea8-453e-83ed-ff278ff42a7a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Card Side Element\n","styles":{"bold":true}},{"type":"text","text":"The HTML includes ","styles":{}},{"type":"text","text":".card-side","styles":{"code":true}},{"type":"text","text":", but the provided CSS has no ","styles":{}},{"type":"text","text":".card-side","styles":{"code":true}},{"type":"text","text":" rule. So it does not create any visible effect in this exact version.","styles":{}}],"children":[]},{"id":"68952675-ceb7-4f97-9709-abb34092f861","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"88098uh7m\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"736488cf-ca89-4b10-a894-35e7c5c7a324","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 has reduced motion enabled, the slider and knob transitions are disabled.","styles":{}}],"children":[]},{"id":"3a43de63-b614-4e41-89c9-eb7e2d98e410","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .card-slider,\n .card-slider::before {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"c8guc2y99\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .card-slider,\\n .card-slider::before {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"91f55501-fe70-4d3c-b565-8c714c392ca6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the switch animation speed here:","styles":{}}],"children":[]},{"id":"4e025bdf-c76f-46cb-b6ca-37bd464ef852","type":"procode","props":{"code":".card-slider {\n transition:\n background-color 0.3s ease,\n box-shadow 0.3s ease,\n transform 0.3s ease;\n}\n\n.card-slider::before {\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"67py2lrqb\",\"name\":\"code\",\"code\":\".card-slider {\\n transition:\\n background-color 0.3s ease,\\n box-shadow 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.card-slider::before {\\n transition:\\n transform 0.3s ease,\\n box-shadow 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2a2846c-62fd-44de-a193-bbf79372df94","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the checked blue color here:","styles":{}}],"children":[]},{"id":"60c4b8cf-0a05-4679-91d0-be3666ba3477","type":"procode","props":{"code":".card-switch {\n --input-focus: #2d8cf0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"edtldc2ko\",\"name\":\"code\",\"code\":\".card-switch {\\n --input-focus: #2d8cf0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2aa3fb01-ac6e-4482-8cab-2b0b31e42be6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the switch background color here:","styles":{}}],"children":[]},{"id":"5dc73b10-8558-47b8-9a71-73993f0a13ae","type":"procode","props":{"code":".card-switch {\n --bg-color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xq820rgbd\",\"name\":\"code\",\"code\":\".card-switch {\\n --bg-color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c78390d4-7b13-4221-89d8-a8d9e19aa76a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the border and shadow color here:","styles":{}}],"children":[]},{"id":"f479c3c6-7e97-487d-89fe-5745ee1c9093","type":"procode","props":{"code":".card-switch {\n --main-color: #323232;\n}","language":"javascript","filename":"","files":"[{\"id\":\"k65pyu6jo\",\"name\":\"code\",\"code\":\".card-switch {\\n --main-color: #323232;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de4522b5-2ebb-4496-a8a9-8dbce4043870","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the switch track size here:","styles":{}}],"children":[]},{"id":"cab45eaa-5126-44e9-86c9-7409b83281d3","type":"procode","props":{"code":".card-switch {\n width: 50px;\n height: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"3axr8jaqs\",\"name\":\"code\",\"code\":\".card-switch {\\n width: 50px;\\n height: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4aa34a46-f94a-4487-b7e3-46d6d5af3f39","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the knob size here:","styles":{}}],"children":[]},{"id":"09abaa90-cbb9-478a-943f-1e9fa8dfe2f8","type":"procode","props":{"code":".card-slider::before {\n height: 20px;\n width: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mfgnyz52u\",\"name\":\"code\",\"code\":\".card-slider::before {\\n height: 20px;\\n width: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5fe6a1e2-abce-4f0d-9a17-af79f8aadf11","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the roundness here:","styles":{}}],"children":[]},{"id":"8bb3f636-b743-4125-b0b0-0ca58f9dfbeb","type":"procode","props":{"code":".card-slider,\n.card-slider::before {\n border-radius: 5px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jjy7g4k0s\",\"name\":\"code\",\"code\":\".card-slider,\\n.card-slider::before {\\n border-radius: 5px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2c53c5c4-9b40-4579-8cd8-0d28d6cc0309","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the knob travel distance here:","styles":{}}],"children":[]},{"id":"da12a270-4b43-4d16-baba-4afe6002f6d0","type":"procode","props":{"code":".card-toggle:checked + .card-slider::before {\n transform: translateX(30px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"mk7kker4w\",\"name\":\"code\",\"code\":\".card-toggle:checked + .card-slider::before {\\n transform: translateX(30px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f87f924b-0462-473c-9fb5-47b1c4594ed2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]