design.estate/dees-domtools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2021-11-26 16:21:11 +01:00
parent f5fd0662d3
commit 97583c650d
9 changed files with 116 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts/domtools.classes.domtools.ts
View File

@ -1,7 +1,7 @@
import * as plugins from './domtools.plugins';
import { Stringmap } from '@pushrocks/lik/dist_ts/lik.stringmap';
import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap';
import { TViewport } from './domtools.breakpoints';
import { TViewport } from './domtools.css.breakpoints';
import { Scroller } from './domtools.classes.scroller';
import { WebSetup } from '@pushrocks/websetup';

10
ts/domtools.classes.thememanager.ts
View File

@ -1,4 +1,3 @@
import { LitElement } from 'lit-element';
import { DomTools } from './domtools.classes.domtools';
import * as plugins from './domtools.plugins';
@ -29,16 +28,25 @@ export class ThemeManager {
this.themeObservable.next(this.goBrightBoolean);
}
/**
* set the theme of the website to bright
*/
public goBright() {
this.goBrightBoolean = true;
this.updateAllConnectedElements();
}
/**
* set the theme of the website to dark
*/
public goDark() {
this.goBrightBoolean = false;
this.updateAllConnectedElements();
}
/**
* simply toggle between bright and dark
*/
public toggleDarkBright() {
this.goBrightBoolean = !this.goBrightBoolean;
this.updateAllConnectedElements();

59
ts/domtools.css.basestyles.ts Normal file
View File

@ -0,0 +1,59 @@
import { DomTools } from './domtools.classes.domtools';
import { css, unsafeCSS } from 'lit';
/**
* changes scrollbar styles to be consistent across OS borders
*/
export const scrollBarStyles: string = (() => {
const returnStyles =
navigator.userAgent.indexOf('Mac OS X') !== -1
? css`
/* width */
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #666;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #777;
}
`.cssText
: ``;
return returnStyles;
})();
export const globalBaseStyles: string = css`
/* global material font */
@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 */
@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');
/* global body styles */
body {
margin: 0px;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
/* scroll bar styles */
${unsafeCSS(scrollBarStyles)}
`.cssText;

2
ts/domtools.breakpoints.ts → ts/domtools.css.breakpoints.ts
View File

@ -1,6 +1,6 @@
import { DomTools } from './domtools.classes.domtools';
import { CSSResult, unsafeCSS } from 'lit-element';
import { CSSResult, unsafeCSS } from 'lit';
export const desktop = 1240;
export const tablet = 1024;

31
ts/domtools.css.theme.ts
View File

@ -1,31 +0,0 @@
import { DomTools } from './domtools.classes.domtools';
/**
* changes scrollbar styles to be consistent across OS borders
*/
export const scrollBarStyles = (() => {
const returnStyles =
navigator.userAgent.indexOf('Mac OS X') !== -1
? `
/* width */
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #666;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #777;
}
`
: ``;
})();

33
ts/domtools.elementbasic.ts
View File

@ -1,8 +1,8 @@
import * as plugins from './domtools.plugins';
import { DomTools } from './domtools.classes.domtools';
import { scrollBarStyles } from './domtools.css.theme';
import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles';
import { html, LitElement, css, unsafeCSS } from 'lit-element';
import { html, LitElement, css, unsafeCSS } from 'lit';
export const staticStyles = css`
* {
@ -49,34 +49,7 @@ export const setup = async (elementArg?: LitElement): Promise<DomTools> => {
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(`
@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');
`);
// scrollbars
domTools.setGlobalStyles(`
${scrollBarStyles}
`);
domTools.setGlobalStyles(globalBaseStyles);
});
return domTools;
};

2
ts/index.ts
View File

@ -1,7 +1,7 @@
export * from './domtools.colors';
import * as elementBasic from './domtools.elementbasic';
import * as breakpoints from './domtools.breakpoints';
import * as breakpoints from './domtools.css.breakpoints';
import * as css from './domtools.css';
export { css, breakpoints, elementBasic };