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

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2021-11-21 16:08:27 +01:00
parent 2ad8d0a9fd
commit 6ff89390b7
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ts/domtools.breakpoints.ts
View File

@ -1,6 +1,6 @@
import { DomTools } from './domtools.classes.domtools'; import { DomTools } from './domtools.classes.domtools';
import { CSSResult } from 'lit-element'; import { CSSResult, unsafeCSS } from 'lit-element';
export const desktop = 1240; export const desktop = 1240;
export const tablet = 1024; export const tablet = 1024;
@ -10,34 +10,34 @@ export const phone = 400;
export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone'; export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
export const cssForTablet = (cssArg: CSSResult) => { export const cssForTablet = (cssArg: CSSResult) => {
return ` return unsafeCSS(`
@container wccToolsViewport (min-width: ${tablet}px) { @container wccToolsViewport (min-width: ${tablet}px) {
${cssArg.cssText} ${cssArg.cssText}
} }
@media (min-width: ${tablet}px) { @media (min-width: ${tablet}px) {
${cssArg.cssText} ${cssArg.cssText}
} }
`; `);
}; };
export const cssForPhablet = (cssArg: CSSResult) => { export const cssForPhablet = (cssArg: CSSResult) => {
return ` return unsafeCSS(`
@container wccToolsViewport (min-width: ${phablet}px) { @container wccToolsViewport (min-width: ${phablet}px) {
${cssArg.cssText} ${cssArg.cssText}
} }
@media (min-width: ${phablet}px) { @media (min-width: ${phablet}px) {
${cssArg.cssText} ${cssArg.cssText}
} }
`; `);
}; };
export const cssForPhone = (cssArg: CSSResult) => { export const cssForPhone = (cssArg: CSSResult) => {
return ` return unsafeCSS(`
@container wccToolsViewport (min-width: ${phone}px) { @container wccToolsViewport (min-width: ${phone}px) {
${cssArg.cssText} ${cssArg.cssText}
} }
@media (min-width: ${phone}px) { @media (min-width: ${phone}px) {
${cssArg.cssText} ${cssArg.cssText}
} }
`; `);
}; };