From b749eb0ee945ca1cf9c9aa0ad16cb4dd6873de04 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Thu, 17 Aug 2023 21:39:07 +0530
Subject: feat: fixes styles for element + uses data-element for todo-list
 example

---
 examples/todo-list/style.css | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

(limited to 'examples')

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);
+}
-- 
cgit v1.3.1