alm
Version:
The best IDE for TypeScript
350 lines (349 loc) • 8.33 kB
JavaScript
"use strict";
/**
* Provides useful `style` primitives
*/
Object.defineProperty(exports, "__esModule", { value: true });
function extend() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
// Defend against user error
for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
var obj = args_1[_a];
if (obj instanceof Array) {
throw new Error("User error: use extend(a,b) instead of extend([a,b]). Object: " + obj);
}
}
var newObj = {};
for (var _b = 0, args_2 = args; _b < args_2.length; _b++) {
var obj = args_2[_b];
for (var key in obj) {
//copy all the fields
newObj[key] = obj[key];
}
}
return newObj;
}
exports.extend = extend;
;
/** If you have more than one child prefer horizontal,vertical */
exports.flexRoot = {
display: 'flex',
};
/**
* A general grouping component that has no impact on the parent flexbox properties e.g.
* <vertical>
* <pass>
* <content/>
* </pass>
* </vertical>
*/
exports.pass = {
display: 'inherit',
flexDirection: 'inherit',
flexGrow: 1,
};
exports.inlineRoot = {
display: 'inline-flex'
};
exports.horizontal = extend(exports.flexRoot, {
flexDirection: 'row'
});
exports.vertical = extend(exports.flexRoot, {
flexDirection: 'column'
});
exports.wrap = {
flexWrap: 'wrap'
};
exports.flexNone = {
flex: 'none'
};
/**
* If you want items to be sized automatically by their children use this
* This is because of a bug in various flexbox implementations: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
*/
exports.content = {
flexShrink: 0
};
exports.flex = {
flex: 1
};
exports.flex1 = exports.flex;
exports.flex2 = {
flex: 2
};
exports.flex3 = {
flex: 3
};
exports.flex4 = {
flex: 4
};
exports.flex5 = {
flex: 5
};
exports.flex6 = {
flex: 6
};
exports.flex7 = {
flex: 7
};
exports.flex8 = {
flex: 8
};
exports.flex9 = {
flex: 9
};
exports.flex10 = {
flex: 10
};
exports.flex11 = {
flex: 11
};
exports.flex12 = {
flex: 12
};
/////////////////////////////
// Alignment in cross axis //
/////////////////////////////
exports.start = {
alignItems: 'flex-start'
};
exports.center = {
alignItems: 'center'
};
exports.end = {
alignItems: 'flex-end'
};
////////////////////////////
// Alignment in main axis //
////////////////////////////
exports.startJustified = {
justifyContent: 'flex-start'
};
exports.centerJustified = {
justifyContent: 'center'
};
exports.endJustified = {
justifyContent: 'flex-end'
};
exports.aroundJustified = {
justifyContent: 'space-around'
};
exports.betweenJustified = {
justifyContent: 'space-between'
};
////////////////////////////
// Alignment in both axes //
////////////////////////////
exports.centerCenter = extend(exports.flexRoot, exports.center, exports.centerJustified);
////////////////////
// Self alignment //
////////////////////
exports.selfStart = {
alignSelf: 'flex-start'
};
exports.selfCenter = {
alignSelf: 'center'
};
exports.selfEnd = {
alignSelf: 'flex-end'
};
exports.selfStretch = {
alignSelf: 'stretch'
};
//////////////////
// Other layout //
//////////////////
exports.block = {
display: 'block'
};
exports.hidden = {
display: 'none'
};
exports.invisible = {
visibility: 'hidden'
};
exports.relative = {
position: 'relative'
};
exports.fit = {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
};
exports.fullBleedBody = {
margin: 0,
height: '100vh'
};
exports.scroll = {
overflow: 'auto'
};
////////////////////
// Fixed position //
////////////////////
/**
* You don't generally need to use this.
* Instead use fixedBottom,fixedLeft,fixedRight,fixedTop
*/
exports.fixed = {
position: 'fixed'
};
exports.fixedTop = extend(exports.fixed, {
top: 0,
left: 0,
right: 0,
});
exports.fixedRight = extend(exports.fixed, {
top: 0,
right: 0,
bottom: 0,
});
exports.fixedBottom = extend(exports.fixed, {
right: 0,
bottom: 0,
left: 0,
});
exports.fixedLeft = extend(exports.fixed, {
top: 0,
bottom: 0,
left: 0,
});
//////////////////
// A new layer //
//////////////////
/**
* New Layer parent
*/
exports.newLayerParent = {
position: 'relative',
};
/**
* You can have this anywhere and its like you have opened a new body
* This new layer will attach itself to the nearest parent with `position:relative` or `position:absolute` (which is what a new layer is by itself)
*/
exports.newLayer = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
};
/**
* Box helpers
* Having top, left, bottom, right seperated makes it easier to override and maintain individual properties
*/
var Box;
(function (Box) {
function boxUnitToString(value) {
if (typeof value === 'number') {
return value.toString() + 'px';
}
else {
return value;
}
}
/**
* Takes a function that expects Box to be passed into it
* and creates a BoxFunction
*/
function createBoxFunction(mapFromBox) {
var result = function (a, b, c, d) {
if (b === undefined && c === undefined && d === undefined) {
b = c = d = a;
}
else if (c === undefined && d === undefined) {
c = a;
d = b;
}
var box = {
top: boxUnitToString(a),
right: boxUnitToString(b),
bottom: boxUnitToString(c),
left: boxUnitToString(d)
};
return mapFromBox(box);
};
return result;
}
Box.padding = createBoxFunction(function (box) {
return {
paddingTop: box.top,
paddingRight: box.right,
paddingBottom: box.bottom,
paddingLeft: box.left
};
});
Box.margin = createBoxFunction(function (box) {
return {
marginTop: box.top,
marginRight: box.right,
marginBottom: box.bottom,
marginLeft: box.left
};
});
Box.border = createBoxFunction(function (box) {
return {
borderTop: box.top,
borderRight: box.right,
borderBottom: box.bottom,
borderLeft: box.left
};
});
})(Box = exports.Box || (exports.Box = {}));
/**
* Flexbox Primitives with fallbacks
* Because of the `fallbacks` (arrays and vendor prefixes) these should only be used in css generation (not raw styles)
* E.g. `free-style` can use these to generate style sheets
* NOTE:
* -webkit- is needed for mobile safari (iPad)
*/
var vendorPrefixed;
(function (vendorPrefixed) {
/** If you have more than one child prefer horizontal,vertical */
vendorPrefixed.flexRoot = {
display: ['-webkit-flex', 'flex']
};
vendorPrefixed.content = {
'-webkit-flex-shrink': 0,
flexShrink: 0,
};
vendorPrefixed.pass = {
display: 'inherit',
'-webkit-flex-direction': 'pass',
flexDirection: 'inherit',
'-webkit-flex-grow': 1,
flexGrow: 1,
};
vendorPrefixed.flex = {
'-webkit-flex': 1,
flex: 1,
};
vendorPrefixed.horizontal = extend(vendorPrefixed.flexRoot, {
'-webkit-flex-direction': 'row',
flexDirection: 'row',
});
vendorPrefixed.vertical = extend(vendorPrefixed.flexRoot, {
'-webkit-flex-direction': 'column',
flexDirection: 'column',
});
vendorPrefixed.selfCenter = {
'-webkit-align-self': 'center',
alignSelf: 'center',
};
vendorPrefixed.center = {
'-webkit-align-items': 'center',
alignItems: 'center'
};
vendorPrefixed.centerJustified = {
'-webkit-justify-content': 'center',
justifyContent: 'center'
};
vendorPrefixed.centerCenter = extend(vendorPrefixed.flexRoot, vendorPrefixed.center, vendorPrefixed.centerJustified);
vendorPrefixed.scroll = {
'-webkit-overflow-scrolling': 'touch',
overflow: 'auto'
};
})(vendorPrefixed = exports.vendorPrefixed || (exports.vendorPrefixed = {}));