64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
|
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
|
||
|
import * as domtools from '@design.estate/dees-domtools';
|
||
|
|
||
|
import * as deesCatalog from '@design.estate/dees-catalog';
|
||
|
deesCatalog;
|
||
|
|
||
|
@customElement('sio-subwidget-onboardme')
|
||
|
export class SioSubwidgetOnboardme extends DeesElement {
|
||
|
@property()
|
||
|
public showCombox = false;
|
||
|
|
||
|
public static demo = () => html`
|
||
|
<sio-subwidget-onboardme></sio-subwidget-onboardme>
|
||
|
`;
|
||
|
|
||
|
constructor() {
|
||
|
super();
|
||
|
domtools.DomTools.setupDomTools();
|
||
|
}
|
||
|
|
||
|
public render(): TemplateResult {
|
||
|
return html`
|
||
|
${domtools.elementBasic.styles}
|
||
|
<style>
|
||
|
|
||
|
:host {
|
||
|
display: block;
|
||
|
position: relative;
|
||
|
transition: all 0.1s;
|
||
|
min-height: 200px;
|
||
|
margin: 20px 20px 40px 20px;
|
||
|
background: ${this.goBright ? '#fafafa' : '#111111'};
|
||
|
border-radius: 16px;
|
||
|
border-top: 1px solid rgba(250,250,250,0.1);
|
||
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
|
||
|
padding: 24px 24px 32px 24px;
|
||
|
color: #CCC;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
:host(:hover) {
|
||
|
}
|
||
|
|
||
|
.brandingbox {
|
||
|
text-align: center;
|
||
|
position: absolute;
|
||
|
width: 100%;
|
||
|
bottom: 0px;
|
||
|
left: 0px;
|
||
|
font-size: 10px;
|
||
|
padding: 3px;
|
||
|
border-top: 1px solid rgba(250,250,250, 0.1);
|
||
|
font-family: 'Dees Code';
|
||
|
background: ${this.goBright ? '#eee' : '#111111'};
|
||
|
color: #666;
|
||
|
}
|
||
|
</style>
|
||
|
Or search through our documentation
|
||
|
<dees-input-text key="searchTerm" label="Search Term:"></dees-input-text>
|
||
|
<dees-button>Search</dees-button>
|
||
|
<div class="brandingbox">last updated: ${new Date().toISOString()}</div>
|
||
|
`;
|
||
|
}
|
||
|
}
|