updated app

node_modules/derby-examples/sink/views/app/liveCss.html

@@ -0,0 +1,44 @@
+<Body:>
+  <select multiple>
+    <optgroup label="CSS properties">
+      {#each liveCss.styles}<option selected={.active}>{.prop}</option>{/}
+    </optgroup>
+  </select>
+  <div>
+    {#each liveCss.styles}
+      <p>
+        <input type="checkbox" checked="{.active}"> 
+        <input value="{.prop}" disabled="{not(.active)}"> 
+        <input value="{.value}" disabled="{not(.active)}"> 
+        <button x-bind="click: liveCss.deleteStyle">Delete</button>
+      </p>
+    {/}
+  </div>
+  <button x-bind="click: liveCss.addStyle">Add</button>
+  <h3>Currently applied:</h3>
+  <div>
+    {#if _hasActiveStyles}
+      <p>&#123;</p>
+      <ul class=css>
+        {#each liveCss.styles}
+          <li>{cssProperty(this)}</li>
+        {/}
+      </ul>
+      <p>}</p>
+    {else}
+      (None)
+    {/}
+  </div>
+  <div>
+    {#unless _poppedOut}
+      <h3 style=display:inline-block>Output:</h3> &nbsp; <a href="/live-css/popout">Pop out</a>
+    {/}
+  </div>
+  <div class="{#if _poppedOut}poppedOut{/} cssOutput">
+    <p class=popupTitle><a href="/live-css">Close</a></p>
+    <div class=popupContent>
+      <p style="{#each liveCss.styles}{cssProperty(this)}{/}" contenteditable>
+        {unescaped liveCss.outputText}
+      </p>
+    </div>
+  </div>