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