Menu
I am working on a project that uses Polymer. One component that is unclear to me is how to use the style mixins. For example, I have something like this:
<html>
<head>
<script src="bower/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower/polymer/polymer.html">
<link rel="import" href="bower/paper-styles/paper-styles.html">
</head>
<body unresolved class="fullbleed">
<template is="dom-bind" id="app">
<paper-material>
<paper-item>
<span class="paper-font-title">Welcome</span>
<span class="flex"></span>
<div class="secondary">
Today Is: <span>[[ date ]]</span>
</div>
</paper-item>
</paper-material>
</template>
</body>
</html>
Basically, I'm trying to use the paper-font-title and secondary typography styles. For some reason though, its like the styles aren't loaded. I looked in the console and I am not getting any 404s. For that reason, I assume the paper styles are being loaded. Why can't I use them?
683
To use style mixins add a <style is="custom-style"></style> to your body.
As content of the style tag add CSS rules like
some-selector {
@apply(--some-mixin-name);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
