polished
Version:
A lightweight toolset for writing styles in Javascript.
46 lines (44 loc) • 986 B
Flow
// @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',
}
}