@progressive-development/pd-content/dist/pd-panel-viewer/PdPanel.js

Progressive Development content components.

import { LitElement, css, html } from 'lit';

class PdPanel extends LitElement {
  static {
    this.styles = css`
    :host {
      background: var(--pd-panel-bg, #afc1d2);
      border-radius: var(--pd-panel-border-radius, 0.2em);
    }

    /* Default styles for content */
    #content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }
    #content > slot::slotted(*) {
      margin: 0;
    }
  `;
  }
  render() {
    return html`
      <div id="content">
        <slot></slot>
      </div>
    `;
  }
}

export { PdPanel };