app-theme.html not working in custom element
Posted By: Anonymous
I’m using polymer to create a web app, and I’m using a custom element named side-bar, and I have an app-theme.html that has all the styles for the app. But when I try to put the side-bar in it’s own template in side-bar.html and import app-theme.html it doesn’t use the styles that are in app-theme.html, but if I keep it in index.html it uses the app-theme. I have tried converting app-theme.html to css and use
<style is="custom-style">
@import url("path/to/theme.css");
</style>
But native css can’t use custom styles that polymer uses. How would I go on about doing this? Here is my code:
side-bar.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="elements.html">
<dom-module id="side-bar">
<template>
<paper-tabs id="tabs" selected="0" scrollable>
<paper-tab>NAVIGATION</paper-tab>
<paper-tab>FRIENDS</paper-tab>
<paper-tab>NOTIFICATIONS</paper-tab>
</paper-tabs>
<div>
<iron-pages selected="0">
<div id="navigation">
<paper-menu id="navMenu">
<paper-icon-item>
<iron-icon icon="home" item-icon></iron-icon>
<paper-item-body two-line selected>
<div>Home Page</div>
<div secondary>Site home page</div>
</paper-item-body>
</paper-icon-item>
<paper-icon-item>
<iron-icon icon="speaker-notes" item-icon></iron-icon>
<paper-item-body two-line>
<div>Chats</div>
<div secondary>Chats you are in.</div>
</paper-item-body>
</paper-icon-item>
<paper-icon-item>
<iron-icon icon="question-answer" item-icon></iron-icon>
<paper-item-body two-line>
<div>Forum</div>
<div secondary>Site Name Forum</div>
</paper-item-body>
</paper-icon-item>
<paper-icon-item>
<iron-icon icon="archive" item-icon></iron-icon>
<paper-item-body two-line>
<div>News & Announcements</div>
<div secondary>News & Announcements Archive</div>
</paper-item-body>
</paper-icon-item>
<paper-icon-item onclick="document.querySelector('#poll').toggle();">
<iron-icon icon="help" item-icon></iron-icon>
<paper-item-body two-line>
<div>Poll</div>
<div secondary>Most recent site poll.</div>
</paper-item-body>
</paper-icon-item>
</paper-menu>
<iron-collapse id="poll">
<div class="horizontal center-justified layout">
<div>
<get-poll></get-poll>
</div>
</div>
<center><paper-button onclick="submitForm()" class="ripple" tabindex="0"><iron-icon icon="check" style="margin-right:5px;"> </iron-icon>Submit</paper-button></center>
<br />
</iron-collapse>
</div>
<div id="friend">
<paper-icon-item>
<div class="avatar" style="background:url(images/gXegaUt.png)" item-icon></div>
<paper-item-body two-line>
<div>Joseph</div>
<div secondary>Online</div>
</paper-item-body>
<paper-checkbox></paper-checkbox>
</paper-icon-item>
<friends-lists></friends-lists>
<center><paper-button id="submitChatRequest" onclick="submitForm()" class="ripple" tabindex="0"><iron-icon icon="speaker-notes" style="margin-right:5px;"></iron-icon>Chat With Selected Users</paper-button></center>
</div>
<div id="notification">Page 3</div>
</iron-pages>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "side-bar"
});
</script>
app-theme.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<style is="custom-style">
:root {
--dark-primary-color: #303F9F;
--default-primary-color: #3F51B5;
--light-primary-color: #C5CAE9;
--text-primary-color: #FFFFFF;
--accent-color: #FF4081;
--primary-background-color: #C5CAE9;
--primary-text-color: #212121;
--secondary-text-color: #727272;
--disabled-text-color: #BDBDBD;
--divider-color: #B6B6B6;
}
#mainToolBar {
--paper-toolbar: {
background-color: var(--default-primary-color);
color: rgba(255,255,255,.84)
font-size: 18px;
padding: 0 0 0 16px;
font-weight: 500;
color: #fff;
margin: 0;
};
}
#userHeader {
--paper-toolbar: {
background: #616161;
font-size: 18px;
padding: 0 0 0 16px;
font-weight: 500;
color: #fff;
margin: 0;
};
}
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #fff;
/*-webkit-box-shadow: 4px 0px 5px 0px rgba(173,173,173,0.87);
-moz-box-shadow: 4px 0px 5px 0px rgba(173,173,173,0.87);
box-shadow: 4px 0px 5px 0px rgba(173,173,173,0.87);*/
};
}
#drawer paper-tab {
--paper-tab-ink: {
background-color: var(--accent-color);
color: var(--accent-color);
};
}
#drawer paper-tabs {
--paper-tabs-selection-bar-color: {
color: #fff;
background-color: #fff
};
--paper-tabs: {
background-color: var(--dark-primary-color) /*rgba(0, 0, 0, 0.5)*/;
color: white;
width: 100%
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
};
}
#navMenu {
--paper-menu-background-color: {
background-color: #eee;
};
--paper-menu-selected-item: {
color: var(--dark-primary-color);
background-color:rgba(225, 225, 225, 0.2);
};
}
</style>
What it looks like in the custom element
What it looks like when it’s not in the custom element and just in index.html, what it’s suppose to look like.
Solution
Importing the app-theme.html like this will always apply the style to the main document, and won’t be scoped to style the local dom of your element, so including the css in your element is the way you go.
You can either do this by including the style directly in your element…
<dom-module id="side-bar">
<style>
#navMenu {
--paper-menu: {
background-color: #eee;
};
--paper-menu-selected-item: {
color: var(--dark-primary-color);
background-color:rgba(225, 225, 225, 0.2);
};
}
...
</style>
<template>
....
</template>
<script>
</script>
</dom-module>
…or as you tried by having it in an external css file, in which case you would have to use a special way to include the stylesheet to make sure all the custom style features work:
<dom-module id="side-bar">
<link rel="import" type="css" href="side-bar.css">
<template>
....
</template>
<script>
</script>
</dom-module>
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
