Add --paper-card-header-background-color variable

[MattMS]

Would it be possible to add a variable to control the background-color of .header? This would be similar to --paper-card-header-color or --paper-card-background-color.

My guess would be adding the following to the .header block styles:

background-color: var(--paper-card-header-background-color, var(--primary-background-color));

I am fairly new to Polymer, so I'm a bit hesitant to rush into making a PR myself without clarifying any extra considerations.

[notwaldorf]

Hmm, would this be so that you would have a header image and a header title that would have a background? Do you have an example of how this would look like in action (in my mind it's pretty clunky)

[MattMS]

Actually I'm using a paper-card without an image, just a title and a background colour. I ended up making my own component based on the code here, so I could add an icon beside the title. 😄

I figured out how to get similar functionality with CSS mixins (whatever @apply uses), but it seems to be easier to use CSS variables in Stylus.

This issue was also for me to learn the level of customisation that is acceptable in these components.

[davie-robertson]

I'm new to this Material design metaphor too and I've been searching for such a property - which led me here.

I also intend to show a list of cards to a user and would ideally like to categorise the cards based on metadata (say 6 or 7 different coloured headers). Each card will contain a few fields of text, an action-area/buttons and an iron-collapse element to expand containing more data.

I guess notwaldorf is right in that it may be clunky and we're bending the design metaphor to fit our needs rather than looking at something like a paper-list with different coloured circles etc. for each category/card, then just expand each of those items on click? I guess that would make things easier to sort for users too.

Sorry of this is the wrong place to post this - but we seem to be looking at the same thing.