@patreon/studio/module/components/Collapse/index.styled.jsx

Patreon Studio Design System

import { css, styled } from 'styled-components';
import { tokens } from '~/tokens';
import { cssWithTransparentToken } from '~/utilities/color-mix';
import { cssForResponsiveProp } from '~/utilities/opaque-responsive';
export const Wrapper = styled.div `
  overflow: hidden;
  position: relative;
  transition: height ${tokens.global.transition.slow.duration} ${tokens.global.transition.slow.easing};

  ${({ isCollapsed, responsiveCollapsedHeight, contentHeight }) => {
    // this indicates that the height of the content is not yet measured
    // and we should use `auto` instead of an arbitrary height when expanded
    if (contentHeight === 'auto') {
        return css `
        height: auto;
      `;
    }
    // if the container is expanded, we should set the height to the measured height
    // this will only be defined when the content has been measured
    if (!isCollapsed) {
        return css `
        height: ${contentHeight}px;
      `;
    }
    // otherwise we should use the collapsed height if it is defined but default to 0
    return css `
      height: 0;
      ${cssForResponsiveProp('height', responsiveCollapsedHeight, (height) => `${height}px`)}
    `;
}};
`;
export const Content = styled.div `
  display: flow-root;
`;
export const Fade = styled.div `
  bottom: 0;
  position: absolute;
  height: ${(props) => props.height}px;
  opacity: ${(props) => props.opacity};
  pointer-events: none;
  transition: ${tokens.global.transition.regular.duration} ${tokens.global.transition.regular.easing};
  width: 100%;

  ${({ fadeColor }) => cssWithTransparentToken((modifyToken) => css `
        background-image: linear-gradient(to bottom, ${modifyToken(fadeColor)}, ${fadeColor});
      `)};
`;
//# sourceMappingURL=index.styled.jsx.map