mostly-themes.html

<!--
`mostly-themes`
@group Mostly UI
@element mostly-themes
-->
<dom-module id="mostly-themes">
  <template>
    <style>
      :host {
        display: block;
      }

      .content {
        display: flex;
        flex-wrap: wrap;
      }

      .content mostly-theme {
        padding: 2px 10px;
        flex-basis: calc(50% - 20px);
      }

      @media (max-width: 1024px) {
        .content mostly-theme {
          flex: 1 0 calc(100% - 16px);
        }
      }
    </style>

    <mostly-page>
      <div slot="header">[[i18n('app.themes.heading')]]</div>
      <div class="content">
        <mostly-slot slot="THEMES"></mostly-slot>
      </div>
    </mostly-page>

  </template>
  <script>
    Polymer({
      is: 'mostly-themes',
      behaviors: [Mostly.I18nBehavior]
    });
  </script>
</dom-module>