diff options
Diffstat (limited to '')
| -rw-r--r-- | examples/counter/index.html | 6 | ||||
| -rw-r--r-- | examples/counter/style.css | 6 | ||||
| -rw-r--r-- | examples/form/index.html | 6 | ||||
| -rw-r--r-- | examples/form/signup.css | 42 | ||||
| -rw-r--r-- | examples/form/style.css | 24 | ||||
| -rw-r--r-- | examples/todo-list/style.css | 9 |
6 files changed, 42 insertions, 51 deletions
diff --git a/examples/counter/index.html b/examples/counter/index.html index 158ee16..9aa89d2 100644 --- a/examples/counter/index.html +++ b/examples/counter/index.html @@ -1,9 +1,9 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <title>Counter example</title> - <meta charset="UTF-8"> - <link href="./style.css" rel="stylesheet"> + <meta charset="UTF-8" /> + <link href="./style.css" rel="stylesheet" /> </head> <body> <script async defer src="../../dist/index.js"></script> diff --git a/examples/counter/style.css b/examples/counter/style.css index 9cf50e0..b60785f 100644 --- a/examples/counter/style.css +++ b/examples/counter/style.css @@ -1,6 +1,6 @@ body { --cssx-children: container todo-container; - --cssx-on-load: js(console.log("what have we done?!")); + --cssx-on-load: js(console.log('what have we done?!')); } #container { @@ -11,7 +11,7 @@ body { #counter { } #counter::before { - content: "Count: " var(--count); + content: 'Count: ' var(--count); } #btn-increment { @@ -22,5 +22,5 @@ body { --cssx-on-click: update(container, --count, calc(var(--count) + 1)); } #btn-increment::after { - content: "Increment"; + content: 'Increment'; } diff --git a/examples/form/index.html b/examples/form/index.html index 1d55241..618b21b 100644 --- a/examples/form/index.html +++ b/examples/form/index.html @@ -1,9 +1,9 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <title>Register to this awesome website</title> - <meta charset="UTF-8"> - <link href="./style.css" rel="stylesheet"> + <meta charset="UTF-8" /> + <link href="./style.css" rel="stylesheet" /> </head> <body> <script async defer src="../../dist/index.js"></script> diff --git a/examples/form/signup.css b/examples/form/signup.css index 96b9ac1..1a5f3ff 100644 --- a/examples/form/signup.css +++ b/examples/form/signup.css @@ -1,11 +1,10 @@ - #signup-page-content { border: 1px solid #888; padding: 1rem; max-width: 700px; margin: 1rem auto; - --cssx-disgustingly-set-innerhtml: <h1 class="form-title">Sign-<b>Up</b></h1>; + --cssx-disgustingly-set-innerhtml: "<h1 class= 'form-title'>Sign-<b>Up</b></h1>"; --cssx-children: form#form; --count: '0'; @@ -19,29 +18,26 @@ color: gray; } .form-title b { - font-weight: bold; color: black; + font-weight: bold; + color: black; } #form { display: block; - --cssx-on-submit: - prevent-default() - add-class(form, 'submitting') - request('/examples/') - remove-class(form, 'submitting') - add-class(form, 'submitted') - ; + --cssx-on-submit: prevent-default() add-class(form, 'submitting') + request('/examples/') remove-class(form, 'submitting') + add-class(form, 'submitted'); --cssx-children: input#input-email input#input-password actions #message; } #form.submitted #message::after { display: block; - content: "Form submitted successfully"; + content: 'Form submitted successfully'; } #form.submitting #submit-btn { pointer-events: none; - opacity: .5; + opacity: 0.5; } #form input { @@ -52,21 +48,18 @@ } #input-email { - --cssx-on-mount: - set-attr('type', 'email') - set-attr('name', 'email') + --cssx-on-mount: set-attr('type', 'email') set-attr('name', 'email') set-attr('required', 'true') - set-attr('placeholder', 'Email. Eg:- mail@postbox.com') - ; + set-attr('placeholder', 'Email. Eg:- mail@postbox.com'); } #input-password { - --cssx-on-mount: - set-attr('type', 'password') - set-attr('name', 'password') + --cssx-on-mount: set-attr('type', 'password') set-attr('name', 'password') set-attr('required', 'true') - set-attr('placeholder', 'Password. Eg:- password, password1, password2, password123') - ; + set-attr( + 'placeholder', + 'Password. Eg:- password, password1, password2, password123' + ); } #actions { @@ -79,5 +72,6 @@ padding: 0.4rem 0.7rem; --cssx-on-mount: set-attr('type', 'submit'); } -#submit-btn::after { content: "Sign-Up"; } - +#submit-btn::after { + content: 'Sign-Up'; +} diff --git a/examples/form/style.css b/examples/form/style.css index b79f265..113ab81 100644 --- a/examples/form/style.css +++ b/examples/form/style.css @@ -8,22 +8,25 @@ body * { #signup-btn { display: inline-block; background: #5180e9; - color: #000; + color: #fff; + border: none; + outline: none; padding: 0.5rem 1rem; cursor: pointer; --cssx-on-mount: set-attr('type', 'button'); - --cssx-on-click: - add-class(signup-page, 'loading') - add-class(signup-btn, 'loading') - delay(0.5s) + --cssx-on-click: add-class(signup-page, 'loading') + add-class(signup-btn, 'loading') delay(0.5s) load-cssx(signup-page-content, './signup.css') - remove-class(signup-page, 'loading') - remove-class(signup-btn, 'loading') - ; + remove-class(signup-page, 'loading') remove-class(signup-btn, 'loading'); +} +#signup-btn::after { + content: 'Register now to start your free trail for $99'; +} +#signup-btn:hover { + opacity: 0.8; } -#signup-btn::after { content: "Register now to start your free trail for $99"; } #signup-btn.loading { pointer-events: none; opacity: 0.4; @@ -33,6 +36,5 @@ body * { --cssx-children: signup-page-content; } #signup-page.loading::after { - content: "Loading..."; + content: 'Loading...'; } - diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index aeffde5..7533210 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -15,14 +15,11 @@ body { --cssx-on-click: update( todo-container, --todo-list, - list-append( - var(--todo-list), - tuple(get-attr(input-field, value), false) - ) + list-append(var(--todo-list), tuple(get-attr(input-field, value), false)) ); } #submit-btn::after { - content: "Submit"; + content: 'Submit'; } #todo-list { @@ -30,9 +27,7 @@ body { } #todo-item { - } #todo-item::after { content: var(--todo-item); } - |