feat: fixes styles for element + uses data-element for todo-list example

1 files changed, 19 insertions, 8 deletions

diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css
index b746829..b3b9d07 100644
--- a/examples/todo-list/style.css
+++ b/examples/todo-list/style.css
@@ -8,6 +8,8 @@
   --cssx-children: main#container;
 }
 
+body * { box-sizing: border-box; }
+
 #container {
   max-width: 600px;
   margin: 2rem auto;
@@ -75,32 +77,36 @@
   --cssx-text: '+';
 }
 
-
 [data-instance=task-item] {
   --text: "default text";
   --done: "false";
 
   padding: 1rem;
   cursor: pointer;
+  display: flex;
+  width: 100%;
+  align-items: center;
 
   --cssx-on-click: update(--done, if(get-var(--done), "false", "true"));
-  --cssx-on-update:
-    update(checkbox, --checked, if(get-var(--done), true, false))
-  ;
+  --cssx-on-update: update(checkbox, --checked, if(get-var(--done), true, false));
 
-  --cssx-children: div#checkbox;
+  --cssx-children: div#checkbox div#task-text button#delete-task;
 }
-[data-instance=task-item]::after {
+
+[data-instance=task-item] [data-element=task-text] {
+  flex: 2;
+}
+[data-instance=task-item] [data-element=task-text]::after {
   content: "[" var(--done) "] " var(--text);
+  padding-left: 0.8rem;
 }
 
 [data-instance=task-item]:not(:first-child) {
   content: "";
-  display: block;
   border-top: 1px solid var(--color-gray);
 }
 
-#checkbox {
+[data-instance=task-item] [data-element=checkbox] {
   --checked: false;
 
   width: 18px;
@@ -112,3 +118,8 @@
     update(background-color, if(get-var(--checked), get-var(--color-accent), transparent))
   ;
 }
+
+[data-instance=task-item] [data-element=delete-task] {
+  --cssx-text: 'Delete';
+  --cssx-on-click: remove-element(task-item);
+}