@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
505 lines • 17.7 kB
JavaScript
import { QUERIES } from "../../utils/mediaQuery";
export let SIZES = /*#__PURE__*/function (SIZES) {
SIZES["NONE"] = "none";
SIZES["FIFTY"] = "50";
SIZES["ONE_HUNDRED"] = "100";
SIZES["ONE_HUNDRED_FIFTY"] = "150";
SIZES["TWO_HUNDRED"] = "200";
SIZES["THREE_HUNDRED"] = "300";
SIZES["FOUR_HUNDRED"] = "400";
SIZES["FIVE_HUNDRED"] = "500";
SIZES["SIX_HUNDRED"] = "600";
SIZES["EIGHT_HUNDRED"] = "800";
SIZES["ONE_THOUSAND"] = "1000";
SIZES["ONE_THOUSAND_TWO_HUNDRED"] = "1200";
SIZES["ONE_THOUSAND_SIX_HUNDRED"] = "1600";
return SIZES;
}({});
export const marginClasses = {
[]: "m-0",
[]: "m-50",
[]: "m-100",
[]: "m-150",
[]: "m-200",
[]: "m-300",
[]: "m-400",
[]: "m-500",
[]: "m-600",
[]: "m-800",
[]: "m-1000",
[]: "m-1200",
[]: "m-1600",
[]: {
[]: "ld:m-0",
[]: "ld:m-50",
[]: "ld:m-100",
[]: "ld:m-150",
[]: "ld:m-200",
[]: "ld:m-300",
[]: "ld:m-400",
[]: "ld:m-500",
[]: "ld:m-600",
[]: "ld:m-800",
[]: "ld:m-1000",
[]: "ld:m-1200",
[]: "ld:m-1600"
},
[]: {
[]: "de:m-0",
[]: "de:m-50",
[]: "de:m-100",
[]: "de:m-150",
[]: "de:m-200",
[]: "de:m-300",
[]: "de:m-400",
[]: "de:m-500",
[]: "de:m-600",
[]: "de:m-800",
[]: "de:m-1000",
[]: "de:m-1200",
[]: "de:m-1600"
},
[]: {
[]: "tb:m-0",
[]: "tb:m-50",
[]: "tb:m-100",
[]: "tb:m-150",
[]: "tb:m-200",
[]: "tb:m-300",
[]: "tb:m-400",
[]: "tb:m-500",
[]: "tb:m-600",
[]: "tb:m-800",
[]: "tb:m-1000",
[]: "tb:m-1200",
[]: "tb:m-1600"
},
[]: {
[]: "lm:m-0",
[]: "lm:m-50",
[]: "lm:m-100",
[]: "lm:m-150",
[]: "lm:m-200",
[]: "lm:m-300",
[]: "lm:m-400",
[]: "lm:m-500",
[]: "lm:m-600",
[]: "lm:m-800",
[]: "lm:m-1000",
[]: "lm:m-1200",
[]: "lm:m-1600"
},
[]: {
[]: "mm:m-0",
[]: "mm:m-50",
[]: "mm:m-100",
[]: "mm:m-150",
[]: "mm:m-200",
[]: "mm:m-300",
[]: "mm:m-400",
[]: "mm:m-500",
[]: "mm:m-600",
[]: "mm:m-800",
[]: "mm:m-1000",
[]: "mm:m-1200",
[]: "mm:m-1600"
}
};
export const marginTopClasses = {
[]: "mt-0",
[]: "mt-50",
[]: "mt-100",
[]: "mt-150",
[]: "mt-200",
[]: "mt-300",
[]: "mt-400",
[]: "mt-500",
[]: "mt-600",
[]: "mt-800",
[]: "mt-1000",
[]: "mt-1200",
[]: "mt-1600",
[]: {
[]: "ld:mt-0",
[]: "ld:mt-50",
[]: "ld:mt-100",
[]: "ld:mt-150",
[]: "ld:mt-200",
[]: "ld:mt-300",
[]: "ld:mt-400",
[]: "ld:mt-500",
[]: "ld:mt-600",
[]: "ld:mt-800",
[]: "ld:mt-1000",
[]: "ld:mt-1200",
[]: "ld:mt-1600"
},
[]: {
[]: "de:mt-0",
[]: "de:mt-50",
[]: "de:mt-100",
[]: "de:mt-150",
[]: "de:mt-200",
[]: "de:mt-300",
[]: "de:mt-400",
[]: "de:mt-500",
[]: "de:mt-600",
[]: "de:mt-800",
[]: "de:mt-1000",
[]: "de:mt-1200",
[]: "de:mt-1600"
},
[]: {
[]: "tb:mt-0",
[]: "tb:mt-50",
[]: "tb:mt-100",
[]: "tb:mt-150",
[]: "tb:mt-200",
[]: "tb:mt-300",
[]: "tb:mt-400",
[]: "tb:mt-500",
[]: "tb:mt-600",
[]: "tb:mt-800",
[]: "tb:mt-1000",
[]: "tb:mt-1200",
[]: "tb:mt-1600"
},
[]: {
[]: "lm:mt-0",
[]: "lm:mt-50",
[]: "lm:mt-100",
[]: "lm:mt-150",
[]: "lm:mt-200",
[]: "lm:mt-300",
[]: "lm:mt-400",
[]: "lm:mt-500",
[]: "lm:mt-600",
[]: "lm:mt-800",
[]: "lm:mt-1000",
[]: "lm:mt-1200",
[]: "lm:mt-1600"
},
[]: {
[]: "mm:mt-0",
[]: "mm:mt-50",
[]: "mm:mt-100",
[]: "mm:mt-150",
[]: "mm:mt-200",
[]: "mm:mt-300",
[]: "mm:mt-400",
[]: "mm:mt-500",
[]: "mm:mt-600",
[]: "mm:mt-800",
[]: "mm:mt-1000",
[]: "mm:mt-1200",
[]: "mm:mt-1600"
}
};
export const marginRightClasses = {
[]: "mr-0",
[]: "mr-50",
[]: "mr-100",
[]: "mr-150",
[]: "mr-200",
[]: "mr-300",
[]: "mr-400",
[]: "mr-500",
[]: "mr-600",
[]: "mr-800",
[]: "mr-1000",
[]: "mr-1200",
[]: "mr-1600",
[]: {
[]: "ld:mr-0",
[]: "ld:mr-50",
[]: "ld:mr-100",
[]: "ld:mr-150",
[]: "ld:mr-200",
[]: "ld:mr-300",
[]: "ld:mr-400",
[]: "ld:mr-500",
[]: "ld:mr-600",
[]: "ld:mr-800",
[]: "ld:mr-1000",
[]: "ld:mr-1200",
[]: "ld:mr-1600"
},
[]: {
[]: "de:mr-0",
[]: "de:mr-50",
[]: "de:mr-100",
[]: "de:mr-150",
[]: "de:mr-200",
[]: "de:mr-300",
[]: "de:mr-400",
[]: "de:mr-500",
[]: "de:mr-600",
[]: "de:mr-800",
[]: "de:mr-1000",
[]: "de:mr-1200",
[]: "de:mr-1600"
},
[]: {
[]: "tb:mr-0",
[]: "tb:mr-50",
[]: "tb:mr-100",
[]: "tb:mr-150",
[]: "tb:mr-200",
[]: "tb:mr-300",
[]: "tb:mr-400",
[]: "tb:mr-500",
[]: "tb:mr-600",
[]: "tb:mr-800",
[]: "tb:mr-1000",
[]: "tb:mr-1200",
[]: "tb:mr-1600"
},
[]: {
[]: "lm:mr-0",
[]: "lm:mr-50",
[]: "lm:mr-100",
[]: "lm:mr-150",
[]: "lm:mr-200",
[]: "lm:mr-300",
[]: "lm:mr-400",
[]: "lm:mr-500",
[]: "lm:mr-600",
[]: "lm:mr-800",
[]: "lm:mr-1000",
[]: "lm:mr-1200",
[]: "lm:mr-1600"
},
[]: {
[]: "mm:mr-0",
[]: "mm:mr-50",
[]: "mm:mr-100",
[]: "mm:mr-150",
[]: "mm:mr-200",
[]: "mm:mr-300",
[]: "mm:mr-400",
[]: "mm:mr-500",
[]: "mm:mr-600",
[]: "mm:mr-800",
[]: "mm:mr-1000",
[]: "mm:mr-1200",
[]: "mm:mr-1600"
}
};
export const marginBottomClasses = {
[]: "mb-0",
[]: "mb-50",
[]: "mb-100",
[]: "mb-150",
[]: "mb-200",
[]: "mb-300",
[]: "mb-400",
[]: "mb-500",
[]: "mb-600",
[]: "mb-800",
[]: "mb-1000",
[]: "mb-1200",
[]: "mb-1600",
[]: {
[]: "ld:mb-0",
[]: "ld:mb-50",
[]: "ld:mb-100",
[]: "ld:mb-150",
[]: "ld:mb-200",
[]: "ld:mb-300",
[]: "ld:mb-400",
[]: "ld:mb-500",
[]: "ld:mb-600",
[]: "ld:mb-800",
[]: "ld:mb-1000",
[]: "ld:mb-1200",
[]: "ld:mb-1600"
},
[]: {
[]: "de:mb-0",
[]: "de:mb-50",
[]: "de:mb-100",
[]: "de:mb-150",
[]: "de:mb-200",
[]: "de:mb-300",
[]: "de:mb-400",
[]: "de:mb-500",
[]: "de:mb-600",
[]: "de:mb-800",
[]: "de:mb-1000",
[]: "de:mb-1200",
[]: "de:mb-1600"
},
[]: {
[]: "tb:mb-0",
[]: "tb:mb-50",
[]: "tb:mb-100",
[]: "tb:mb-150",
[]: "tb:mb-200",
[]: "tb:mb-300",
[]: "tb:mb-400",
[]: "tb:mb-500",
[]: "tb:mb-600",
[]: "tb:mb-800",
[]: "tb:mb-1000",
[]: "tb:mb-1200",
[]: "tb:mb-1600"
},
[]: {
[]: "lm:mb-0",
[]: "lm:mb-50",
[]: "lm:mb-100",
[]: "lm:mb-150",
[]: "lm:mb-200",
[]: "lm:mb-300",
[]: "lm:mb-400",
[]: "lm:mb-500",
[]: "lm:mb-600",
[]: "lm:mb-800",
[]: "lm:mb-1000",
[]: "lm:mb-1200",
[]: "lm:mb-1600"
},
[]: {
[]: "mm:mb-0",
[]: "mm:mb-50",
[]: "mm:mb-100",
[]: "mm:mb-150",
[]: "mm:mb-200",
[]: "mm:mb-300",
[]: "mm:mb-400",
[]: "mm:mb-500",
[]: "mm:mb-600",
[]: "mm:mb-800",
[]: "mm:mb-1000",
[]: "mm:mb-1200",
[]: "mm:mb-1600"
}
};
export const marginLeftClasses = {
[]: "ml-0",
[]: "ml-50",
[]: "ml-100",
[]: "ml-150",
[]: "ml-200",
[]: "ml-300",
[]: "ml-400",
[]: "ml-500",
[]: "ml-600",
[]: "ml-800",
[]: "ml-1000",
[]: "ml-1200",
[]: "ml-1600",
[]: {
[]: "ld:ml-0",
[]: "ld:ml-50",
[]: "ld:ml-100",
[]: "ld:ml-150",
[]: "ld:ml-200",
[]: "ld:ml-300",
[]: "ld:ml-400",
[]: "ld:ml-500",
[]: "ld:ml-600",
[]: "ld:ml-800",
[]: "ld:ml-1000",
[]: "ld:ml-1200",
[]: "ld:ml-1600"
},
[]: {
[]: "de:ml-0",
[]: "de:ml-50",
[]: "de:ml-100",
[]: "de:ml-150",
[]: "de:ml-200",
[]: "de:ml-300",
[]: "de:ml-400",
[]: "de:ml-500",
[]: "de:ml-600",
[]: "de:ml-800",
[]: "de:ml-1000",
[]: "de:ml-1200",
[]: "de:ml-1600"
},
[]: {
[]: "tb:ml-0",
[]: "tb:ml-50",
[]: "tb:ml-100",
[]: "tb:ml-150",
[]: "tb:ml-200",
[]: "tb:ml-300",
[]: "tb:ml-400",
[]: "tb:ml-500",
[]: "tb:ml-600",
[]: "tb:ml-800",
[]: "tb:ml-1000",
[]: "tb:ml-1200",
[]: "tb:ml-1600"
},
[]: {
[]: "lm:ml-0",
[]: "lm:ml-50",
[]: "lm:ml-100",
[]: "lm:ml-150",
[]: "lm:ml-200",
[]: "lm:ml-300",
[]: "lm:ml-400",
[]: "lm:ml-500",
[]: "lm:ml-600",
[]: "lm:ml-800",
[]: "lm:ml-1000",
[]: "lm:ml-1200",
[]: "lm:ml-1600"
},
[]: {
[]: "mm:ml-0",
[]: "mm:ml-50",
[]: "mm:ml-100",
[]: "mm:ml-150",
[]: "mm:ml-200",
[]: "mm:ml-300",
[]: "mm:ml-400",
[]: "mm:ml-500",
[]: "mm:ml-600",
[]: "mm:ml-800",
[]: "mm:ml-1000",
[]: "mm:ml-1200",
[]: "mm:ml-1600"
}
};
const getMarginValue = margin => typeof margin === "number" ? `${margin}px` : margin;
export const getMargin = margin => {
if (typeof margin === "number" || typeof margin === "string") return {
vars: {
"--text-margin": getMarginValue(margin)
},
classes: ["m-[var(--text-margin)]"]
};
const {
top,
bottom,
left,
right
} = margin || {};
const cssVar = {};
const classes = ["m-0"];
if (top) {
classes.push("mt-[var(--text-margin-top)]");
cssVar["--text-margin-top"] = getMarginValue(top);
}
if (bottom) {
classes.push("mb-[var(--text-margin-bottom)]");
cssVar["--text-margin-bottom"] = getMarginValue(bottom);
}
if (left) {
classes.push("ml-[var(--text-margin-left)]");
cssVar["--text-margin-left"] = getMarginValue(left);
}
if (right) {
classes.push("mr-[var(--text-margin-right)]");
cssVar["--text-margin-right"] = getMarginValue(right);
}
return {
vars: cssVar,
classes
};
};
export default getMargin;