trying to style the paper-button inside the template, I've tried different
sectors and only one is worked so how can i do the styling correctly.
so in the index.html i call iron-ajax element and one the last-response i
call a dom-repeat template
<iron-ajax id="aj" auto
url="url"
handle-as="json"
last-response="{{ajaxResponse}}"
contentType="text/HTML"
debounce-duration="300"></iron-ajax>
<div class="video">
<template is="dom-repeat" items="[[ajaxResponse]]" >
<paper-card image="[[item.fields.image]]">
<feed-bdy items="[[item]]"></feed-bdy>
and in the feed-bdy.html :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import"
href="../../bower_components/paper-styles/typography.html">
<dom-module is="feed-bdy">
<style >
:host{
--paper-button-ink-color: var(--paper-pink-a200);
paper-button.custom:hover{ background-color: var(--paper-indigo-100)
!import; }
}
:host paper-button.rea:hover{
--paper-button-ink-color: var(--paper-pink-a200);
color: red
}
--paper-button.custom:hover {
background-color: var(--paper-indigo-100) !import;
color: white !important;
}
paper-button:hover{
background-color:red !important;
}
</style>
<template id="repeater" is="dom-repeat" items="{{items}}">
<div class="card-content">
<div class="ar-header">
<h3><a href="#"> [[items.fields.title]]</a></h3>
</div>
<div class="content-bdy"></div>
</div>
[[_renderHTML(items)]]
<div class="card-actions">
<paper-button class="custom">إقراء المزيد !</paper-button>
<paper-button>
شارك
<iron-icon icon="reply"></iron-icon>
</paper-button>
</div>
</template>
<script>
Polymer({
is: 'feed-bdy',
properties: {
artId:{
type : String,
observer: '_renderHTML'
}
},
listeners :{
},
_renderHTML: function(items) {
// firstp to get only the first pargarph to put in the home page
var ss= items.fields.body;
//console.log(this.$$(".card-content"));
var firstp = ss.substring(0,ss.search("</p>")+4);
this.$$(".content-bdy").innerHTML += firstp;
},
_toggle : function(e){
var id = Polymer.dom(e).localTarget.title;
//console.log(id);
var moreInfo = document.getElementById(id);
// console.log(moreInfo);
var iconButton = Polymer.dom(e).localTarget;
iconButton.icon = moreInfo.opened ?
'hardware:keyboard-arrow-up'
:
'hardware:keyboard-arrow-down';
moreInfo.toggle();
}
});
</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/86b2e2ca-aa63-4424-91a7-e66a0a7b62d8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
