From 629993f2d7de1270d3aaa4ab2a6f9571cdffd621 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Thu, 10 Aug 2023 23:26:49 +0530 Subject: feat: integrates parser and evaluator and creates a complete working example --- examples/api/style.css | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) (limited to 'examples/api/style.css') diff --git a/examples/api/style.css b/examples/api/style.css index d1be912..213d9e2 100644 --- a/examples/api/style.css +++ b/examples/api/style.css @@ -3,20 +3,34 @@ body { } #load-btn { + display: inline-block; + border: 1px solid gray; + padding: 0.5rem 1rem; + cursor: pointer; + --cssx-on-click: + add-class(output-container, 'loading') add-class(load-btn, 'loading') - get('./more-style.css') - add-class(load-btn, 'hidden'); + delay('2000') + remove-class(output-container, 'loading') + add-class(output-container, 'loaded') + remove-class(load-btn, 'loading') + js-eval('alert("Loaded page")') + ; } +#load-btn::after { content: "Click me for magic"; } #load-btn.loading { pointer-events: none; opacity: 0.4; } -#load-btn.hidden { - display: none; -} #output-container { --cssx-children: output-container-content; } +#output-container.loading::after { + content: "Loading..."; +} +#output-container.loaded::after { + content: "This content is loaded my guy"; +} -- cgit v1.3.1