unistyle-flex-grid/dist/src/responsive-columns.js

Simple Flexbox grid layout system built with Unistyle

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _breakpoints = require('./breakpoints');

var _breakpoints2 = _interopRequireDefault(_breakpoints);

var _constants = require('./constants');

var _functions = require('./functions');

/**
 * Generates all the column sizes variations based on the already defined
 * breakpoints for the responsive mobile first behaviour
 * @param {Object} bps - Breakpoints object with the media queries declarations
 * @param {number} count - Quantity of column properties to be generated
 * @returns {Object} -Responsive column system properties
 */
function responsiveColumns(bps, count) {
  var properties = {};

  Object.keys(bps).forEach(function (bp) {
    for (var index = 1; index <= count; index += 1) {
      if (bps[bp]) {
        properties['.col-' + bp + '-' + index] = _defineProperty({}, bps[bp], {
          flexBasis: (0, _functions.getPercentage)(index),
          maxWidth: (0, _functions.getPercentage)(index)
        });
      } else {
        properties['.col-' + bp + '-' + index] = {
          flexBasis: (0, _functions.getPercentage)(index),
          maxWidth: (0, _functions.getPercentage)(index)
        };
      }
    }
  });

  return properties;
}

exports['default'] = responsiveColumns(_breakpoints2['default'], _constants.columns);
module.exports = exports['default'];