viewfinder/packages/base/src/layouts/Basic.ts

import { css } from '@tesseract-design/css-utils';
import {LayoutArgs, Span} from '../common';

export const ContentBase = () => css.cx(
  css`
    box-sizing: border-box;
  `
);

export const ContentContainer = ({
  span,
}: LayoutArgs) => css.cx(
  css`
    padding: 0 1rem;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
  `,
  css.if(span === Span.NARROW)(
    css`
      max-width: var(--base-width);
    `
  ),
  css.if(span === Span.NORMAL)(
    css`
      max-width: calc(var(--base-width) * 2);
    `
  ),
  css.if(span === Span.WIDE)(
    css`
      max-width: calc(var(--base-width) * 3);
    `
  ),
);