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

<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>