Files F100981949

cssUtils.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Tue, Feb 4, 12:34

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