@times-components/slice-layout/dist/templates/standard/responsive.js

Slice layout

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getChildrenContainer = exports.ChildContainer = void 0;

var _utils = require("@times-components/utils");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _tsStyleguide = require("@times-components/ts-styleguide");

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

var ChildContainer = (0, _styledComponents["default"])(_utils.TcView).withConfig({
  displayName: "responsive__ChildContainer",
  componentId: "sc-1lqbq6a-0"
})(["flex:1;padding-left:", ";padding-right:", ";@media (min-width:", "px){flex-basis:0 !important;padding-left:0;padding-right:0;}"], (0, _tsStyleguide.spacing)(2), (0, _tsStyleguide.spacing)(2), _tsStyleguide.breakpoints.medium);
exports.ChildContainer = ChildContainer;

var getChildrenContainer = function getChildrenContainer(_ref) {
  var childCount = _ref.childCount;
  var Base = (0, _styledComponents["default"])(_utils.TcView).withConfig({
    displayName: "responsive__Base",
    componentId: "sc-1lqbq6a-1"
  })(["flex:1;flex-direction:column;flex-wrap:wrap;padding-bottom:", ";padding-top:", ";width:100%;@media (min-width:", "px){flex-direction:row;}"], (0, _tsStyleguide.spacing)(2), (0, _tsStyleguide.spacing)(2), _tsStyleguide.breakpoints.medium);

  if (childCount >= 3) {
    Base = (0, _styledComponents["default"])(Base).withConfig({
      displayName: "responsive__Base",
      componentId: "sc-1lqbq6a-2"
    })(["@media (min-width:", "px){padding-left:", ";padding-right:", ";width:100%;}"], _tsStyleguide.breakpoints.medium, (0, _tsStyleguide.spacing)(4), (0, _tsStyleguide.spacing)(4));
  } else {
    Base = (0, _styledComponents["default"])(Base).withConfig({
      displayName: "responsive__Base",
      componentId: "sc-1lqbq6a-3"
    })(["@media (min-width:", "px){width:80.8%;}"], _tsStyleguide.breakpoints.medium);
  }

  Base = (0, _styledComponents["default"])(Base).withConfig({
    displayName: "responsive__Base",
    componentId: "sc-1lqbq6a-4"
  })(["@media (min-width:", "px){width:", ";}"], _tsStyleguide.breakpoints.wide, childCount >= 3 ? "100%" : "56.2%");
  return Base;
};

exports.getChildrenContainer = getChildrenContainer;