Page MenuHomec4science
Files F101445572

cssUtils.js
No OneTemporary
Actions

File Metadata

Created
Mon, Feb 10, 13:31

cssUtils.js
View Options

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;
}

Event Timeline

c4science · Help