search

googlearchive / core-scroll-header-panel

Fancy scrolling effects where the header animates between tall and condensed states
19 stars 16 forks source link

Assign image and condenses color via properties #28

Open robdodson opened 9 years ago

robdodson commented 9 years ago

Right now to really get the awesome condenses transition I have to use the following snippet of CSS:

/* background for toolbar when it is at its full size */
core-scroll-header-panel::shadow #headerBg {
  background-image: url(https://www.polymer-project.org/components/core-scroll-header-panel/demos/images/bg9.jpg);
}
/* background for toolbar when it is condensed */
core-scroll-header-panel::shadow #condensedHeaderBg {
  background-color: #f4b400;
}

It would be great if I could assign the background-image and color as properties and everything would just magically work without needing any CSS on my part.

frankiefu commented 9 years ago

I disagree. I think is better to leave styling in CSS. This way you have more controls on how to style the background. You can use gradient, repeat an image or pattern, adjust the size of the background image, multiple backgrounds on the same header, and so on.

robdodson commented 9 years ago

I see your point. I was thinking it would be a convenient shorthand but not actually prevent the user from doing it in CSS if they prefer that approach.

shaulhadar commented 9 years ago

Hi, I think the best will be to have both, inline attributes and css reference....

Though I tried actually adding this css to the