@wezom/toolkit-css-in-js/dist/absolute-center.js

Useful tools for working with CSS-in-JS

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var units = require('./units.js');

/**
 * Generate CSS properties for absolute centering
 * @example
 *  jssAbsoluteCenter('3rem');
 *  // returns
 *  {
 *      top: '50%',
 *      left: '50%',
 *      width: '3rem',
 *      height: '3rem',
 *      margin: '-1.5rem 0 0 -1.5rem'
 *  }
 *
 *  jssAbsoluteCenter('4rem', '60px');
 *  // returns
 *  {
 *      top: '50%',
 *      left: '50%',
 *      width: '4rem',
 *      height: '60px',
 *      margin: '-30px 0 0 -2rem'
 *  }
 *
 *  jssAbsoluteCenter('100px', '100px', 'topRight);
 *  // returns
 *  {
 *      top: '50%',
 *      right: '50%',
 *      width: '100px',
 *      height: '100px',
 *      margin: '-50px -50px 0 0'
 *  }
 *
 *  jssAbsoluteCenter('100px', '100px', 'bottomRight);
 *  // returns
 *  {
 *      bottom: '50%',
 *      right: '50%',
 *      width: '100px',
 *      height: '100px',
 *      margin: '0 -50px -50px 0'
 *  }
 *
 *  jssAbsoluteCenter('100px', '100px', 'bottomLeft);
 *  // returns
 *  {
 *      bottom: '50%',
 *      right: '50%',
 *      width: '100px',
 *      height: '100px',
 *      margin: '0 0 -50px -50px'
 *  }
 */
function jssAbsoluteCenter(width, height, corner) {
	var _a;
	if (height === void 0) {
		height = width;
	}
	if (corner === void 0) {
		corner = 'topLeft';
	}
	var mt = units.jssUnitLess(height) / 2 + units.jssUnitExtract(height);
	var ml = units.jssUnitLess(width) / 2 + units.jssUnitExtract(width);
	var x = corner === 'topLeft' || corner === 'topRight' ? 'top' : 'bottom';
	var y = corner === 'topLeft' || corner === 'bottomLeft' ? 'left' : 'right';
	var _b = x === 'top' ? ['-' + mt, '0'] : ['0', '-' + mt],
		t = _b[0],
		b = _b[1];
	var _c = y === 'left' ? ['-' + ml, '0'] : ['0', '-' + ml],
		l = _c[0],
		r = _c[1];
	return (
		(_a = {}),
		(_a[x] = '50%'),
		(_a[y] = '50%'),
		(_a.width = width),
		(_a.height = height),
		(_a.margin = [t, r, b, l].join(' ')),
		_a
	);
}

exports.jssAbsoluteCenter = jssAbsoluteCenter;