cube-card-content.js

import '@polymer/paper-styles/paper-styles-classes.js';
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';

class CubeCardContent extends PolymerElement {
  static get is() {return 'cube-card-content'}

  static get template()
  {
    return html`<style>
      :host {
        position: relative;
        display: block;
        min-height: 40px;
        margin: 16px;
        margin-top: 0;
      }

      :host([slim]) {
        margin: 0;
      }

      ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5), ::slotted(h6) {
        @apply --paper-font-body2;
        margin: 4px 0 2px 0;
      }

      ::slotted(em) {
        @apply --paper-font-display1;
        text-decoration: none;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 20px;
      }

      ::slotted(p) {
        margin: 1px 0;
        @apply --paper-font-body1;
      }

      ::slotted(img) {
        width: 100%;
        margin: 16px -16px -15px -16px;
      }

      ::slotted(img.thumbnail) {
        width: 80px;
        height: 80px;
        margin: 0 0 16px 16px;
        float: right;
      }

      ::slotted(.error) {
        color: #ab0000;
      }

      ::slotted(.success) {
        color: #00ab00;
      }

      ::slotted(.info) {
        color: #0078ab;
      }
    </style>
    <slot></slot>`
  }
}

customElements.define(CubeCardContent.is, CubeCardContent);