hideText.js.flow 692 B

123456789101112131415161718192021222324252627282930313233343536
  1. // @flow
  2. import type { Styles } from '../types/style'
  3. /**
  4. * CSS to hide text to show a background image in a SEO-friendly way.
  5. *
  6. * @example
  7. * // Styles as object usage
  8. * const styles = {
  9. * 'backgroundImage': 'url(logo.png)',
  10. * ...hideText(),
  11. * }
  12. *
  13. * // styled-components usage
  14. * const div = styled.div`
  15. * backgroundImage: url(logo.png);
  16. * ${hideText()};
  17. * `
  18. *
  19. * // CSS as JS Output
  20. *
  21. * 'div': {
  22. * 'backgroundImage': 'url(logo.png)',
  23. * 'textIndent': '101%',
  24. * 'overflow': 'hidden',
  25. * 'whiteSpace': 'nowrap',
  26. * }
  27. */
  28. export default function hideText(): Styles {
  29. return {
  30. textIndent: '101%',
  31. overflow: 'hidden',
  32. whiteSpace: 'nowrap',
  33. }
  34. }