How to use the @paprika/stylers.boxSizingStyles function in @paprika/stylers

To help you get started, we’ve selected a few @paprika/stylers 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 acl-services / paprika / packages / Modal / src / Modal.styles.js View on Github external
[ShirtSizes.MEDIUM]: tokens.modal.sizes.md,
  [ShirtSizes.LARGE]: tokens.modal.sizes.lg,
};

export const Dialog = styled.div`
  background-color: ${tokens.modal.backgroundColor};
  border-radius: ${tokens.modal.borderRadius};
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  overflow: auto;
  transition: all ${tokens.overlay.animationDuration}ms ease;
  width: 100%;
  ${({ state }) => states[state]};
  ${stylers.boxSizingStyles};
`;

export const Wrapper = styled.div`
  flex: 0 1 auto;
  margin: ${tokens.modal.margin};
  max-height: calc(100% - ${tokens.modal.margin} - ${tokens.modal.margin});
  max-width: calc(100% - ${tokens.modal.margin} - ${tokens.modal.margin});
  width: ${({ size }) => mapShirtSizesToValues[size] || mapShirtSizesToValues[ShirtSizes.MEDIUM]};
  ${stylers.z(1)};
`;

export const Header = styled(OriginalHeader)`
  flex: none;
`;

export const ContentWrapper = styled.div`