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

Nav's Pattern Library

import styled from 'styled-components';
const twoColumnBreakpoint = 'min-width: 744px';
const threeColumnBreakpoint = 'min-width: 1104px';
const One = styled.div ``;
const OneFewer = styled.div `
  @media (${threeColumnBreakpoint}) {
    grid-column: span 2;
  }
`;
const OneTwoOne = styled.div `
  grid-column: span 1;

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

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

  @media (${threeColumnBreakpoint}) {
    grid-column: span 3;
  }
`;
const ThreeColumnLayout = styled.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;
export default ThreeColumnLayout;
//# sourceMappingURL=three-col-layout.js.map