cli/assets/templates/website/ts_web/elements/header.ts

63 lines
1.1 KiB
TypeScript
Raw Normal View History

2024-06-21 17:48:43 +00:00
import {
customElement,
DeesElement,
property,
html,
cssManager,
unsafeCSS,
css,
TemplateResult,
} from '@design.estate/dees-element';
@customElement('default-header')
export class DefaultHeader extends DeesElement {
@property()
public someProperty = 'someProperty';
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
height: 100px;
}
:host([hidden]) {
display: none;
}
.headerMain {
background: var(--background-accent);
color: #fff;
position: relative;
z-index: 1;
height: 100px;
}
.headerMain:after {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 60%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-2deg);
transform-origin: 100%;
z-index: -1;
}
`,
];
public render(): TemplateResult {
return html`
<style></style>
<div class="headerMain">${this.someProperty}</div>
<slot></slot>
`;
}
}