diff options
| author | Akshay Nair <phenax5@gmail.com> | 2023-08-13 21:12:14 +0530 |
|---|---|---|
| committer | Akshay Nair <phenax5@gmail.com> | 2023-08-13 21:12:14 +0530 |
| commit | 6411d58b48682c65165a1e717a9bf837737887f3 (patch) | |
| tree | a56db95e45f0a68c2536cde827bd3c3c4a023088 /examples | |
| parent | 78550c0d1c7037b17bdaa9413351b759b20772c0 (diff) | |
| download | css-everything-6411d58b48682c65165a1e717a9bf837737887f3.tar.gz css-everything-6411d58b48682c65165a1e717a9bf837737887f3.zip | |
fix: get-var hack
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/todo-list/index.html | 10 | ||||
| -rw-r--r-- | examples/todo-list/style.css | 106 |
2 files changed, 95 insertions, 21 deletions
diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html new file mode 100644 index 0000000..064ef2b --- /dev/null +++ b/examples/todo-list/index.html @@ -0,0 +1,10 @@ +<!doctype html> +<html lang="en"> + <head> + <title>Task destroyer</title> + <link href="./style.css" rel="stylesheet" /> + </head> + <body> + <script async defer src="../../dist/renderer/index.js"></script> + </body> +</html> diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index 7533210..5316d41 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -1,33 +1,97 @@ -body { - --cssx-children: todo-container; -} +:root { + --color-gray: #cccccc; + --color-accent: #5180e9; + + font-size: 16px; + color: #555; -#todo-container { - --cssx-children: todo-input todo-list; - --todo-list: list(); + --cssx-children: main#container; } -#todo-input { - --cssx-children: input-field submit-btn; +#container { + max-width: 600px; + margin: 2rem auto; + border: 1px solid var(--color-gray); + border-radius: 5px; + overflow: hidden; + + --cssx-children: form#task-input-form #task-list; } -#submit-btn { - --cssx-on-click: update( - todo-container, - --todo-list, - list-append(var(--todo-list), tuple(get-attr(input-field, value), false)) - ); +#task-input-form { + display: flex; + width: 100%; + + /* prettier-ignore */ + --cssx-on-submit: + prevent-default() + add-children( + task-list, + instance(div#task-item, map(--text: attr(text-input, 'value'))) + ) + set-attr(text-input, value, '') + ; + + /* prettier-ignore */ + --cssx-on-mount: + add-children( + task-list, + instance(div#task-item, map(--text: "Buy lemons")) + ) + add-children( + task-list, + instance(div#task-item, map(--text: "Make lemonaide")) + ) + add-children( + task-list, + instance(div#task-item, map(--text: "Kill all the non-believers")) + ) + ; + + /* prettier-ignore */ + --cssx-children: + input#text-input[placeholder="Eg: Buy Milk"] + button#create-task-btn[type=submit] + ; } -#submit-btn::after { - content: 'Submit'; + +#text-input { + display: block; + width: 100%; + padding: 0.7rem 1rem; + font-size: 1rem; + border: none; + border-bottom: 1px solid var(--color-gray); } -#todo-list { - --cssx-iter-children: iter(var(--todo-list), --todo-item, todo-item); +#create-task-btn { + padding: 0 2rem; + background-color: var(--color-accent); + color: white; + font-weight: bold; + border: none; + font-size: 1.2rem; + + --cssx-text: '+'; } -#todo-item { + +[data-instance=task-item] { + --text: "default text"; + --checked: "false"; + + padding: 1rem; + cursor: pointer; + + --cssx-on-click: update(--checked, if(get-var(--checked), "false", "true")); } -#todo-item::after { - content: var(--todo-item); +[data-instance=task-item]::after { + content: "[" var(--checked) "] " var(--text); } + +[data-instance=task-item]:not(:first-child) { + content: ""; + display: block; + border-top: 1px solid var(--color-gray); +} + |