normalize.js.flow 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. // @flow
  2. import type { Styles } from '../types/style'
  3. /**
  4. * CSS to normalize abnormalities across browsers (normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css)
  5. *
  6. * @example
  7. * // Styles as object usage
  8. * const styles = {
  9. * ...normalize(),
  10. * }
  11. *
  12. * // styled-components usage
  13. * const GlobalStyle = createGlobalStyle`${normalize()}`
  14. *
  15. * // CSS as JS Output
  16. *
  17. * html {
  18. * lineHeight: 1.15,
  19. * textSizeAdjust: 100%,
  20. * } ...
  21. */
  22. export default function normalize(): Array<Styles> {
  23. return [
  24. {
  25. html: {
  26. lineHeight: '1.15',
  27. textSizeAdjust: '100%',
  28. },
  29. body: {
  30. margin: '0',
  31. },
  32. main: {
  33. display: 'block',
  34. },
  35. h1: {
  36. fontSize: '2em',
  37. margin: '0.67em 0',
  38. },
  39. hr: {
  40. boxSizing: 'content-box',
  41. height: '0',
  42. overflow: 'visible',
  43. },
  44. pre: {
  45. fontFamily: 'monospace, monospace',
  46. fontSize: '1em',
  47. },
  48. a: {
  49. backgroundColor: 'transparent',
  50. },
  51. 'abbr[title]': {
  52. borderBottom: 'none',
  53. textDecoration: 'underline',
  54. },
  55. [`b,
  56. strong`]: {
  57. fontWeight: 'bolder',
  58. },
  59. [`code,
  60. kbd,
  61. samp`]: {
  62. fontFamily: 'monospace, monospace',
  63. fontSize: '1em',
  64. },
  65. small: {
  66. fontSize: '80%',
  67. },
  68. [`sub,
  69. sup`]: {
  70. fontSize: '75%',
  71. lineHeight: '0',
  72. position: 'relative',
  73. verticalAlign: 'baseline',
  74. },
  75. sub: {
  76. bottom: '-0.25em',
  77. },
  78. sup: {
  79. top: '-0.5em',
  80. },
  81. img: {
  82. borderStyle: 'none',
  83. },
  84. [`button,
  85. input,
  86. optgroup,
  87. select,
  88. textarea`]: {
  89. fontFamily: 'inherit',
  90. fontSize: '100%',
  91. lineHeight: '1.15',
  92. margin: '0',
  93. },
  94. [`button,
  95. input`]: {
  96. overflow: 'visible',
  97. },
  98. [`button,
  99. select`]: {
  100. textTransform: 'none',
  101. },
  102. [`button,
  103. html [type="button"],
  104. [type="reset"],
  105. [type="submit"]`]: {
  106. WebkitAppearance: 'button',
  107. },
  108. [`button::-moz-focus-inner,
  109. [type="button"]::-moz-focus-inner,
  110. [type="reset"]::-moz-focus-inner,
  111. [type="submit"]::-moz-focus-inner`]: {
  112. borderStyle: 'none',
  113. padding: '0',
  114. },
  115. [`button:-moz-focusring,
  116. [type="button"]:-moz-focusring,
  117. [type="reset"]:-moz-focusring,
  118. [type="submit"]:-moz-focusring`]: {
  119. outline: '1px dotted ButtonText',
  120. },
  121. fieldset: {
  122. padding: '0.35em 0.625em 0.75em',
  123. },
  124. legend: {
  125. boxSizing: 'border-box',
  126. color: 'inherit',
  127. display: 'table',
  128. maxWidth: '100%',
  129. padding: '0',
  130. whiteSpace: 'normal',
  131. },
  132. progress: {
  133. verticalAlign: 'baseline',
  134. },
  135. textarea: {
  136. overflow: 'auto',
  137. },
  138. [`[type="checkbox"],
  139. [type="radio"]`]: {
  140. boxSizing: 'border-box',
  141. padding: '0',
  142. },
  143. [`[type="number"]::-webkit-inner-spin-button,
  144. [type="number"]::-webkit-outer-spin-button`]: {
  145. height: 'auto',
  146. },
  147. '[type="search"]': {
  148. WebkitAppearance: 'textfield',
  149. outlineOffset: '-2px',
  150. },
  151. '[type="search"]::-webkit-search-decoration': {
  152. WebkitAppearance: 'none',
  153. },
  154. '::-webkit-file-upload-button': {
  155. WebkitAppearance: 'button',
  156. font: 'inherit',
  157. },
  158. details: {
  159. display: 'block',
  160. },
  161. summary: {
  162. display: 'list-item',
  163. },
  164. template: {
  165. display: 'none',
  166. },
  167. '[hidden]': {
  168. display: 'none',
  169. },
  170. },
  171. {
  172. 'abbr[title]': {
  173. textDecoration: 'underline dotted',
  174. },
  175. },
  176. ]
  177. }