dees-domtools/ts/domtools.breakpoints.ts
2020-05-23 16:55:36 +00:00

61 lines
1.3 KiB
TypeScript

export const desktop = 1240;
export const tablet = 700;
export const phablet = 500;
export const phone = 340;
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
let environment: TEnvironment = 'native';
export const setEnvironment = envArg => {
environment = envArg;
};
export const cssForTablet = (contentArg) => {
if (environment === 'native' || environment === 'desktop') {
return `
@media (max-width: ${tablet}px) {
${contentArg}
}
`;
} else if (environment === 'tablet' || environment === 'phablet' || environment === 'phone') {
return `
@media (min-width: 0px) {
${contentArg}
}
`;
}
};
export const cssForPhablet = (contentArg) => {
if (environment === 'native' || environment === 'desktop') {
return `
@media (max-width: ${phablet}px) {
${contentArg}
}
`;
} else if (environment === 'phablet' || environment === 'phone') {
return `
@media (min-width: 0px) {
${contentArg}
}
`;
}
};
export const cssForPhone = (contentArg) => {
if (environment === 'native' || environment === 'desktop') {
return `
@media (max-width: ${phone}px) {
${contentArg}
}
`;
} else if (environment === 'phone') {
return `
@media (min-width: 0px) {
${contentArg}
}
`;
}
};