@wezom/toolkit-css-in-js
Version:
Useful tools for working with CSS-in-JS
68 lines (67 loc) • 1.19 kB
TypeScript
/**
* @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%'
* }
*/
export declare function jssAbsoluteSquare(
percent: string | number,
corner?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'
): {
top?: string;
bottom?: string;
left?: string;
right?: string;
width: string;
height: string;
};