123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- // @flow
- import type { Styles } from '../types/style'
- /**
- * CSS to hide content visually but remain accessible to screen readers.
- * from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/9a176f57af1cfe8ec70300da4621fb9b07e5fa31/src/css/main.css#L121)
- *
- * @example
- * // Styles as object usage
- * const styles = {
- * ...hideVisually(),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- * ${hideVisually()};
- * `
- *
- * // CSS as JS Output
- *
- * 'div': {
- * 'border': '0',
- * 'clip': 'rect(0 0 0 0)',
- * 'height': '1px',
- * 'margin': '-1px',
- * 'overflow': 'hidden',
- * 'padding': '0',
- * 'position': 'absolute',
- * 'whiteSpace': 'nowrap',
- * 'width': '1px',
- * }
- */
- export default function hideVisually(): Styles {
- return {
- border: '0',
- clip: 'rect(0 0 0 0)',
- height: '1px',
- margin: '-1px',
- overflow: 'hidden',
- padding: '0',
- position: 'absolute',
- whiteSpace: 'nowrap',
- width: '1px',
- }
- }
|