oo-toolbar.html

<link rel="import" href="../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../paper-styles/paper-styles-classes.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../polymer/polymer.html">

<dom-module id="oo-toolbar">
  <template>
    <style>
      :host {
        display: block;
      }

      app-toolbar {
        background: var(--oo-toolbar-background);
        color: var(--oo-toolbar-color);
        @apply --shadow-elevation-3dp;
        @apply --oo-toolbar-toolbar;
      }

      app-toolbar ::slotted([main-title][spacer]) {
        margin-left: 24px;
      }

      app-toolbar ::slotted([main-title][no-flex]) {
        flex: inherit;
      }

      app-toolbar ::slotted(paper-progress) {
        display: block;
        width: 100%;
        --paper-progress-active-color: rgba(0, 0, 0, 0.3);
        --paper-progress-container-color: transparent;
        @apply --oo-toolbar-toolbar-progress;
      }
    </style>

    <app-toolbar>
      <slot></slot>
    </app-toolbar>
  </template>

  <script>
    (function () {
      class OoToolbar extends Polymer.Element {
        static get is() {
          return "oo-toolbar"
        }
      }

      window.customElements.define(OoToolbar.is, OoToolbar)
    }())
  </script>
</dom-module>