design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2020-12-09 18:32:11 +00:00
parent 5cf4752ad9
commit 91b9c424d8
3 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ts_web/elements/wcc-frame.ts
View File

@ -1,9 +1,9 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('wcc-frame')
export class WccFrame extends LitElement {
export class WccFrame extends DeesElement {
@property()
public viewport: string;
@ -12,7 +12,6 @@ export class WccFrame extends LitElement {
<style>
:host {
border: 10px solid #ffaeaf;
background: #222;
position: absolute;
left: 200px;
right: 0px;
@ -55,14 +54,25 @@ export class WccFrame extends LitElement {
: 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;
${this.goBright ? `
radial-gradient(#CCCCCC 3px, transparent 4px),
radial-gradient(#CCCCCC 3px, transparent 4px),
linear-gradient(#eeeeee 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #CCCCCC 75px, #CCCCCC 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #CCCCCC 76px, #CCCCCC 77px, transparent 78px, transparent 109px),
#eeeeee;
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
` : `
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">