Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>EDIT</strong> </p> <p><code>applyAuthorStyles</code> is deprecated or already removed.</p> <p>I haven't tried it myself yet, but it should work if the font-awesome styles are added to the component. This is cumbersome because the styles need to be added to each component where FA is used.</p> <p>Pixelate uses SASS with these variables: <a href="https://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss" rel="nofollow">https://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss</a> I haven't used SASS yet so I can't provide more details.</p> <p>Another solution is to add <code>* /deep/</code> in front of each selector.</p> <p>You can use this code to build a script that does this:</p> <pre class="lang-dart prettyprint-override"><code>import 'package:csslib/parser.dart'; import 'package:csslib/visitor.dart'; String transform(String src){ var printer = new ShadowDOMTransformPrinter(); printer.visitTree(parse(src), pretty: true); return printer.toString(); } class ShadowDOMTransformPrinter extends CssPrinter { void visitSelector(Selector selector){ emit(' * /deep/ '); super.visitSelector(selector); } } </code></pre> <p>This modified CSS doesn't work outside the shadowDOM therefor the modified and unmodified styles are needed (each selector once with and once without <code>/deep/</code></p> <p>See also <a href="https://groups.google.com/a/dartlang.org/forum/#!searchin/web/font%2420awesome/web/RAC8nE7DfTI/P4a8nlXMZjAJ" rel="nofollow">this discussion</a> and <a href="https://groups.google.com/a/dartlang.org/forum/#!searchin/web/%242Fdeep%242F%2420jmesserly/web/8bjmkiRFhDk/ba-IQmYoVmoJ" rel="nofollow">this one</a></p> <p><strong>-------</strong></p> <p>if you have the stylesheet reference at the page you need <code>bool get applyAuthorStyles =&gt; true;</code> in your custom element.</p> <p>Referencing the stylesheet in the custom element had a bug as stated above. The bug is fixed but the Dart version containing the fix is not yet released.</p> <p>In the meantime you can copy the contents of the stylesheet in a style tag inside the custom element <code>&lt;template&gt;</code>. In this case you won't need <code>applyAuthorStyles</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload