diff options
| author | Akshay Nair <phenax5@gmail.com> | 2023-08-10 18:18:25 +0530 |
|---|---|---|
| committer | Akshay Nair <phenax5@gmail.com> | 2023-08-10 18:18:25 +0530 |
| commit | 6a04167058b59b54b183104a1cf1b1b2cf8d7e9a (patch) | |
| tree | b8c6b6c722fec247d56a8d1f15ac9c6f8da81fbd /examples | |
| parent | b6213f660b6a706f48289b492f305bc2f4620f80 (diff) | |
| download | css-everything-6a04167058b59b54b183104a1cf1b1b2cf8d7e9a.tar.gz css-everything-6a04167058b59b54b183104a1cf1b1b2cf8d7e9a.zip | |
feat: adds dummy example ideas
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/api/index.html | 11 | ||||
| -rw-r--r-- | examples/api/style.css | 22 | ||||
| -rw-r--r-- | examples/todo-list/style.css | 38 |
3 files changed, 71 insertions, 0 deletions
diff --git a/examples/api/index.html b/examples/api/index.html new file mode 100644 index 0000000..158ee16 --- /dev/null +++ b/examples/api/index.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Counter example</title> + <meta charset="UTF-8"> + <link href="./style.css" rel="stylesheet"> + </head> + <body> + <script async defer src="../../dist/index.js"></script> + </body> +</html> diff --git a/examples/api/style.css b/examples/api/style.css new file mode 100644 index 0000000..ad1dff9 --- /dev/null +++ b/examples/api/style.css @@ -0,0 +1,22 @@ +body { + --cssx-children: load-btn output-container; +} + +#load-btn { + --cssx-on-click: + add-class(load-btn, 'loading') + get(url('./more-style.css')) + add-class(load-btn, 'hidden'); +} +#load-btn.loading { + pointer-events: none; + opacity: 0.4; +} +#load-btn.hidden { + display: none; +} + +#output-container { + --cssx-children: output-container-content; +} + diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css new file mode 100644 index 0000000..aeffde5 --- /dev/null +++ b/examples/todo-list/style.css @@ -0,0 +1,38 @@ +body { + --cssx-children: todo-container; +} + +#todo-container { + --cssx-children: todo-input todo-list; + --todo-list: list(); +} + +#todo-input { + --cssx-children: input-field submit-btn; +} + +#submit-btn { + --cssx-on-click: update( + todo-container, + --todo-list, + list-append( + var(--todo-list), + tuple(get-attr(input-field, value), false) + ) + ); +} +#submit-btn::after { + content: "Submit"; +} + +#todo-list { + --cssx-iter-children: iter(var(--todo-list), --todo-item, todo-item); +} + +#todo-item { + +} +#todo-item::after { + content: var(--todo-item); +} + |