@navinc/base-react-components/cjs/three-col-layout.js

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const twoColumnBreakpoint = 'min-width: 744px';
const threeColumnBreakpoint = 'min-width: 1104px';
const One = styled_components_1.default.div ``;
const OneFewer = styled_components_1.default.div `
  @media (${threeColumnBreakpoint}) {
    grid-column: span 2;
  }
`;
const OneTwoOne = styled_components_1.default.div `
  grid-column: span 1;

  @media (${twoColumnBreakpoint}) {
    grid-column: span 2;
  }

  @media (${threeColumnBreakpoint}) {
    grid-column: span 1;
  }
`;
const Two = styled_components_1.default.div `
  @media (${twoColumnBreakpoint}) {
    grid-column: span 2;
  }
`;
const All = styled_components_1.default.div `
  @media (${twoColumnBreakpoint}) {
    grid-column: span 2;
  }

  @media (${threeColumnBreakpoint}) {
    grid-column: span 3;
  }
`;
const ThreeColumnLayout = styled_components_1.default.div `
  align-items: start;
  max-width: 1056px;
  margin: 0 auto;
  display: grid;
  padding: 16px;
  grid-gap: 16px;
  grid-template-columns: 1fr;

  @media (${twoColumnBreakpoint}) {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    padding: 24px;
  }

  @media (${threeColumnBreakpoint}) {
    grid-template-columns: repeat(3, 1fr);
  }
`;
ThreeColumnLayout.One = One;
ThreeColumnLayout.OneFewer = OneFewer;
ThreeColumnLayout.OneTwoOne = OneTwoOne;
ThreeColumnLayout.Two = Two;
ThreeColumnLayout.All = All;
ThreeColumnLayout.twoColumnBreakpoint = twoColumnBreakpoint;
ThreeColumnLayout.threeColumnBreakpoint = threeColumnBreakpoint;
exports.default = ThreeColumnLayout;
//# sourceMappingURL=three-col-layout.js.map