tripod-hero-marquee.html

<link rel="import" href="../polymer/polymer.html">

<!--
`tripod-hero-marquee` is an element for displaying a hero image/video/graphic/color overlaid with text.

It leaves the styling of the element and any contents to external
styles, and provides a collection of classes to position the content you
pass in using flexbox (with support also included for CSS Grid Positioning as
it gains more browser support!).

The component uses Shadow DOM v0 `content` elements as a sort of placeholder for you
to add your own markup to be rendered within the element.

All other content is distributed in a `.hero-content` container in the Shadow DOM.

With this approach, `tripod-hero-marquee` does the work of placing your content in the element,
while external or custom styles can be used to match style with the rest of your site.

Example: Use the `tripod-hero-marquee`
```html
<tripod-hero-marquee>
  <div slot="background" style="background-image:url(/image.jpg);background-size:cover;"></div>
  <h2>Headers, button, and backbround all slotted in from light DOM.</h2>
</tripod-hero-marquee>
```

### Styling

Custom property                  | Description                            | Default
---------------------------------|----------------------------------------|--------------------
`--tripod-hero-content-padding`     | Padding around the slotted in content                   | 50x
`--hero-content-grid-rows`    | Defines the CSS Grid rows for use with grid layout                  | 1fr 1fr 1fr
`--hero-content-grid-columns`    | Defines the CSS Grid columns for use with grid layout                  | 1fr 1fr 1fr
`--hero-header-styles`     | Style mixin for the header in mobile view | none
`--hero-header-desktop-styles` | Style mixin for the header in desktop view | none
`--hero-subheader-styles`     | Style mixin for the subheader in mobile view | none
`--hero-subheader-desktop-styles` | Style mixin for the subheader in desktop view | none
`--hero-cta-styles`     | Style mixin for the cta button | none


@group tripod
@element tripod-hero-marquee
@demo
@test test/index.html
-->


<link rel="import" href="tripod-hero-marquee-styles.html">

<dom-module id="tripod-hero-marquee">

  <template>

    <style include="tripod-hero-marquee-styles"></style>
    <style include="tripod-hero-marquee-flex-content"></style>
    <style include="tripod-hero-marquee-grid-content"></style>

    <content select=".hero-background"></content>
    <div class$="hero-content [[contentPosition]] [[contentLayout]]" desktop-layout$={{desktopLayout}}>
      <content select=".hero-header"></content>
      <content select=".hero-subheader"></content>
      <content select=".hero-cta"></content>
      <content></content>
    </div>

  </template>

  <script src="tripod-hero-marquee.js"></script>
</dom-module>