hideVisually.js 1018 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = hideVisually;
  4. /**
  5. * CSS to hide content visually but remain accessible to screen readers.
  6. * from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/9a176f57af1cfe8ec70300da4621fb9b07e5fa31/src/css/main.css#L121)
  7. *
  8. * @example
  9. * // Styles as object usage
  10. * const styles = {
  11. * ...hideVisually(),
  12. * }
  13. *
  14. * // styled-components usage
  15. * const div = styled.div`
  16. * ${hideVisually()};
  17. * `
  18. *
  19. * // CSS as JS Output
  20. *
  21. * 'div': {
  22. * 'border': '0',
  23. * 'clip': 'rect(0 0 0 0)',
  24. * 'height': '1px',
  25. * 'margin': '-1px',
  26. * 'overflow': 'hidden',
  27. * 'padding': '0',
  28. * 'position': 'absolute',
  29. * 'whiteSpace': 'nowrap',
  30. * 'width': '1px',
  31. * }
  32. */
  33. function hideVisually() {
  34. return {
  35. border: '0',
  36. clip: 'rect(0 0 0 0)',
  37. height: '1px',
  38. margin: '-1px',
  39. overflow: 'hidden',
  40. padding: '0',
  41. position: 'absolute',
  42. whiteSpace: 'nowrap',
  43. width: '1px'
  44. };
  45. }
  46. module.exports = exports.default;