fix(core): update
This commit is contained in:
@ -4,6 +4,8 @@ import {
|
||||
TemplateResult,
|
||||
html,
|
||||
property,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
@ -38,32 +40,42 @@ export class TestDemoelement extends DeesElement {
|
||||
})
|
||||
public demoENum: ETestEnum = ETestEnum.first;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
css`
|
||||
.maincontainer,
|
||||
.themeindicator {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.maincontainer {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
.themeindicator {
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
background: ${cssManager.bdTheme('#fff', '#000')};
|
||||
}
|
||||
${domtools.breakpoints.cssForPhablet(css`
|
||||
.maincontainer,
|
||||
.themeindicator {
|
||||
border-radius: 50px;
|
||||
}
|
||||
`)}
|
||||
pre b {
|
||||
color: green;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<style>
|
||||
.maincontainer, .themeindicator {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.maincontainer {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
.themeindicator {
|
||||
color: ${this.goBright ? '#000' : '#fff'};
|
||||
background: ${this.goBright ? '#fff' : '#000'};
|
||||
}
|
||||
${domtools.breakpoints.cssForPhablet(`
|
||||
.maincontainer, .themeindicator {
|
||||
border-radius: 50px;
|
||||
}
|
||||
`)}
|
||||
pre b {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
||||
<div class="themeindicator">
|
||||
You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
|
||||
@ -72,7 +84,8 @@ export class TestDemoelement extends DeesElement {
|
||||
demoString is <b>"${this.demoString}"</b>
|
||||
demoNumber is <b>${this.demoNumber}</b>
|
||||
demoEnum is <b>"${this.demoENum}"</b>
|
||||
</pre>
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
Reference in New Issue
Block a user