dees-domtools/ts/domtools.css.breakpoints.ts
2022-03-02 17:44:45 +01:00

44 lines
1016 B
TypeScript

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