ACSS code is highlighting but not validating.

At least when it is in the head of an HTML document and inside <style type="text/acss"></style>.

Wish I could show you a picture...

Oh wait, I can...

http://dragontheory.com/D7460N/index.html.screen.JPG

Here is the same HTML...

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="D7460N" />
  <meta name="description" content="Your data your way. Fast/Easy/Secure" />
  <title>D7460N APP</title>
  <link type="image/svg+xml" rel="icon" href="/assets/images/logo.svg" />
  <link type="text/css" rel="stylesheet" href="assets/css/styles.css" />
  <link type="text/css" rel="stylesheet" href="assets/css/scrollbars.css" />
  <style type="text/acss">
    /* Toggle panel-list open/close by clicking list-label */
    app-panel:nth-of-type(2) > list-item:not(:first-of-type):not(:last-of-type):click {
      self + panel-list {toggle-class: .close;}
    }
    /* RESET PANEL */
    app-panel:nth-of-type(2) > list-item list-cell:last-child span:click {
      panel-list {remove-class: .close;}
    }
    
    /* OPEN PANEL (it is has list-items) */
    panel-list:if-exists(list-item):observe {
      self < app-panel {add-attribute: display: grid;}
    }
    
    /* CLOSE PANEL (by removing it's list items) */
    app-panel:nth-of-type(4) > list-item list-cell:last-child span:click {
      remove: app-panel:nth-of-type(4) panel-list list-item;
    }
    app-panel:nth-of-type(5) > list-item list-cell:last-child span:click {
      remove: app-panel:nth-of-type(5) panel-list list-item;
    }
    
    /* CLOSE LISTS */
    app-panel panel-list:not-if-exists(list-item):observe {
      self {add-class: .close;}
    }

    @command conditional if-html-contains {=
      return (eventSelector.innerHTML.indexof(conditionalValue)!== -1) ? true : false;
    =}

    app-panel:nth-of-type(4) list-cell:last-of-type:if-html-contains(,):observe {
      run: {=
        o.obj.innerHTML = o.obj.innerHTML.replace(/,/g, '<br />');
      =};
    }
  </style>
</head>

<body></body>
</html>

Requests for improvements #2

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions