You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.0 KiB
126 lines
3.0 KiB
import { get, system, compose } from '@styled-system/core';
|
|
var defaults = {
|
|
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
};
|
|
|
|
var isNumber = function isNumber(n) {
|
|
return typeof n === 'number' && !isNaN(n);
|
|
};
|
|
|
|
var getMargin = function getMargin(n, scale) {
|
|
if (!isNumber(n)) {
|
|
return get(scale, n, n);
|
|
}
|
|
|
|
var isNegative = n < 0;
|
|
var absolute = Math.abs(n);
|
|
var value = get(scale, absolute, absolute);
|
|
|
|
if (!isNumber(value)) {
|
|
return isNegative ? '-' + value : value;
|
|
}
|
|
|
|
return value * (isNegative ? -1 : 1);
|
|
};
|
|
|
|
var configs = {};
|
|
configs.margin = {
|
|
margin: {
|
|
property: 'margin',
|
|
scale: 'space',
|
|
transform: getMargin,
|
|
defaultScale: defaults.space
|
|
},
|
|
marginTop: {
|
|
property: 'marginTop',
|
|
scale: 'space',
|
|
transform: getMargin,
|
|
defaultScale: defaults.space
|
|
},
|
|
marginRight: {
|
|
property: 'marginRight',
|
|
scale: 'space',
|
|
transform: getMargin,
|
|
defaultScale: defaults.space
|
|
},
|
|
marginBottom: {
|
|
property: 'marginBottom',
|
|
scale: 'space',
|
|
transform: getMargin,
|
|
defaultScale: defaults.space
|
|
},
|
|
marginLeft: {
|
|
property: 'marginLeft',
|
|
scale: 'space',
|
|
transform: getMargin,
|
|
defaultScale: defaults.space
|
|
},
|
|
marginX: {
|
|
properties: ['marginLeft', 'marginRight'],
|
|
scale: 'space',
|
|
transform: getMargin,
|
|
defaultScale: defaults.space
|
|
},
|
|
marginY: {
|
|
properties: ['marginTop', 'marginBottom'],
|
|
scale: 'space',
|
|
transform: getMargin,
|
|
defaultScale: defaults.space
|
|
}
|
|
};
|
|
configs.margin.m = configs.margin.margin;
|
|
configs.margin.mt = configs.margin.marginTop;
|
|
configs.margin.mr = configs.margin.marginRight;
|
|
configs.margin.mb = configs.margin.marginBottom;
|
|
configs.margin.ml = configs.margin.marginLeft;
|
|
configs.margin.mx = configs.margin.marginX;
|
|
configs.margin.my = configs.margin.marginY;
|
|
configs.padding = {
|
|
padding: {
|
|
property: 'padding',
|
|
scale: 'space',
|
|
defaultScale: defaults.space
|
|
},
|
|
paddingTop: {
|
|
property: 'paddingTop',
|
|
scale: 'space',
|
|
defaultScale: defaults.space
|
|
},
|
|
paddingRight: {
|
|
property: 'paddingRight',
|
|
scale: 'space',
|
|
defaultScale: defaults.space
|
|
},
|
|
paddingBottom: {
|
|
property: 'paddingBottom',
|
|
scale: 'space',
|
|
defaultScale: defaults.space
|
|
},
|
|
paddingLeft: {
|
|
property: 'paddingLeft',
|
|
scale: 'space',
|
|
defaultScale: defaults.space
|
|
},
|
|
paddingX: {
|
|
properties: ['paddingLeft', 'paddingRight'],
|
|
scale: 'space',
|
|
defaultScale: defaults.space
|
|
},
|
|
paddingY: {
|
|
properties: ['paddingTop', 'paddingBottom'],
|
|
scale: 'space',
|
|
defaultScale: defaults.space
|
|
}
|
|
};
|
|
configs.padding.p = configs.padding.padding;
|
|
configs.padding.pt = configs.padding.paddingTop;
|
|
configs.padding.pr = configs.padding.paddingRight;
|
|
configs.padding.pb = configs.padding.paddingBottom;
|
|
configs.padding.pl = configs.padding.paddingLeft;
|
|
configs.padding.px = configs.padding.paddingX;
|
|
configs.padding.py = configs.padding.paddingY;
|
|
export var margin = system(configs.margin);
|
|
export var padding = system(configs.padding);
|
|
export var space = compose(margin, padding);
|
|
export default space;
|