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

74 lines
2.4 KiB
TypeScript
Raw Normal View History

2020-05-11 00:36:58 +00:00
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
2020-06-01 13:18:51 +00:00
import * as domtools from '@designestate/dees-domtools';
2020-05-11 00:36:58 +00:00
@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 `
2020-06-01 13:18:51 +00:00
padding: 0px ${
(document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
}px;
2020-05-11 00:36:58 +00:00
`;
case 'phablet':
return `
2020-06-01 13:18:51 +00:00
padding: 0px ${
(document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
}px;
2020-05-11 00:36:58 +00:00
`;
case 'phone':
return `
2020-06-01 13:18:51 +00:00
padding: 0px ${
(document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
}px;
2020-05-11 00:36:58 +00:00
`;
}
})()}
}
2020-06-01 13:22:54 +00:00
2020-05-11 00:36:58 +00:00
.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>
`;
}
}