You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
4.1 KiB
JavaScript
122 lines
4.1 KiB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
export function isUnitless(value) {
|
|
return String(parseFloat(value)).length === String(value).length;
|
|
}
|
|
|
|
// Ported from Compass
|
|
// https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss
|
|
// Emulate the sass function "unit"
|
|
export function getUnit(input) {
|
|
return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
|
|
}
|
|
|
|
// Emulate the sass function "unitless"
|
|
export function toUnitless(length) {
|
|
return parseFloat(length);
|
|
}
|
|
|
|
// Convert any CSS <length> or <percentage> value to any another.
|
|
// From https://github.com/KyleAMathews/convert-css-length
|
|
export function convertLength(baseFontSize) {
|
|
return function (length, toUnit) {
|
|
var fromUnit = getUnit(length);
|
|
|
|
// Optimize for cases where `from` and `to` units are accidentally the same.
|
|
if (fromUnit === toUnit) {
|
|
return length;
|
|
}
|
|
|
|
// Convert input length to pixels.
|
|
var pxLength = toUnitless(length);
|
|
if (fromUnit !== 'px') {
|
|
if (fromUnit === 'em') {
|
|
pxLength = toUnitless(length) * toUnitless(baseFontSize);
|
|
} else if (fromUnit === 'rem') {
|
|
pxLength = toUnitless(length) * toUnitless(baseFontSize);
|
|
}
|
|
}
|
|
|
|
// Convert length in pixels to the output unit
|
|
var outputLength = pxLength;
|
|
if (toUnit !== 'px') {
|
|
if (toUnit === 'em') {
|
|
outputLength = pxLength / toUnitless(baseFontSize);
|
|
} else if (toUnit === 'rem') {
|
|
outputLength = pxLength / toUnitless(baseFontSize);
|
|
} else {
|
|
return length;
|
|
}
|
|
}
|
|
return parseFloat(outputLength.toFixed(5)) + toUnit;
|
|
};
|
|
}
|
|
export function alignProperty(_ref) {
|
|
var size = _ref.size,
|
|
grid = _ref.grid;
|
|
var sizeBelow = size - size % grid;
|
|
var sizeAbove = sizeBelow + grid;
|
|
return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
|
|
}
|
|
|
|
// fontGrid finds a minimal grid (in rem) for the fontSize values so that the
|
|
// lineHeight falls under a x pixels grid, 4px in the case of Material Design,
|
|
// without changing the relative line height
|
|
export function fontGrid(_ref2) {
|
|
var lineHeight = _ref2.lineHeight,
|
|
pixels = _ref2.pixels,
|
|
htmlFontSize = _ref2.htmlFontSize;
|
|
return pixels / (lineHeight * htmlFontSize);
|
|
}
|
|
|
|
/**
|
|
* generate a responsive version of a given CSS property
|
|
* @example
|
|
* responsiveProperty({
|
|
* cssProperty: 'fontSize',
|
|
* min: 15,
|
|
* max: 20,
|
|
* unit: 'px',
|
|
* breakpoints: [300, 600],
|
|
* })
|
|
*
|
|
* // this returns
|
|
*
|
|
* {
|
|
* fontSize: '15px',
|
|
* '@media (min-width:300px)': {
|
|
* fontSize: '17.5px',
|
|
* },
|
|
* '@media (min-width:600px)': {
|
|
* fontSize: '20px',
|
|
* },
|
|
* }
|
|
* @param {Object} params
|
|
* @param {string} params.cssProperty - The CSS property to be made responsive
|
|
* @param {number} params.min - The smallest value of the CSS property
|
|
* @param {number} params.max - The largest value of the CSS property
|
|
* @param {string} [params.unit] - The unit to be used for the CSS property
|
|
* @param {Array.number} [params.breakpoints] - An array of breakpoints
|
|
* @param {number} [params.alignStep] - Round scaled value to fall under this grid
|
|
* @returns {Object} responsive styles for {params.cssProperty}
|
|
*/
|
|
export function responsiveProperty(_ref3) {
|
|
var cssProperty = _ref3.cssProperty,
|
|
min = _ref3.min,
|
|
max = _ref3.max,
|
|
_ref3$unit = _ref3.unit,
|
|
unit = _ref3$unit === void 0 ? 'rem' : _ref3$unit,
|
|
_ref3$breakpoints = _ref3.breakpoints,
|
|
breakpoints = _ref3$breakpoints === void 0 ? [600, 900, 1200] : _ref3$breakpoints,
|
|
_ref3$transform = _ref3.transform,
|
|
transform = _ref3$transform === void 0 ? null : _ref3$transform;
|
|
var output = _defineProperty({}, cssProperty, "".concat(min).concat(unit));
|
|
var factor = (max - min) / breakpoints[breakpoints.length - 1];
|
|
breakpoints.forEach(function (breakpoint) {
|
|
var value = min + factor * breakpoint;
|
|
if (transform !== null) {
|
|
value = transform(value);
|
|
}
|
|
output["@media (min-width:".concat(breakpoint, "px)")] = _defineProperty({}, cssProperty, "".concat(Math.round(value * 10000) / 10000).concat(unit));
|
|
});
|
|
return output;
|
|
} |