dees-domtools/ts/domtools.elementbasic.ts

70 lines
1.6 KiB
TypeScript
Raw Normal View History

2020-05-25 15:57:47 +00:00
import * as plugins from './domtools.plugins';
import { DomTools } from './domtools.classes.domtools';
2020-09-13 14:57:30 +00:00
import { scrollBarStyles } from './domtools.css.theme';
2020-05-25 15:57:47 +00:00
2020-11-23 20:41:26 +00:00
import { html, LitElement } from 'lit-element';
2020-09-13 14:57:30 +00:00
/**
* styles to be included in every webcomponent
*/
2020-09-13 15:53:30 +00:00
export const styles = html`
2020-05-25 15:57:47 +00:00
<style>
* {
2020-11-25 15:14:48 +00:00
transition: background 0.1s, color 0.1s;
2020-05-25 15:57:47 +00:00
box-sizing: border-box;
}
2020-09-13 14:57:30 +00:00
2021-03-10 16:57:25 +00:00
:host {
font-family: 'Roboto', sans-serif;
}
2020-09-13 14:57:30 +00:00
${scrollBarStyles}
2020-05-25 15:57:47 +00:00
</style>
`;
/**
* a basic setup for elements
* makes sure everything is in check
*/
2020-11-23 20:41:26 +00:00
export const setup = async (elementArg?: LitElement): Promise<DomTools> => {
2020-05-25 15:57:47 +00:00
const domTools = await DomTools.setupDomTools();
2020-11-23 20:41:26 +00:00
if (elementArg) {
2020-12-07 03:13:34 +00:00
// lets do something with the element
// not used right now
2020-11-23 20:41:26 +00:00
}
2020-05-25 15:57:47 +00:00
domTools.runOnce('elementBasicSetup', async () => {
// bodyStyles
domTools.setGlobalStyles(`
body {
margin: 0px;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
`);
// material font
domTools.setGlobalStyles(`
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
`);
// Roboto Font
domTools.setGlobalStyles(`
2020-09-16 11:29:26 +00:00
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400');
2020-09-15 20:56:33 +00:00
`);
// scrollbars
domTools.setGlobalStyles(`
${scrollBarStyles}
2020-05-25 15:57:47 +00:00
`);
});
2020-11-21 16:50:13 +00:00
return domTools;
2020-05-25 15:57:47 +00:00
};