dees-wcctools/ts_web/elements/wcc-frame.ts

import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';

import * as domtools from '@designestate/dees-domtools';

@customElement('wcc-frame')
export class WccFrame extends LitElement {
  @property()
  public viewport: string;

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          border: 10px solid #ffaeaf;
          background: #222;
          position: absolute;
          left: 200px;
          right: 0px;
          top: 0px;
          bottom: 100px;
          overflow-y: auto;
          overflow-x: auto;
          ${(() => {
          switch (this.viewport) {
            case 'desktop':
              return `
                  padding: 0px 0px;
                `;
            case 'tablet':
              return `
                  padding: 0px ${
                    (document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
                  }px;
                `;
            case 'phablet':
              return `
                  padding: 0px ${
                    (document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
                  }px;
                `;
            case 'phone':
              return `
                  padding: 0px ${
                    (document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
                  }px;
                `;
          }
        })()}
        }
        
        .viewport {
          position: relative;
          ${this.viewport !== 'desktop'
          ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
          : html``}
          min-height: 100%;
          background:
            radial-gradient(#444444 3px, transparent 4px),
            radial-gradient(#444444 3px, transparent 4px),
            linear-gradient(#222222 4px, transparent 0),
            linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
            linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
            #222222;
            background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
            background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
        }
      </style>
      <div class="viewport">
        <slot></slot>
      </div>
    `;
  }
}