How to use the @storybook/design-system.styles.spacing function in @storybook/design-system

To help you get started, we’ve selected a few @storybook/design-system examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github chromaui / learnstorybook.com / src / templates / chapter.js View on Github external
flex-direction: column;
  padding-bottom: 3rem;
  padding-top: 4rem;

  @media screen and (min-width: ${breakpoint}px) {
    flex-direction: row;
    padding-top: 165px;
  }
`;

const BoxLinkIcon = styled(Icon)`
  && {
    color: ${color.secondary};
    width: 24px;
    height: 24px;
    margin-right: ${styles.spacing.padding.medium}px;
    bottom: 0;
  }
`;

const BoxLinkContent = styled.div`
  display: flex;
  padding: ${spacing.padding.medium}px;
`;

const BoxLinkMessage = styled.div`
  color: ${color.darkest};
  font-size: 14px;
  line-height: 20px;
  flex: 1;
  max-width: 410px;
  align-self: center;