@procore/core-react/dist/Grid/Grid.styles.js

React library of Procore Design Guidelines

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import styled, { css } from 'styled-components';
import { spacing } from '../_styles/spacing';
import { breakpointMinWidthValues, breakpointsSmallToLarge } from './Grid.constants';
var gridColumns = 12;
var getIsColStackActive = function getIsColStackActive(targetBreakpoint, colStackBreakpoint) {
  var targetBrkIndex = breakpointsSmallToLarge.indexOf(targetBreakpoint);
  var stackBrkIndex = breakpointsSmallToLarge.indexOf(colStackBreakpoint);
  return targetBrkIndex <= stackBrkIndex;
};
var getSpanCSS = function getSpanCSS(span, targetBreakpoint, colStackBreakpoint) {
  if (getIsColStackActive(targetBreakpoint, colStackBreakpoint)) {
    return css(["width:100%;"]);
  }
  var spanValue = _typeof(span) !== 'object' ? span : span[targetBreakpoint];
  if (typeof spanValue === 'undefined') {
    return '';
  }
  if (spanValue === 'auto') {
    return css(["flex:1 1 0%;max-width:100%;"]);
  }
  return css(["flex:0 0 auto;width:", "%;"], spanValue / gridColumns * 100);
};
var getOffsetCSS = function getOffsetCSS($offset, targetBreakpoint, colStackBreakpoint) {
  if (getIsColStackActive(targetBreakpoint, colStackBreakpoint)) {
    return '';
  }
  var offsetValue = _typeof($offset) === 'object' ? $offset[targetBreakpoint] : $offset;
  if (typeof offsetValue === 'undefined' || offsetValue >= gridColumns) {
    return '';
  }
  var ratio = offsetValue / gridColumns;
  if (ratio === 0) {
    return css(["margin-left:0;"]);
  }
  return css(["margin-left:", "%;"], ratio * 100);
};
var getColGutterHorizontal = function getColGutterHorizontal(gutterX, breakpoint) {
  var gutterKey = _typeof(gutterX) === 'object' ? gutterX[breakpoint] : gutterX;
  if (typeof gutterKey === 'undefined') {
    return '';
  }
  var gutterCSS = /*#__PURE__*/css(["padding-right:", "px;padding-left:", "px;"], spacing[gutterKey] / 2, spacing[gutterKey] / 2);
  return gutterCSS;
};
var getColGutterVertical = function getColGutterVertical(gutterX, breakpoint) {
  var gutterKey = _typeof(gutterX) === 'object' ? gutterX[breakpoint] : gutterX;
  if (typeof gutterKey === 'undefined') {
    return '';
  }
  var gutterCSS = /*#__PURE__*/css(["margin-top:", "px;"], spacing[gutterKey]);
  return gutterCSS;
};
var getRowGutterHorizontal = function getRowGutterHorizontal(gutterX, breakpoint) {
  var gutterKey = _typeof(gutterX) === 'object' ? gutterX[breakpoint] : gutterX;
  if (typeof gutterKey === 'undefined') {
    return '';
  }
  var gutterCSS = /*#__PURE__*/css(["margin-right:", "px;margin-left:", "px;"], spacing[gutterKey] / -2, spacing[gutterKey] / -2);
  if (breakpoint === breakpointsSmallToLarge[0]) {
    return gutterCSS;
  }
  return css(["@media (min-width:", "){", "}"], breakpointMinWidthValues[breakpoint], gutterCSS);
};
var getRowGutterVertical = function getRowGutterVertical(gutterY, breakpoint) {
  var gutterKey = _typeof(gutterY) === 'object' ? gutterY[breakpoint] : gutterY;
  if (typeof gutterKey === 'undefined') {
    return '';
  }
  var gutterCSS = /*#__PURE__*/css(["margin-top:", "px;"], spacing[gutterKey] * -1);
  if (breakpoint === breakpointsSmallToLarge[0]) {
    return gutterCSS;
  }
  return css(["@media (min-width:", "){", "}"], breakpointMinWidthValues[breakpoint], gutterCSS);
};
export var StyledGridRow = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledGridRow",
  componentId: "core-12_44_0__sc-8pinsp-0"
})(["", " display:flex;flex-wrap:wrap;"], function (_ref) {
  var $gutterX = _ref.$gutterX,
    $gutterY = _ref.$gutterY;
  return breakpointsSmallToLarge.map(function (breakpoint) {
    var gutterXCSS = getRowGutterHorizontal($gutterX, breakpoint);
    var gutterYCSS = getRowGutterVertical($gutterY, breakpoint);
    return css(["", " &:first-child{", "}"], gutterXCSS, gutterYCSS);
  });
});
export var StyledGridCol = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledGridCol",
  componentId: "core-12_44_0__sc-8pinsp-1"
})(["flex-shrink:0;width:100%;max-width:100%;", ""], function (_ref2) {
  var $span = _ref2.$span,
    $offset = _ref2.$offset,
    $gutterX = _ref2.$gutterX,
    $gutterY = _ref2.$gutterY,
    $colStackBreakpoint = _ref2.$colStackBreakpoint;
  return breakpointsSmallToLarge.map(function (breakpoint) {
    var spanCSS = getSpanCSS($span, breakpoint, $colStackBreakpoint);
    var offsetCSS = getOffsetCSS($offset, breakpoint, $colStackBreakpoint);
    var gutterXCSS = getColGutterHorizontal($gutterX, breakpoint);
    var gutterYCSS = getColGutterVertical($gutterY, breakpoint);
    var resultCSS = /*#__PURE__*/css(["", " ", " ", " ", ""], offsetCSS, gutterXCSS, gutterYCSS, spanCSS);
    if (breakpoint === breakpointsSmallToLarge[0]) {
      return resultCSS;
    }
    return css(["@media (min-width:", "){", "}"], breakpointMinWidthValues[breakpoint], resultCSS);
  });
});
//# sourceMappingURL=Grid.styles.js.map