negativeSpaceContainer.tsx 697 B

1234567891011121314151617181920212223242526272829
  1. import styled from '@emotion/styled';
  2. const NegativeSpaceContainer = styled('div')`
  3. width: 100%;
  4. display: flex;
  5. flex-grow: 1;
  6. justify-content: center;
  7. align-items: center;
  8. position: relative;
  9. overflow: hidden;
  10. background-color: ${p => p.theme.backgroundSecondary};
  11. background-image: repeating-linear-gradient(
  12. -145deg,
  13. transparent,
  14. transparent 8px,
  15. ${p => p.theme.backgroundSecondary} 8px,
  16. ${p => p.theme.backgroundSecondary} 11px
  17. ),
  18. repeating-linear-gradient(
  19. -45deg,
  20. transparent,
  21. transparent 15px,
  22. ${p => p.theme.gray100} 15px,
  23. ${p => p.theme.gray100} 16px
  24. );
  25. `;
  26. export default NegativeSpaceContainer;