fannypack-v5/src/Page/styles.ts

An accessible, composable, and friendly React UI Kit

import { css, cssClass } from '../styled';
import { breakpoint, palette, space, theme } from '../utils';

export const collapseBreakpoints = {
  tablet: 'mobile',
  desktop: 'tablet',
  widescreen: 'desktop',
  fullHD: 'widescreen',
};

export const PageContent = (styleProps) => cssClass`
  padding: ${space(4, 'major')(styleProps)}rem ${space(2, 'major')(styleProps)}rem;

  ${
    styleProps.isFluid &&
    css`
      padding: ${space(4, 'major')(styleProps)}rem ${theme('Container.fluidMargin')(styleProps)}rem;

      & {
        ${theme(styleProps.themeKey, `css.fluid`)(styleProps)};
      }
    `
  }

  ${breakpoint(
    'max-tablet',
    css`
      padding-top: ${space(2, 'major')(styleProps)}rem;
      padding-bottom: ${space(2, 'major')(styleProps)}rem;

      & {
        ${theme(styleProps.themeKey, `css.mobile`)(styleProps)};
      }
    `
  )(styleProps)}

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageContentWrapper = (styleProps) => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithSidebar = (styleProps) => cssClass`
  min-height: 100vh;

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithSidebarContent = (styleProps) => cssClass`
  width: 100%;
  padding-left: ${getWidth(styleProps)};

  ${breakpoint(
    `max-${collapseBreakpoints[styleProps.collapseBelow]}`,
    css`
      padding-left: 0px;
    `
  )(styleProps)}

  ${
    !styleProps.isSidebarOpen &&
    css`
      padding-left: 0px;
    `
  }

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithSidebarSidebar = (styleProps) => cssClass`
  background-color: ${palette('background')(styleProps)};
  border-right: 1px solid ${palette('white800')(styleProps)};
  height: 100vh;
  min-width: ${getWidth(styleProps)};
  width: ${getWidth(styleProps)};
  overflow-y: auto;
  transform: translateX(0px);

  ${
    styleProps.isSidebarMinimized &&
    css`
      overflow: visible;
    `
  }

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithSidebarSidebarExpandedWrapper = (styleProps) => cssClass`
  position: fixed;
  z-index: 999999;

  ${breakpoint(
    `max-${collapseBreakpoints[styleProps.collapseBelow]}`,
    css`
      display: none;
    `
  )(styleProps)};

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithSidebarSidebarCollapsedWrapper = (styleProps) => cssClass`
  &&& {
    min-width: ${styleProps.collapsedSidebarWidth};
  }

  ${breakpoint(`max-${collapseBreakpoints[styleProps.collapseBelow]}`, css``, {
    else: css`
      display: none;
    `,
  })(styleProps)};

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithSidebarDisclosure = (styleProps) => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithSidebarMinimize = (styleProps) => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithHeader = (styleProps) => cssClass`
  min-height: 100vh;
  position: relative;

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithHeaderHeader = (styleProps) => cssClass`
  background-color: ${palette('background')(styleProps)};
  min-height: ${styleProps.headerHeight};
  height: ${styleProps.headerHeight};
  border-bottom: 1px solid ${palette('white800')(styleProps)};
  z-index: 999;

  & > * {
    height: 100%;
  }

  ${
    styleProps.sticky &&
    css`
      position: fixed;
      width: 100%;
    `
  }

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithHeaderContent = (styleProps) => cssClass`
  ${
    styleProps.sticky &&
    css`
      padding-top: ${styleProps.isHeaderOpen ? styleProps.headerHeight : 'unset'};
    `
  }

  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

export const PageWithHeaderDisclosure = (styleProps) => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;

function getWidth(styleProps) {
  if (styleProps.isSidebarMinimized) {
    return styleProps.minimizedSidebarWidth;
  }
  if (styleProps.isCollapsed) {
    return styleProps.collapsedSidebarWidth;
  }
  return styleProps.sidebarWidth;
}