From 6b34847b9d461ae0f595ca3a8f0bcbd1ab6030ab Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Sun, 13 Aug 2023 21:30:24 +0530 Subject: feat: adds checkbox that doesn't work in example --- examples/todo-list/style.css | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) (limited to 'examples/todo-list') diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index 5316d41..b746829 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -78,15 +78,20 @@ [data-instance=task-item] { --text: "default text"; - --checked: "false"; + --done: "false"; padding: 1rem; cursor: pointer; - --cssx-on-click: update(--checked, if(get-var(--checked), "false", "true")); + --cssx-on-click: update(--done, if(get-var(--done), "false", "true")); + --cssx-on-update: + update(checkbox, --checked, if(get-var(--done), true, false)) + ; + + --cssx-children: div#checkbox; } [data-instance=task-item]::after { - content: "[" var(--checked) "] " var(--text); + content: "[" var(--done) "] " var(--text); } [data-instance=task-item]:not(:first-child) { @@ -95,3 +100,15 @@ border-top: 1px solid var(--color-gray); } +#checkbox { + --checked: false; + + width: 18px; + height: 18px; + border: 2px solid gray; + background-color: transparent; + + --cssx-on-update: + update(background-color, if(get-var(--checked), get-var(--color-accent), transparent)) + ; +} -- cgit v1.3.1