@bootstrap-styled/css-utils
Version:
Bootstrap mixins and utilities in javascript for bootstrap-styled.
36 lines (31 loc) • 4.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getFlexUtilities = getFlexUtilities;
exports.default = exports.defaultProps = void 0;
var _breakpoints = require("@bootstrap-styled/css-mixins/lib/breakpoints");
var defaultProps = {
'$grid-breakpoints': {
xs: '0',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px'
}
};
exports.defaultProps = defaultProps;
function getFlexUtilities() {
var gridBreakpoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultProps['$grid-breakpoints'];
var flexUtilityList = [];
Object.keys(gridBreakpoints).forEach(function (breakpoint) {
var infix = (0, _breakpoints.breakpointInfix)(breakpoint, gridBreakpoints);
flexUtilityList.push("\n /* Flex column reordering */\n ".concat((0, _breakpoints.mediaBreakpointUp)(breakpoint, gridBreakpoints, "\n .flex".concat(infix, "-first { order: -1; }\n .flex").concat(infix, "-last { order: 1; }\n .flex").concat(infix, "-unordered { order: 0; }\n ")), "\n \n /* Flex direction */ \n ").concat((0, _breakpoints.mediaBreakpointUp)(breakpoint, gridBreakpoints, "\n .flex".concat(infix, "-row { flex-direction: row !important; }\n .flex").concat(infix, "-column { flex-direction: column !important; }\n .flex").concat(infix, "-row-reverse { flex-direction: row-reverse !important; }\n .flex").concat(infix, "-column-reverse { flex-direction: column-reverse !important; }\n ")), "\n \n /* Flex wrap */ \n ").concat((0, _breakpoints.mediaBreakpointUp)(breakpoint, gridBreakpoints, "\n .flex".concat(infix, "-wrap { flex-wrap: wrap !important; }\n .flex").concat(infix, "-nowrap { flex-wrap: nowrap !important; }\n .flex").concat(infix, "-wrap-reverse { flex-wrap: wrap-reverse !important; }\n ")), "\n /* Flex justify-content */ \n ").concat((0, _breakpoints.mediaBreakpointUp)(breakpoint, gridBreakpoints, "\n .justify-content".concat(infix, "-start { justify-content: flex-start !important; }\n .justify-content").concat(infix, "-end { justify-content: flex-end !important; }\n .justify-content").concat(infix, "-center { justify-content: center !important; }\n .justify-content").concat(infix, "-between { justify-content: space-between !important; }\n .justify-content").concat(infix, "-around { justify-content: space-around !important; }\n .justify-content").concat(infix, "-evenly { justify-content: space-evenly !important; }\n ")), "\n /* Flex align-items */ \n ").concat((0, _breakpoints.mediaBreakpointUp)(breakpoint, gridBreakpoints, "\n .align-items".concat(infix, "-start { align-items: flex-start !important; }\n .align-items").concat(infix, "-end { align-items: flex-end !important; }\n .align-items").concat(infix, "-center { align-items: center !important; }\n .align-items").concat(infix, "-baseline { align-items: baseline !important; }\n .align-items").concat(infix, "-stretch { align-items: stretch !important; }\n ")), "\n /* Flex align-content */ \n ").concat((0, _breakpoints.mediaBreakpointUp)(breakpoint, gridBreakpoints, "\n .align-content".concat(infix, "-start { align-content: flex-start !important; }\n .align-content").concat(infix, "-end { align-content: flex-end !important; }\n .align-content").concat(infix, "-center { align-content: center !important; }\n .align-content").concat(infix, "-between { align-content: space-between !important; }\n .align-content").concat(infix, "-around { align-content: space-around !important; }\n .align-content").concat(infix, "-stretch { align-content: stretch !important; }\n ")), "\n /* Flex align-self */ \n ").concat((0, _breakpoints.mediaBreakpointUp)(breakpoint, gridBreakpoints, "\n .align-self".concat(infix, "-auto { align-self: auto !important; }\n .align-self").concat(infix, "-start { align-self: flex-start !important; }\n .align-self").concat(infix, "-end { align-self: flex-end !important; }\n .align-self").concat(infix, "-center { align-self: center !important; }\n .align-self").concat(infix, "-baseline { align-self: baseline !important; }\n .align-self").concat(infix, "-stretch { align-self: stretch !important; }\n ")), " \n "));
});
return flexUtilityList.join('\n');
}
var _default = {
defaultProps: defaultProps,
getFlexUtilities: getFlexUtilities
};
exports.default = _default;