gridTable.tsx 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. import styled from '@emotion/styled';
  2. import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
  3. export const GridTable = styled(FluidHeight)`
  4. border: 1px solid ${p => p.theme.border};
  5. border-radius: ${p => p.theme.borderRadius};
  6. .beforeHoverTime + .afterHoverTime:before {
  7. border-top: 1px solid ${p => p.theme.purple200};
  8. content: '';
  9. left: 0;
  10. position: absolute;
  11. top: 0;
  12. width: 999999999%;
  13. }
  14. .beforeHoverTime:last-child:before {
  15. border-bottom: 1px solid ${p => p.theme.purple200};
  16. content: '';
  17. right: 0;
  18. position: absolute;
  19. bottom: 0;
  20. width: 999999999%;
  21. }
  22. .beforeCurrentTime + .afterCurrentTime:before {
  23. border-top: 1px solid ${p => p.theme.purple300};
  24. content: '';
  25. left: 0;
  26. position: absolute;
  27. top: 0;
  28. width: 999999999%;
  29. }
  30. .beforeCurrentTime:last-child:before {
  31. border-bottom: 1px solid ${p => p.theme.purple300};
  32. content: '';
  33. right: 0;
  34. position: absolute;
  35. bottom: 0;
  36. width: 999999999%;
  37. }
  38. `;