_normalize.scss 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
  1. /* ==========================================================================
  2. Normalize.scss settings
  3. ========================================================================== */
  4. /**
  5. * Includes legacy browser support IE6/7
  6. *
  7. * Set to false if you want to drop support for IE6 and IE7
  8. */
  9. $legacy_browser_support: false !default;
  10. /* Base
  11. ========================================================================== */
  12. /**
  13. * 1. Set default font family to sans-serif.
  14. * 2. Prevent iOS text size adjust after orientation change, without disabling
  15. * user zoom.
  16. * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
  17. * `em` units.
  18. */
  19. html {
  20. font-family: sans-serif; /* 1 */
  21. -ms-text-size-adjust: 100%; /* 2 */
  22. -webkit-text-size-adjust: 100%; /* 2 */
  23. @if $legacy_browser_support {
  24. *font-size: 100%; /* 3 */
  25. }
  26. }
  27. /**
  28. * Remove default margin.
  29. */
  30. body {
  31. margin: 0;
  32. }
  33. /* HTML5 display definitions
  34. ========================================================================== */
  35. /**
  36. * Correct `block` display not defined for any HTML5 element in IE 8/9.
  37. * Correct `block` display not defined for `details` or `summary` in IE 10/11
  38. * and Firefox.
  39. * Correct `block` display not defined for `main` in IE 11.
  40. */
  41. article,
  42. aside,
  43. details,
  44. figcaption,
  45. figure,
  46. footer,
  47. header,
  48. hgroup,
  49. main,
  50. menu,
  51. nav,
  52. section,
  53. summary {
  54. display: block;
  55. }
  56. /**
  57. * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
  58. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  59. */
  60. audio,
  61. canvas,
  62. progress,
  63. video {
  64. display: inline-block; /* 1 */
  65. vertical-align: baseline; /* 2 */
  66. @if $legacy_browser_support {
  67. *display: inline;
  68. *zoom: 1;
  69. }
  70. }
  71. /**
  72. * Prevents modern browsers from displaying `audio` without controls.
  73. * Remove excess height in iOS 5 devices.
  74. */
  75. audio:not([controls]) {
  76. display: none;
  77. height: 0;
  78. }
  79. /**
  80. * Address `[hidden]` styling not present in IE 8/9/10.
  81. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
  82. */
  83. [hidden],
  84. template {
  85. display: none;
  86. }
  87. /* Links
  88. ========================================================================== */
  89. /**
  90. * Remove the gray background color from active links in IE 10.
  91. */
  92. a {
  93. background-color: transparent;
  94. }
  95. /**
  96. * Improve readability when focused and also mouse hovered in all browsers.
  97. */
  98. a {
  99. &:active, &:hover {
  100. outline: 0;
  101. };
  102. }
  103. /* Text-level semantics
  104. ========================================================================== */
  105. /**
  106. * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  107. */
  108. abbr[title] {
  109. border-bottom: 1px dotted;
  110. }
  111. /**
  112. * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  113. */
  114. b,
  115. strong {
  116. font-weight: bold;
  117. }
  118. @if $legacy_browser_support {
  119. blockquote {
  120. margin: 1em 40px;
  121. }
  122. }
  123. /**
  124. * Address styling not present in Safari and Chrome.
  125. */
  126. dfn {
  127. font-style: italic;
  128. }
  129. /**
  130. * Address variable `h1` font-size and margin within `section` and `article`
  131. * contexts in Firefox 4+, Safari, and Chrome.
  132. */
  133. h1 {
  134. font-size: 2em;
  135. margin: 0.67em 0;
  136. }
  137. @if $legacy_browser_support {
  138. h2 {
  139. font-size: 1.5em;
  140. margin: 0.83em 0;
  141. }
  142. h3 {
  143. font-size: 1.17em;
  144. margin: 1em 0;
  145. }
  146. h4 {
  147. font-size: 1em;
  148. margin: 1.33em 0;
  149. }
  150. h5 {
  151. font-size: 0.83em;
  152. margin: 1.67em 0;
  153. }
  154. h6 {
  155. font-size: 0.67em;
  156. margin: 2.33em 0;
  157. }
  158. }
  159. /**
  160. * Addresses styling not present in IE 8/9.
  161. */
  162. mark {
  163. background: #ff0;
  164. color: #000;
  165. }
  166. @if $legacy_browser_support {
  167. /**
  168. * Addresses margins set differently in IE 6/7.
  169. */
  170. p,
  171. pre {
  172. *margin: 1em 0;
  173. }
  174. /*
  175. * Addresses CSS quotes not supported in IE 6/7.
  176. */
  177. q {
  178. *quotes: none;
  179. }
  180. /*
  181. * Addresses `quotes` property not supported in Safari 4.
  182. */
  183. q:before,
  184. q:after {
  185. content: '';
  186. content: none;
  187. }
  188. }
  189. /**
  190. * Address inconsistent and variable font size in all browsers.
  191. */
  192. small {
  193. font-size: 80%;
  194. }
  195. /**
  196. * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  197. */
  198. sub,
  199. sup {
  200. font-size: 75%;
  201. line-height: 0;
  202. position: relative;
  203. vertical-align: baseline;
  204. }
  205. sup {
  206. top: -0.5em;
  207. }
  208. sub {
  209. bottom: -0.25em;
  210. }
  211. @if $legacy_browser_support {
  212. /* ==========================================================================
  213. Lists
  214. ========================================================================== */
  215. /*
  216. * Addresses margins set differently in IE 6/7.
  217. */
  218. dl,
  219. menu,
  220. ol,
  221. ul {
  222. *margin: 1em 0;
  223. }
  224. dd {
  225. *margin: 0 0 0 40px;
  226. }
  227. /*
  228. * Addresses paddings set differently in IE 6/7.
  229. */
  230. menu,
  231. ol,
  232. ul {
  233. *padding: 0 0 0 40px;
  234. }
  235. /*
  236. * Corrects list images handled incorrectly in IE 7.
  237. */
  238. nav ul,
  239. nav ol {
  240. *list-style: none;
  241. *list-style-image: none;
  242. }
  243. }
  244. /* Embedded content
  245. ========================================================================== */
  246. /**
  247. * 1. Remove border when inside `a` element in IE 8/9/10.
  248. * 2. Improves image quality when scaled in IE 7.
  249. */
  250. img {
  251. border: 0;
  252. @if $legacy_browser_support {
  253. *-ms-interpolation-mode: bicubic; /* 2 */
  254. }
  255. }
  256. /**
  257. * Correct overflow not hidden in IE 9/10/11.
  258. */
  259. svg:not(:root) {
  260. overflow: hidden;
  261. }
  262. /* Grouping content
  263. ========================================================================== */
  264. /**
  265. * Address margin not present in IE 8/9 and Safari.
  266. */
  267. figure {
  268. margin: 1em 40px;
  269. }
  270. /**
  271. * Address differences between Firefox and other browsers.
  272. */
  273. hr {
  274. -moz-box-sizing: content-box;
  275. box-sizing: content-box;
  276. height: 0;
  277. }
  278. /**
  279. * Contain overflow in all browsers.
  280. */
  281. pre {
  282. overflow: auto;
  283. }
  284. /**
  285. * Address odd `em`-unit font size rendering in all browsers.
  286. * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
  287. */
  288. code,
  289. kbd,
  290. pre,
  291. samp {
  292. font-family: monospace, monospace;
  293. @if $legacy_browser_support {
  294. _font-family: 'courier new', monospace;
  295. }
  296. font-size: 1em;
  297. }
  298. /* Forms
  299. ========================================================================== */
  300. /**
  301. * Known limitation: by default, Chrome and Safari on OS X allow very limited
  302. * styling of `select`, unless a `border` property is set.
  303. */
  304. /**
  305. * 1. Correct color not being inherited.
  306. * Known issue: affects color of disabled elements.
  307. * 2. Correct font properties not being inherited.
  308. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
  309. * 4. Improves appearance and consistency in all browsers.
  310. */
  311. button,
  312. input,
  313. optgroup,
  314. select,
  315. textarea {
  316. color: inherit; /* 1 */
  317. font: inherit; /* 2 */
  318. margin: 0; /* 3 */
  319. @if $legacy_browser_support {
  320. vertical-align: baseline; /* 3 */
  321. *vertical-align: middle; /* 3 */
  322. }
  323. }
  324. /**
  325. * Address `overflow` set to `hidden` in IE 8/9/10/11.
  326. */
  327. button {
  328. overflow: visible;
  329. }
  330. /**
  331. * Address inconsistent `text-transform` inheritance for `button` and `select`.
  332. * All other form control elements do not inherit `text-transform` values.
  333. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
  334. * Correct `select` style inheritance in Firefox.
  335. */
  336. button,
  337. select {
  338. text-transform: none;
  339. }
  340. /**
  341. * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  342. * and `video` controls.
  343. * 2. Correct inability to style clickable `input` types in iOS.
  344. * 3. Improve usability and consistency of cursor style between image-type
  345. * `input` and others.
  346. * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
  347. * Known issue: inner spacing remains in IE 6.
  348. */
  349. button,
  350. html input[type="button"], /* 1 */
  351. input[type="reset"],
  352. input[type="submit"] {
  353. -webkit-appearance: button; /* 2 */
  354. cursor: pointer; /* 3 */
  355. @if $legacy_browser_support {
  356. *overflow: visible; /* 4 */
  357. }
  358. }
  359. /**
  360. * Re-set default cursor for disabled elements.
  361. */
  362. button[disabled],
  363. html input[disabled] {
  364. cursor: default;
  365. }
  366. /**
  367. * Remove inner padding and border in Firefox 4+.
  368. */
  369. button::-moz-focus-inner,
  370. input::-moz-focus-inner {
  371. border: 0;
  372. padding: 0;
  373. }
  374. /**
  375. * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  376. * the UA stylesheet.
  377. */
  378. input {
  379. line-height: normal;
  380. }
  381. /**
  382. * 1. Address box sizing set to `content-box` in IE 8/9/10.
  383. * 2. Remove excess padding in IE 8/9/10.
  384. * Known issue: excess padding remains in IE 6.
  385. */
  386. input[type="checkbox"],
  387. input[type="radio"] {
  388. box-sizing: border-box; /* 1 */
  389. padding: 0; /* 2 */
  390. @if $legacy_browser_support {
  391. *height: 13px; /* 3 */
  392. *width: 13px; /* 3 */
  393. }
  394. }
  395. /**
  396. * Fix the cursor style for Chrome's increment/decrement buttons. For certain
  397. * `font-size` values of the `input`, it causes the cursor style of the
  398. * decrement button to change from `default` to `text`.
  399. */
  400. input[type="number"]::-webkit-inner-spin-button,
  401. input[type="number"]::-webkit-outer-spin-button {
  402. height: auto;
  403. }
  404. /**
  405. * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
  406. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
  407. * (include `-moz` to future-proof).
  408. */
  409. input[type="search"] {
  410. -webkit-appearance: textfield; /* 1 */
  411. -moz-box-sizing: content-box;
  412. -webkit-box-sizing: content-box; /* 2 */
  413. box-sizing: content-box;
  414. }
  415. /**
  416. * Remove inner padding and search cancel button in Safari and Chrome on OS X.
  417. * Safari (but not Chrome) clips the cancel button when the search input has
  418. * padding (and `textfield` appearance).
  419. */
  420. input[type="search"]::-webkit-search-cancel-button,
  421. input[type="search"]::-webkit-search-decoration {
  422. -webkit-appearance: none;
  423. }
  424. /**
  425. * Define consistent border, margin, and padding.
  426. */
  427. fieldset {
  428. border: 1px solid #c0c0c0;
  429. margin: 0 2px;
  430. padding: 0.35em 0.625em 0.75em;
  431. }
  432. /**
  433. * 1. Correct `color` not being inherited in IE 8/9/10/11.
  434. * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  435. * 3. Corrects text not wrapping in Firefox 3.
  436. * 4. Corrects alignment displayed oddly in IE 6/7.
  437. */
  438. legend {
  439. border: 0; /* 1 */
  440. padding: 0; /* 2 */
  441. @if $legacy_browser_support {
  442. white-space: normal; /* 3 */
  443. *margin-left: -7px; /* 4 */
  444. }
  445. }
  446. /**
  447. * Remove default vertical scrollbar in IE 8/9/10/11.
  448. */
  449. textarea {
  450. overflow: auto;
  451. }
  452. /**
  453. * Don't inherit the `font-weight` (applied by a rule above).
  454. * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
  455. */
  456. optgroup {
  457. font-weight: bold;
  458. }
  459. /* Tables
  460. ========================================================================== */
  461. /**
  462. * Remove most spacing between table cells.
  463. */
  464. table {
  465. border-collapse: collapse;
  466. border-spacing: 0;
  467. }
  468. td,
  469. th {
  470. padding: 0;
  471. }