import { DeesElement, type TemplateResult, property, customElement, html, css, cssManager, } from '@design.estate/dees-element'; @customElement('dees-appui-appbar') export class DeesAppuiBar extends DeesElement { public static demo = () => html``; public static styles = [ cssManager.defaultStyles, css` :host { display: block; position: relative; height: 100%; width: 100%; height: 40px; border-bottom: 1px solid #202020; background: #000000; color: #ffffff80; font-size: 12px; display: grid; grid-template-columns: ${cssManager.cssGridColumns(3, 20)}; } .menus { display: flex; padding-left: 8px; cursor: default; } .menuItem { line-height: 24px; padding: 0px 8px; margin: 8px 0px; border-radius: 4px; } .menuItem:hover { background: #ffffff20; } .breadcrumbs { height: 24px; line-height: 24px; margin: 8px; border-radius: 8px; text-align: center; } `, ]; // INSTANCE public render(): TemplateResult { return html`
`; } }