@navinc/base-react-components/dist/page-container.js

Nav's Pattern Library

import { styled, css } from 'styled-components';
const minimumGutterDesktop = 32;
const minimumGutterMobile = 16;
const flexContainerCss = css `
  display: flex;
  flex-flow: ${(props) => props.flexFlow || 'row wrap'};
  place-content: ${(props) => props.alignContent || 'flex-start'} ${(props) => props.justifyContent || 'flex-start'};
  align-items: ${(props) => props.alignItems || 'flex-start'};
  flex: ${(props) => props.flex || ''};
  max-width: 100%;
`;
/**
 * @deprecated use wayfinder
 *
 * Used to wrap all of the main content within a page to define its basic layout page gutters.
 **/
export const PageContainer = styled.main.withConfig({ displayName: "brc-sc-PageContainer", componentId: "brc-sc-1wpugke" }) `
  ${flexContainerCss}

  flex: 1 1 100%;
  width: 100%;
  align-self: stretch;
  padding: 40px calc((50% - (${({ theme }) => theme.contentWidth}px / 2))) 40px
    calc((50% - (${({ theme }) => theme.contentWidth}px / 2)));

  @media (max-width: ${({ theme }) => theme.contentWidth + minimumGutterDesktop * 2}px) {
    padding-right: ${minimumGutterDesktop}px;
    padding-left: ${minimumGutterDesktop}px;
  }

  @media (max-width: ${({ theme }) => theme.media.small}) {
    padding: 24px ${minimumGutterMobile}px 24px ${minimumGutterMobile}px;
  }
`;
PageContainer.displayName = 'PageContainer';
//# sourceMappingURL=page-container.js.map