statuspage/ts_web/elements/upl-statuspage-statusbar.ts

51 lines
1.2 KiB
TypeScript
Raw Normal View History

2023-01-05 12:37:28 +00:00
import { DeesElement, property, html, customElement, TemplateResult, cssManager, css } from '@designestate/dees-element';
2021-09-23 12:30:02 +00:00
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-statusbar': UplStatuspageStatusbar;
}
}
@customElement('upl-statuspage-statusbar')
export class UplStatuspageStatusbar extends DeesElement {
public static demo = () => html`
<upl-statuspage-statusbar></upl-statuspage-statusbar>
`;
constructor() {
super();
}
2023-01-05 12:37:28 +00:00
public static styles = [
cssManager.defaultStyles,
css`
:host {
2021-09-23 12:30:02 +00:00
padding: 20px 0px 15px 0px;
display: block;
2023-01-05 12:37:28 +00:00
background: ${cssManager.bdTheme('#eeeeeb', '#222222')};;
font-family: Inter;
2021-09-23 12:30:02 +00:00
color: #fff;
}
.mainbox {
margin: auto;
max-width: 900px;
text-align: center;
background: #19572E;
line-height: 50px;
border-radius: 3px;
}
2023-01-05 12:37:28 +00:00
`,
]
2021-09-23 12:30:02 +00:00
2023-01-05 12:37:28 +00:00
public render(): TemplateResult {
return html`
<style>
2021-09-23 12:30:02 +00:00
</style>
<div class="mainbox">
Everything is working normally!
</div>
`;
}
}