You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					212 lines
				
				3.7 KiB
			
		
		
			
		
	
	
					212 lines
				
				3.7 KiB
			| 
											3 years ago
										 | // @flow | ||
|  | import type { Styles } from '../types/style' | ||
|  | 
 | ||
|  | /** | ||
|  |  * CSS to normalize abnormalities across browsers (normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css) | ||
|  |  * | ||
|  |  * @example | ||
|  |  * // Styles as object usage | ||
|  |  * const styles = { | ||
|  |  *    ...normalize(), | ||
|  |  * } | ||
|  |  * | ||
|  |  * // styled-components usage | ||
|  |  * const GlobalStyle = createGlobalStyle`${normalize()}` | ||
|  |  * | ||
|  |  * // CSS as JS Output | ||
|  |  * | ||
|  |  * html { | ||
|  |  *   lineHeight: 1.15, | ||
|  |  *   textSizeAdjust: 100%, | ||
|  |  * } ... | ||
|  |  */ | ||
|  | export default function normalize(): Array<Styles> { | ||
|  |   return [ | ||
|  |     { | ||
|  |       html: { | ||
|  |         lineHeight: '1.15', | ||
|  |         textSizeAdjust: '100%', | ||
|  |       }, | ||
|  | 
 | ||
|  |       body: { | ||
|  |         margin: '0', | ||
|  |       }, | ||
|  | 
 | ||
|  |       main: { | ||
|  |         display: 'block', | ||
|  |       }, | ||
|  | 
 | ||
|  |       h1: { | ||
|  |         fontSize: '2em', | ||
|  |         margin: '0.67em 0', | ||
|  |       }, | ||
|  | 
 | ||
|  |       hr: { | ||
|  |         boxSizing: 'content-box', | ||
|  |         height: '0', | ||
|  |         overflow: 'visible', | ||
|  |       }, | ||
|  | 
 | ||
|  |       pre: { | ||
|  |         fontFamily: 'monospace, monospace', | ||
|  |         fontSize: '1em', | ||
|  |       }, | ||
|  | 
 | ||
|  |       a: { | ||
|  |         backgroundColor: 'transparent', | ||
|  |       }, | ||
|  | 
 | ||
|  |       'abbr[title]': { | ||
|  |         borderBottom: 'none', | ||
|  |         textDecoration: 'underline', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`b, | ||
|  |     strong`]: { | ||
|  |         fontWeight: 'bolder', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`code, | ||
|  |     kbd, | ||
|  |     samp`]: { | ||
|  |         fontFamily: 'monospace, monospace', | ||
|  |         fontSize: '1em', | ||
|  |       }, | ||
|  | 
 | ||
|  |       small: { | ||
|  |         fontSize: '80%', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`sub, | ||
|  |     sup`]: { | ||
|  |         fontSize: '75%', | ||
|  |         lineHeight: '0', | ||
|  |         position: 'relative', | ||
|  |         verticalAlign: 'baseline', | ||
|  |       }, | ||
|  | 
 | ||
|  |       sub: { | ||
|  |         bottom: '-0.25em', | ||
|  |       }, | ||
|  | 
 | ||
|  |       sup: { | ||
|  |         top: '-0.5em', | ||
|  |       }, | ||
|  | 
 | ||
|  |       img: { | ||
|  |         borderStyle: 'none', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`button, | ||
|  |     input, | ||
|  |     optgroup, | ||
|  |     select, | ||
|  |     textarea`]: { | ||
|  |         fontFamily: 'inherit', | ||
|  |         fontSize: '100%', | ||
|  |         lineHeight: '1.15', | ||
|  |         margin: '0', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`button, | ||
|  |     input`]: { | ||
|  |         overflow: 'visible', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`button, | ||
|  |     select`]: { | ||
|  |         textTransform: 'none', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`button, | ||
|  |     html [type="button"], | ||
|  |     [type="reset"], | ||
|  |     [type="submit"]`]: { | ||
|  |         WebkitAppearance: 'button', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`button::-moz-focus-inner, | ||
|  |     [type="button"]::-moz-focus-inner, | ||
|  |     [type="reset"]::-moz-focus-inner, | ||
|  |     [type="submit"]::-moz-focus-inner`]: { | ||
|  |         borderStyle: 'none', | ||
|  |         padding: '0', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`button:-moz-focusring, | ||
|  |     [type="button"]:-moz-focusring, | ||
|  |     [type="reset"]:-moz-focusring, | ||
|  |     [type="submit"]:-moz-focusring`]: { | ||
|  |         outline: '1px dotted ButtonText', | ||
|  |       }, | ||
|  | 
 | ||
|  |       fieldset: { | ||
|  |         padding: '0.35em 0.625em 0.75em', | ||
|  |       }, | ||
|  | 
 | ||
|  |       legend: { | ||
|  |         boxSizing: 'border-box', | ||
|  |         color: 'inherit', | ||
|  |         display: 'table', | ||
|  |         maxWidth: '100%', | ||
|  |         padding: '0', | ||
|  |         whiteSpace: 'normal', | ||
|  |       }, | ||
|  | 
 | ||
|  |       progress: { | ||
|  |         verticalAlign: 'baseline', | ||
|  |       }, | ||
|  | 
 | ||
|  |       textarea: { | ||
|  |         overflow: 'auto', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`[type="checkbox"], | ||
|  |     [type="radio"]`]: { | ||
|  |         boxSizing: 'border-box', | ||
|  |         padding: '0', | ||
|  |       }, | ||
|  | 
 | ||
|  |       [`[type="number"]::-webkit-inner-spin-button, | ||
|  |     [type="number"]::-webkit-outer-spin-button`]: { | ||
|  |         height: 'auto', | ||
|  |       }, | ||
|  | 
 | ||
|  |       '[type="search"]': { | ||
|  |         WebkitAppearance: 'textfield', | ||
|  |         outlineOffset: '-2px', | ||
|  |       }, | ||
|  | 
 | ||
|  |       '[type="search"]::-webkit-search-decoration': { | ||
|  |         WebkitAppearance: 'none', | ||
|  |       }, | ||
|  | 
 | ||
|  |       '::-webkit-file-upload-button': { | ||
|  |         WebkitAppearance: 'button', | ||
|  |         font: 'inherit', | ||
|  |       }, | ||
|  | 
 | ||
|  |       details: { | ||
|  |         display: 'block', | ||
|  |       }, | ||
|  | 
 | ||
|  |       summary: { | ||
|  |         display: 'list-item', | ||
|  |       }, | ||
|  | 
 | ||
|  |       template: { | ||
|  |         display: 'none', | ||
|  |       }, | ||
|  | 
 | ||
|  |       '[hidden]': { | ||
|  |         display: 'none', | ||
|  |       }, | ||
|  |     }, | ||
|  |     { | ||
|  |       'abbr[title]': { | ||
|  |         textDecoration: 'underline dotted', | ||
|  |       }, | ||
|  |     }, | ||
|  |   ] | ||
|  | } |