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

Useful tools for working with CSS-in-JS

'use strict';

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

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

/**
 * @example
 *  jssAbsoluteSquare(54);
 *  // returns
 *  {
 *      top: '23%',
 *      left: '23%',
 *      width: '54%',
 *      height: '54%'
 *  }
 *
 *  jssAbsoluteSquare(100);
 *  // returns
 *  {
 *      top: '0%',
 *      left: '0%',
 *      width: '100%',
 *      height: '100%'
 *  }
 *
 *  jssAbsoluteSquare('120%');
 *  // returns
 *  {
 *      top: '-10%',
 *      left: '-10%',
 *      width: '120%',
 *      height: '120%'
 *  }
 *
 *  jssAbsoluteSquare('120%', 'topRight');
 *  // returns
 *  {
 *      top: '-10%',
 *      right: '-10%',
 *      width: '120%',
 *      height: '120%'
 *  }
 *
 *  jssAbsoluteSquare('120%', 'bottomRight');
 *  // returns
 *  {
 *      bottom: '-10%',
 *      right: '-10%',
 *      width: '120%',
 *      height: '120%'
 *  }
 *
 *  jssAbsoluteSquare('120%', 'bottomLeft');
 *  // returns
 *  {
 *      bottom: '-10%',
 *      left: '-10%',
 *      width: '120%',
 *      height: '120%'
 *  }
 */
function jssAbsoluteSquare(percent, corner) {
	var _a;
	if (corner === void 0) {
		corner = 'topLeft';
	}
	var value = units.jssUnitLess(percent);
	var diff = (100 - value) / 2;
	var x = corner === 'topLeft' || corner === 'topRight' ? 'top' : 'bottom';
	var y = corner === 'topLeft' || corner === 'bottomLeft' ? 'left' : 'right';
	return (
		(_a = {}),
		(_a[x] = diff + '%'),
		(_a[y] = diff + '%'),
		(_a.width = value + '%'),
		(_a.height = value + '%'),
		_a
	);
}

exports.jssAbsoluteSquare = jssAbsoluteSquare;