@patreon/studio/module/components/Drawer/styled-components.js

Patreon Studio Design System

// TODO (legacied filenames/match-regex)
// This failure is legacied in and should be updated. DO NOT COPY.
// eslint-disable-next-line filenames/match-regex
import styled, { css } from 'styled-components';
import { cssForMountTransition } from '../../hooks/useMountTransition';
import { tokens } from '../../tokens';
import { mediaForBreakpoint } from '../../utilities/breakpoints';
import { IS_HAPPO } from '../../utilities/env';
const mobileBreakpoint = () => mediaForBreakpoint('sm');
const variables = css `
  --dialog-transition: 350ms ease;
  --dialog-margin: ${tokens.global.space.x24};
  --dialog-maxHeight: calc(var(--viewport-height, 100vh) - ${tokens.global.space.x24});
  --dialog-width-sm: 440px;
  --dialog-width-lg: 600px;
  --dialog-width-xl: 800px;
  --dialog-gap: ${tokens.global.space.x8};
  --dialog-space-sm: ${tokens.global.space.x16};
  --dialog-space-lg: ${tokens.global.space.x24};
  --dialog-space-responsive: ${tokens.global.space.x16};
  --dialog-action-offset-responsive: ${tokens.global.space.x8};
  --dialog-action-offset-default: ${tokens.global.space.x8};
  --dialog-container-radius: ${tokens.global.radius.lg} ${tokens.global.radius.lg} 0 0;
  --dialog-container: ${tokens.global.bg.elevated.default};
  --dialog-cover: ${tokens.global.constant.blackMuted.default};
  --dialog-divider: ${tokens.global.border.muted.default};
  --dialog-shadow: ${tokens.global.boxShadow.high};

  @media ${mobileBreakpoint} {
    --dialog-maxHeight: calc(var(--viewport-height, 100vh) - ${tokens.global.space.x48});
    --dialog-space-responsive: ${tokens.global.space.x24};
    --dialog-action-offset-responsive: ${tokens.global.space.x16};
    --dialog-container-radius: ${tokens.global.radius.lg};
  }
`;
export const Root = styled.div `
  ${variables}

  --viewport-height: ${(props) => props.$viewportHeight}px;

  ${(props) => props.$flow === 'fullscreen' &&
    css `
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      isolation: isolate;
      z-index: ${tokens.global.layer.z12};
    `}

  ${(props) => props.$scrollable === 'all' &&
    props.$isOpen &&
    props.$transitionPhase === 'complete' &&
    css `
      overflow: auto;
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
    `}
`;
export const Wrapper = styled.div `
  display: flex;
  justify-content: center;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;

  @media ${mobileBreakpoint} {
    align-items: center;
  }

  ${(props) => props.$flow === 'fullscreen' &&
    css `
      min-height: var(--viewport-height, 100vh);
    `}
`;
export const Container = styled.div `
  position: relative;
  z-index: 2;
  background-color: var(--dialog-container);
  box-shadow: var(--dialog-shadow);
  overflow: hidden;
  width: 100%;
  pointer-events: auto;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;

  ${(props) => props.$flow === 'fullscreen' &&
    css `
      min-height: var(--viewport-height, 100vh);
    `}

  ${(props) => props.$flow === 'fullscreen' &&
    !IS_HAPPO &&
    cssForMountTransition({
        isActive: props.$isOpen,
        transitionPhase: props.$transitionPhase,
        transition: css `
        transition: transform var(--dialog-transition);
      `,
        unmounted: css `
        transform: translateX(100%);
      `,
        mounted: css `
        transform: translateX(0%);
      `,
    })}

  ${(props) => props.$scrollable === 'inner' &&
    css `
      display: flex;
      flex-flow: column;
      max-height: var(--dialog-maxHeight);
    `}

  ${(props) => props.$size
    ? css `
          @media ${mobileBreakpoint} {
            max-width: ${`var(--dialog-width-${props.$size})`};
          }
        `
    : null}
`;
export const Body = styled.div `
  position: relative;
  flex: 1 1 auto;

  ${(props) => props.$scrollable === 'inner' &&
    css `
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    `}
`;
export const BodyArea = styled.div `
  ${(props) => props.$padding === 'default' &&
    css `
      padding: var(--dialog-space-lg) var(--dialog-space-responsive);
    `}
`;
/**
 * The Content component can be used to create custom Dialog
 * treatments in conjunction with `padding="none"`
 */
export const Content = styled.div `
  padding: var(--dialog-space-lg) var(--dialog-space-responsive);
`;
//# sourceMappingURL=styled-components.js.map