I'm importing *paper-toolbar *component.
Only texts are visible but CSS are not reflecting.
Can anyone please help?
please check the code...
<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../app-layout/app-layout.html">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<dom-module id="nav-bar">
<template>
<style>
html, body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
background: #f1f1f1;
max-height: 368px;
}
app-toolbar {
background-color: #4285f4;
color: #fff;
}
paper-icon-button {
--paper-icon-button-ink-color: white;
}
paper-icon-button + [main-title] {
margin-left: 24px;
}
paper-progress {
display: block;
width: 100%;
--paper-progress-active-color: rgba(255, 255, 255, 0.5);
--paper-progress-container-color: transparent;
}
app-header {
@apply --layout-fixed-top;
color: #fff;
--app-header-background-rear-layer: {
background-color: #ef6c00;
};
}
app-drawer {
--app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
--app-drawer-content-container: {
background-color: #B0BEC5;
}
}
sample-content {
padding-top: 64px;
}
</style>
<paper-toolbar>
<paper-icon-button slot="top" icon="menu"></paper-icon-button>
<span slot="top" class="title">Title</span>
<paper-icon-button slot="top" icon="refresh"></paper-icon-button>
<paper-icon-button slot="top" icon="add">+</paper-icon-button>
</paper-toolbar>
</template>
<script>
class NavBar extends Polymer.Element {
static get is() {
return 'nav-bar';
}
constructor() {
super();
}
}
customElements.define(NavBar.is, NavBar);
</script>
</dom-module>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/bffee7c1-89fc-409c-abff-4f50ec396b68%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
